Class Manager Django + React

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.

French Telco Orange Hit by Cyber-Attack

ATC Ghana supports Girls-In-ICT Program

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 : )

Source: Coding Networks

Tags: Class Manager Django + React