MERN Chat App

A real-time full-stack Chat App made with MERN stack and socket.io focused more on backend than frontend.

Hosted using Render: https://mern-chat-app-m2m3.onrender.com/ (might take few minutes to load due to inactivity)

Introduction

My main motive to make this project was to learn the following new technologies - zustand, react (in depth), JWT, tailwindcss and socket.io.

New Lessons Learned

There are many things that I learnt by making this project, some of which I wanted to learn but had no idea from where I'd get the knowledge from.

• Separating out frontend / backend and how to develop them individually, enabling me to work as a separate backend developer if the need be.
• Implementing JWT method of authentication which is different from what I previously implemented using standard cookies. I absolutely loved how nothing is stored on the server side and all on the user's browser!
• Strengthened implementation of socket.io to create real-time messaging.
• How to use a state-manager for react like zustand and what advantages does it bring.
• Using daisy-ui along with tailwindcss flipped the CSS world for a developer struggling to center a div!

Software Design

This project follows an MVC (Model-View-Controller) software design pattern, an industry standard for full-stack applications promoting Separation of Concerns, Modularity, Reusability, Scalability, Testability, Parallel Development, Maintainability and Flexibility.

Technologies

• bcrypt
• JWT
• socket.io
• mongoose
• express
• react - custom hooks and context
• nodejs
• zustand
• tailwindcss
• daisy-ui
• react-hot-toast
• postman

Major Features

• Complete frontend form validation and backend route protection using JWT.
• End-to-end user authentication and authorization using JWT with Login, Register and Logout functionality.
• Real-time messaging using socket.io.
• State management using Zustand.
• Proper database design using references implementing normalization of database.
• Notification for new messages.
• Online users indication.

Screenshots

Project status

Though there are some minor bugs, this project is considered over. This repo will not be maintained.

Sources

This was a training project followed along from https://youtu.be/HwCqsOis894?si=H4-FkFuZew0DbV4a.