Forem: Coding Networks

Class Manager Django + React

Coding Networks — Wed, 13 Jul 2022 07:18:54 +0000

So, recently one of my friends started making their coding portfolio( for a full stack dev). So I thought I’d help him and other people with making their portfolios.

The following is a Class Manager( basically a school system, an app where teachers can post tests and the student grades, and students can submit tests, chat with other classmates, go on video calls, etc.) built with React( JavaScript) for the frontend and Django( Python) for the backend.

Disclaimer, this is not a beginner tutorial most things will not be explained, firstly because that would take a ton of time, and secondly I will consider that you know most of the basics, the only things I will explain are the more advanced parts.

Secondly, since this is a pretty big project it will be separated into different parts : ) This is the “Getting Started” part : )

In this tutorial we will be using node.js, yarn, Python 3.10.5( and Django), so please make sure you have downloaded these. After everything is downloaded open the folder where you want everything to be in. For me it’ll be Class Manager/ Everything will happen inside this folder

Let’s start with Django. Open up the cmdon Class Manager/ and run the following commands:

Class Manager> django-admin startproject backend
Class Manager> cd backend
Class Manager\backend> python manage.py startapp Auth
Class Manager\backend> python manage.py startapp Class
Class Manager\backend> pip install djangorestframework channels channels-redis django-cors-headers

Now let’s setup React. Run the following commands:

Since we’re here, there’s a couple of things we have to modify in frontend/src. Do the following:

Delete: App.css

Delete: App.test.js

Delete: logo.svg

Delete: setupTests.js

Add a /components folder inside /src

Add a /redux folder inside /src

So our folder structure should be:

/Class Manager
|
|-- /backend
    |
    |--- /Auth
    |--- /backend
    |--- /Class
|-- /frontend
    |
    |--- /node_modules
    |--- /public
    |--- /src
        |
        |--- componets
    |--- redux
    |
    |--- package.json
    |--- package-lock.json

From now on, it’s important that you have 2 cmd’s open( if you want to be more efficient). One, for Class Manager/backend and one for, Class Manager/frontend.

Now let’s just setup our app and call it a day! In backend/settings.py update INSTALLED_APPS:

INSTALLED_APPS = [
    # ...

    'rest_framework',
    'rest_framework.authtoken',
    'django_filters',
    'corsheaders',
    'channels',

    'Auth',
    'Class',
]

And, just bellow INSTALLED_APPS add:

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication', # We will be using auth token for authentication : )
    ],
    'DEFAULT_PARSER_CLASSES': [
        'rest_framework.parsers.JSONParser',
        'rest_framework.parsers.MultiPartParser', # We will need to parse images later : )
    ],
    'DEFAULT_FILTER_BACKENDS': [
        'django_filters.rest_framework.DjangoFilterBackend' # We will manage filtering with FilterBackend : )
    ],
}

And update MIDDLEWARE like so:

MIDDLEWARE = [
    # ...

    'corsheaders.middleware.CorsMiddleware', # Initialize CORS
    'csp.middleware.CSPMiddleware'
]

And lastly in the bottom of settings.py add:

# Setting up media files( images, .txt, etc.)
STATIC_URL          =   'static/'
DEFAULT_AUTO_FIELD  =   'django.db.models.BigAutoField'

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

ASGI_APPLICATION = "backend.routing.application"

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}

CSRF_COOKIE_SECURE                  =      True
SESSION_COOKIE_SECURE               =      True
SECURE_HSTS_SECONDS                 =      0
SECURE_HSTS_INCLUDE_SUBDOMAINS      =      True
SECURE_HSTS_PRELOAD                 =      True
CSP_DEFAULT_SRC                     =      ("'self'",)
CSP_STYLE_SRC                       =      ("'self'",)
CSP_SCRIPT_SRC                      =      ("'self'",)
CSP_IMG_SRC                         =      ("'self'",)
CSP_FONT_SRC                        =      ("'self'",)

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
]

Now head over to backend/urls.py and update it:

from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path("", include("Auth.urls")),
    path("", include("Class.urls"))
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

We’re done with python code( for this tutorial). Now head over to frontend/src/App.js.

export default function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

That’s it for now : ). I know we didn’t have to run any code, but that’s only for this tutorial since it was just setting things up! Stay tunned for the next tutorial : )

Data Science & Algorithms: Merge Sort

Coding Networks — Mon, 07 Mar 2022 08:41:34 +0000

Welcome To Part 2 Of My Introduction To Data Science & Algorithms Blog! In today's post, we will go through the "Merge Sort" Algorithm. And just like last time, I'll give you a code example in Python and JavaScript.

So, how does Merge Sort work?
Well, Merge Sort is considered a divide and conquer algorithm( learn about divide and conquer here).
The way that it works is by diving the array into 2 equal( in terms of length) mini arrays, doing this again until each array is sorted then merges them.

