Chat Application

App built with React (frontend) and Express (backend) that pulls data to and from the database Postgres.

View Application on Heroku

Summary

This is my second full-stack application. I've learned so much from this project technically and mentally. I learn so many aspects of server-side programming and also how to be persistent and keep going even though things are rough at times. And, the final result makes me feel great!

Main Functionality

1. Sign-up process - once the user enters their credential and signs up, it sends user data to the backend, and the backend further query the database to see whether the username exists. If not, username and bcrypted password will be saved in the database

2. Log-in process - once the authentication process is completed meaning username and password match the database, the backend will create a token and send it back to the client which will be saved in local storage.

3. Posting process - the user can only post when they have a valid token which was pulled from the user's local storage and send to the backend to verify (authorization process).

4. Real-time chat with multiple users - each user (socket) connects to the backend with socket.io. The backend received a new socket connection every time each user logs in and it will emit new events/messages to all connecting sockets.

Installation

1. Run npm install in root folder
2. Run npm install --prefix client in root folder
3. Create .env file in the root directory and set the following environment variable.
   • ACCESS_TOKEN_SECRET - this can be created using this site.
4. Run npm run dev to start server
5. Open browser at http://localhost:5000

Built With

• Environment - NodeJs
• Frontend - ReactJs + Bootstrap & Reactstrap
• Backend - ExpressJs with Socket.io, bcrpt, JWT
• Database - Postgres

Deployment

• Heroku

Author

• Naam Pondpat - Full Stack Software Developer - LinkedIn