Live Demo of Chat Vault
This is a fullstack MERN application that models a social media website. Includes a Realtime Chat Feature built using Socket.IO library. Made using Javascript, React JS, Node JS, Express, MongoDB, and Material-UI.
🔗 Backend Repo
 |
 |
 |
 |
 |
 |
|---|
- Front-End: Javascript, React (Context API), Material-UI
- Back-End: NodeJS, Express, Socket.IO
- Database: MongoDB
- Testing: Jest, React-Testing-Library
- Deployment: Heroku (backend), Netlify (frontend), MongoDB Atlas
- User registration/login authenticated through JSON Web Token
- Realtime Chat implemented using Socket.IO
- Start or delete a chat with another user
- Create, delete, update a post in the home page or profile page
- Like/dislike and add/delete comments for each post
- Follow or unfollow a user to view their content
- Search for a user's profile or a user's post
- Update personal information (bio, city, status, etc.) and change or upload profile/cover pictures
- Adding a Backend
I started this project off by building the backend portion of my application. As I was still trying to gain proficiency with the MERN stack, I used Node.JS and Express to build the backend and MongoDB for the database. First, I created a USERS model & route that serves a REST API to be used for updating, deleting, following, and unfollowing a user. Afterwards, I created an AUTH model & route that is used for authenticating (login) and creating (register) a user account. Finally, I added a POSTS model & route that is used to create, update, delete and retreive a post from the home page or a user's profile page. - Adding a Frontend
After initially building my application with a backend, I decided to build a frontend. For this, I used React JS and plain CSS to style and design my application while minimally using Material-UI to import some icons. I created the components and pages that would implement the features that I created for the backend such as the homepage, profile page, register page, and login page. - Connecting the Frontend to the Backend
With both of the frontend and backend portion of my application in place, it was time to connect them together. I used Axios to consume the backend's REST APIs to populate the pages of my application with the appropriate data. Furthermore, I used Context API to globally manage the appliction's state, where I created an Auth Context, Auth Reducer, and Auth Actions, all of which are used to authenticate a user's account and give them access to different parts of the application. - Creating a Realtime Chat Feature
After building a majority of the application, I implented a feature that would allow authenticated users to communicate and talk to each other in realtime. To accomplish this, I built two additional backend models & routes; CONVERSATIONS and MESSAGES. The conversations route allows the application to fetch a conversation between two users and allows a user to start their own conversation. The messages route then displays all the messages of a conversation and allows the user to send messages to another user. Finally, I used Socket.IO to create a websocket server on the backend. This allowed the chat feature of my application to have realtime data flow, where the conversation between two users are instantaneously updated without having to make asynchronous requests.
- Add token authentication
- Add friend list and online friends feature in homepage
- Create search page (friends and posts)
- Include ability to delete a user's posts
- Include ability to update a user's posts
- Create comment system for posts
- Add error handling for login and register pages
- Create edit profile functionality (pictures and personal info)
- Add ability to start a conversation in messenger
- Include feature to delete a conversation in messenger
- Add feature to search for a friend in messenger
- Add unit testing for components
- Rewrite code in Typescript
- Fix bug where user has to refresh page for realtime chat to work
- Create friend request and notification system using Sockets
- Add end-to-end testing using Cypress