To better understand this here is a photo from google:

Now that you understand the logic behing Merge Sort, let's look at code examples:

Here is Merge Sort in Python code:

def mergeSort(arr):
    if len(arr) > 1:
        n = len(arr)//2
        l = arr[:n] # get the left half of the array
        r = arr[n:] # get the right half of the array

        # Sort the two mini arrays
        mergeSort(l)
        mergeSort(r)

        i = j = k = 0

        # I can't really explain this I'm sorry
        while i < len(l) and j < len(r):
            if l[i] < r[j]:
                arr[k] = l[i]
                i += 1
            else:
                arr[k] = r[j]
                j += 1

            k += 1

        # insert the remaining elements in arr
        while i < len(l):
            arr[k] = l[i]
            i += 1
            k += 1

        while j < len(r):
            arr[k] = r[j]
            j += 1
            k += 1


arr = [-6, 5, 0, 69, 42, 1]

mergeSort(arr)

print(arr)

"""
Output:
[-6, 0, 1, 5, 42, 69]
"""

And here is the JavaScript example:

function merge(left, right) {
  let sortedArr = []; // the sorted elements will go here

  while (left.length && right.length) {
    // insert the smallest element to the sortedArr
    if (left[0] < right[0]) {
      sortedArr.push(left.shift());
    } else {
      sortedArr.push(right.shift());
    }
  }

  // use spread operator and create a new array, combining the three arrays
  return [...sortedArr, ...left, ...right];
}

function mergeSort(arr) {
  const half = arr.length / 2;

  // the base case is array length <=1
  if (arr.length <= 1) {
    return arr;
  }

  const left = arr.splice(0, half); // the first half of the array
  const right = arr;
  return merge(mergeSort(left), mergeSort(right));
}

var arr = [-6, 5, 0, 69, 42, 1];
arr = mergeSort(arr);
console.log(arr)

/*
Output:
[-6, 0, 1, 5, 42, 69]
*/

Code by sebhastian.com

That was all for today’s blog! Hope you enjoyed it😁 and don’t forget to ❤️!

Data Science & Algorithms: Insertion Sort

Coding Networks — Mon, 28 Feb 2022 11:07:28 +0000

Recently, I decided to start blogging on this website. And I don't have any ideas for a blog. Well, I don't know what the meta is here.

So, I thought I'd do a series where I explain different algorithms in different languages( Python, JavaScript).

Now, that we got the intro out of the way, let's start with the first algorithm :). Insertion Sort

To understand the theory behind Insertion Sort I'll give you an analogy:

Imagine that you have a list of cards( let's say 4) in no particular order on the table. And you have to sort those cards on your left hand.

So what do you do?
Well, you're going to get a card with your right hand, examine that card, look at the left hand.

If you don't have any cards on your left hand you will put the right-hand card on your left hand, if you have a card on your left hand you'll compare the card on your left hand and right hand. If the right-hand card has a higher value you will insert that card after the previous one( it's a little confusing I know) otherwise you'll push the card on your left hand further to make room for the right-hand card.

Sorry for the big chunk of text :(

Now that we understand how Insertion Sort works on a theoretical level, let's look at how we can do this in code:

Here Is The Python Code:

# Python Code
def insertion_sort(arr):
    # Loop Through Array
    for i in range(len(arr)):
        # Store Selected Element Value In A Variable
        key = arr[i]
        # Store Previous Array Index In A Variable
        j = i - 1

        # Check If There Are Any Other Previous Elements
        # Compare Previous Array Element With Current Element
        while j >= 0 and key < arr[j]:
            # If Previous Element Has A Higher Value Than Current Element, "push it" one index further to "make space" for the current element
            arr[j + 1] = arr[j]
            j -= 1

        # Store Current Element In The Position Where It Belongs
        arr[j + 1] = key

arr = [2, -4, 0, 1, 69] # Random Array
insertion_sort(arr)
print(arr)

# Output:
# [-4, 0, 1, 2, 69]

Here Is The JavaScript Code:

function insertionSort(arr) {
  let i, key, j;
  for (i = 1; i < arr.length; i++) {
    key = arr[i];
    j = i - 1;

    while (j >= 0 && arr[j] > key) {
      arr[j + 1] = arr[j];
      j = j - 1;
    }

    arr[j + 1] = key;
  }
}

let arr = [2, -4, 0, 1, 69];
insertionSort(arr);

console.log(arr);

// Output:
// [ -4, 0, 1, 2, 69 ]

And that's the end of this one! Hope you enjoyed it! Don't forget to like!!!

Coders That Have Participated In A 100-Day Coding Challenge. What Is Your Experience?

Coding Networks — Mon, 28 Feb 2022 09:30:12 +0000