Chat App

This is an portfolio project on creating a full stack chatting web application.

Link to application: https://chatapp.yukhai666.me/

Table of Content

• Introduction
• Main Functions
• Tech Stack
• Run Locally
• Roadmap

Introduction

I started this project as my first endeavour without step-by-step guidance from external sources, such as YouTube videos or blog posts. It provided a fresh opportunity to create the project from scratch and gradually build it up with my knowledge. Simultaneously, it taught me ways to overcome challenges and bugs when encountering bottlenecks.

This project has given me a new experience of working on a programming project, and observing its growth and advancement, which significantly boosts my confidence and motivation to continue learning programming and solving problems along my professional path.

Main Functions

• Token based authentication and authorization to secure API routes and server requests
• Find user through username and start real time chat with users on the website

Tech Stack

Client:

• Sveltekit v2.0.0
• TypeScript (TS) v5.0.0
• Tailwind CSS v3.4.0

Server:

• NodeJS v18.8.0
• ExpressJS v4.18.2
• MongoDB
• Socket.IO v4.7.3

Hosting:

• Digital Ocean
• MongoDB Atlas
• Docker

Run Locally

Open the CLI application (Command Prompt, Git Bash etc.) in the destination folder

Clone the project

  git clone https://github.com/YKLoh666/chat-app.git

Go to the project directory

  cd chat-app

Install dependencies for the frontend application, then build the static application

  cd client
  npm install
  npm run build

Go back to the root folder, install the dependencies for the backend application

  cd ..
  npm install

Create a .env file in the root folder and add the following environment variables. Syntax here

1. NODE_ENV "development" or "production"

2. MONGO_URI To establish connection to the local/atlas database server. A MongoDB database server is required, could be either local version or cloud version (MongoDB Atlas). If the database server is setup locally, usually the URI will be "mongodb://0.0.0.0:27017/database-name" Learn more of MongoDB server setup here: Local, Atlas

3. COOKIE_SECRET A secret random string that is used to sign/unsign cookies when making API calls

4. JWT_PRIVATE_KEY A secret random string that is used to sign/unsign a JWT token that can be used as the user's credential

5. PORT The port where the application runs at

6. PUBLIC_BASE_URL The base URL where the application runs at

Create another two environment variables files call .env.development and .env.production. These two files has only one environment variable in it, which is PUBLIC_BASE_URL that used to specifies the base URL of the application when run in either node environment. As for running in local environment, set both of it to "http://localhost:5000" (change the port number according to the one specified in the .env file, no trailing slash).

Start the server

npm start

Roadmap

• Authentication and Authorization
  • Email verification
  • New authentication methods such as OAuth and one-time password(OTP)
  • Token rotation and Refresh Token
• Chatting function
  • Edit/Unsend message
  • Group Chat Implementation
  • Browser Notification