Django and React Chat App: part-1

#django #react #javascript #webdev

Hello everyone and welcome to my first article
in this article we are going to make chat website using django in backend and react in frontend

before we get started, we'll use these technologies:

Django: A framework to build websites backend using python programming language
DRF: Stands for "Django Rest Framework", a framework to build rest APIs with django
React: A Javascript library to build dynamic websites
SASS: CSS preprocessor
JWT: Stands for "JSON Web Tokens", A way to make authentication between backend (django in our case) and frontend (react in our case)

in this part, we'll prepare our backend

first, we have to make virtual environment
install virtualenv:

pip install virtualenv

make new virtual environment:

virtualenv chat-api

you can change 'chat-api' with any name you want

now activate the virtual environment:

chat-api\Scripts\activate

now we made out virtual environment and activate it
the next step is install django and make new django project

second: make new django project and install required packages
install django:

pip install django

Note: you have to activate your virtual environment before install any package
make new django project:

django-admin startproject chat_api

now let's dive into the new directory and open our text editor (I'll use visual studio code)

code .\chat_api

after that, we have to start new app inside our project
for that, run the next command

python manage.py startapp chat

now, we have to add our new app to INSTALLED_APPS in settings.py file (located in chat_api folder)

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'chat',
]

at the bottom of the file under STATIC_URL constant, add these constants

MEDIA_URL = 'media/'
MEDIA_ROOT = 'media'

in urls.py file, add new path

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('chat.urls'))
] + static(settings.MEDIA_URL, document_root= settings.MEDIA_ROOT)

and now, go to our app folder (chat folder) and create new file and name it 'urls.py'
now we are going to make our models in database
I'll use a library that takes images and convert it to any format you want
run this command to install django-resized library

pip install django-resized

add it to INSTALLED_APPS in settings.py file

INSTALLED_APPS = [
    ...
    'django_resized',
    'chat',
    ...
]

now let's go to models.py file (chat folder) and and make our database tables
first, call these in the beginning of models.py file

from django.db import models
from django_resized import ResizedImageField
from django.contrib.auth.models import User

second, we'll make our first table, Room table

class Room(models.Model):
    name = models.CharField(max_length=255, blank=False)
    password = models.CharField(max_length=255, blank=False)

and we make it with two fields, name and password, and make these two fields of type CharField and give max_length with 255 maximum characters for each field
and blank=False lets the fields to be required and not nullable

and at the last, we make chat table

class Chat(models.Model):
    room = models.ForeignKey(Room, on_delete=models.CASCADE, blank=False, related_name="room")
    user = models.ForeignKey(User, on_delete=models.CASCADE, blank=False, related_name="chatUser")
    message = models.TextField(blank=True)
    image = ResizedImageField(force_format='WEBP', size=None,scale=0.5, quality=75, upload_to='images', blank=True, null=True)

we make OneToMany relation by using FroeignKey in the first two fields, room and user (it means that each room and user can take one or more of messages)
and if the user or the room deleted, the message will be deleted (on_delete=models.CASCADE)
and the related_name gives us a simple name to work with in views.py file (in the next article)
message field is TextField and not restricted by a number of characters, and this field is nullable (blank=True)
and in the image field, we give it ResizedImageField and we give force_format='WEBP' to convert any uploaded image to webp image format, then we give it size=None to let the image stay in its default width and height, then we give it qualtiy=75 to reduce image quality thus load it quickly, then we give it upload_to='images' and this let the images to be saved in images folder inside our media folder, then we give it blank=True null=True to make it nullable

this is the part one and see you in the next part
this is the repository in the Github:

mousaAM / django-react-chat-app

# django-react-chat-app
this is a simple chat app built with django and react

# how to run this project
make a virtual environment and install the repository inside it

activate you virtual environment
```bash
venv/Scripts/activate # for linux: source venv/bin/activate
```

then take a dive inside backend folder and download the used packages
```bash
pip install -r requirements.txt
```

then run the server

```bash
python manage.py runserver
```
**Note: make sure that the virtual environment is activated**

Now get inside the frontend folder and run
```bash
npm i # or npm install
```
and then run the website
```bash
npm run dev
```

Happy Coding ^_^

View on GitHub