Back

MERN Chat

Developed website to send and receive messages using the MERN stack. Using Cloudinary messages could contain not only text but also images, videos and audio. The front-end was made using ReactJS with Tailwind CSS and framer motion. The back end used express and socket.io for real-time communication, Mongoose library was used to interact with the MongoDB database.
Check on GitHub

Video

Demo
User can create a new account or log in to an existing account. When a user creates an account, their password is encrypted using the bcrypt library before being stored on the database. Upon successfully logging in an Http-only cookie is sent to them which contained an encrypted version of their ID (encrypted using JSONWebToken), this cookie is sent with every communication with the server which allow the server to authenticate the user.
Users can edit their profile information such as their username, profile picture and about. When changing their username, the back end ensures that their name is unique since adding them to one’s contact will require the new username to be entered moving forward, hence the username needs to be unique. Profile images are stored on Cloudinary and will therefore overwrite the previous profile image of the user.
Users can add other users to their contact list to be able to communicate to them by clicking the “Add contact” button. The button will change into a form where they need to type in the username of the person they wish to add, and if the username exists by clicking on the “Send Request” they will be redirected to a newly created chat room between them. If the other user is already in their contact, then no new chat room will be created the user will only be redirected to the existing chat room.
Users can send message containing text, images, videos, or audio. Moreover, the chat room is also paginated, only the last 10 messages exchanged in the chat room will be loaded, if the user wishes to view older messages they can click on the “load more” button in order to request another 10 messages, and they can keep requesting more messages to be loaded if they want more, this ensures that loading a chat room will not take longer and consume more data overtime.
The app colors were defined in the tailwind CSS, “tailwind.config.js” file in order to keep a consistent color scheme through out the app. Moreover, both a light and dark mode was implemented, depending on the user’s system preferences they will be presented with either the light mode version of the application or the dark mode.