SPEEK_Realtime_Web_Chat_Application

This is going to me my personal project in the Christmas Break before the 2nd Semester occurs.

Application Description

SPEEK is going to be a real-time chat web application where users can register an account and start chatting with other fellow users!

Note

Shifted to a Linux Distro (Ubuntu) but most likely most of the code presented in this documentation will be the same

How To Run

1. Enter the root project directory
2. Backend: cd backend
   2.a ./run.sh or
   2.b source ./venv/bin/activate then python server.py
3. Frontend: cd frontend
   3.a ./run.sh or
   3.b npm run dev
4. Proceed to http://localhost:3000 (frontend link)

Technology Stack:

I. Frontend: Vite + React

Creating a Vite Project:

Enter the code to create the my-app vite project: npm create vite@latest my-app -- --template react-ts

Note

If an npm warning occurs where node_modules are to be deleted:

1. cd my-app
2. Manually delete node_modules
3. npm install

Running Vite React Project:

1. Enter the "frontend" directory: cd frontend
2. npm run dev

Adding a React Router Library for Navigation Between Pages:

npm install react-router-dom

Then go to App.tsx and add the pages in the <BrowserRouter> element .

II. Backend Framework: Python + Django

1. Created a .env file containing database content (added it to .gitignore)
2. Created a venv for the python packages needed for the project: python3 -m venv [name_of_env]
3. Installed all the required packages for the program like django, dotenv, etc.

Installed Libraries:

1. django - project: pip install django
2. corsheaders - handles cross-origin resource sharing (different ports): pip install corsheaders
3. django_channels - can be used to run the app; also handles websockets: pip install django-channels
4. psycopg2.pool - where psycopg2 is the python database driver for psql, and psycopg2.pool allows reusing of connections instead of opening and closing multiple connections to the db: pip install psycopg2-binary
5. passlib.hash - specifically bcrypt for hashing user passwords: pip install passlib(bcrypt)

Running Server:

Either run the run.sh file or run using docker commands docker compose up --build.

III. Database: PostgreSQL

• Install postgresql using sudo apt install postgresql postgresql-contrib -y Then I logged in, added a password, and created "speekdb", the database for SPEEK. I saved the database information into an .env file (added to .gitignore).

Ports and Host:

• Frontend Port: 3000 (changed from vite default of 5173)
• Backend Port: 8000 (Django default port)

Features/Requirements:

User Management:

• The user must be able to register an account
• The user must be able to login to an existing account
• The user must be able to log out of their account after use
• The user must be able to delete their account if they wish to
• The user must be able to modify their user information [ongoing]
• (Optional) The user must be able to add a profile picture
• (Optional) The user must be able to remove a profile picture
• The user must be able to modify their password

Messaging

• The user must be able to select a user to chat with
• The user must be able to receive messages from another user
• The user must be able to send messages to another user
• The user must be able to delete individual messages
• The user must be able to archive chats
• Messages must be persistent/sustained

Notifications

• The user must be able to receive message notifications
• The user must be able to read their notifications
• Notifications must be maintained in their notifications inbox

Additional Notes (Technical):

• User passwords must be hashed before saving to the database (use bcrypt)
• userIDs in the database must be unique (no duplicates)
• Error checking for username, email, and password when signing in
• Error checking for updating password
• Create unique roomIDs that can be reused depending on who's chatting with who
• Create new table called "rooms" where roomIDs, user1ID and user2ID can be saved