Class Manager Django + React
Tags: javascript, python, react, django
Published: 2022-07-13 07:18:54

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 `cmd `on `Class Manager/` and run the following commands:

```bash
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`:

```python
INSTALLED_APPS = [
    # ...
	
    'rest_framework',
    'rest_framework.authtoken',
    'django_filters',
    'corsheaders',
    'channels',

    'Auth',
    'Class',
]
```

And, just bellow `INSTALLED_APPS` add:

```python
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:

```python
MIDDLEWARE = [
    # ...
    
    'corsheaders.middleware.CorsMiddleware', # Initialize CORS
    'csp.middleware.CSPMiddleware'
]
```

And lastly in the bottom of `settings.py` add:

```python
# 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:

```python
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`.

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