Building a Real-Time Chat App with MERN & Socket.IO: A Beginner's Journey

Web Afsana Keya — Mon, 08 Sep 2025 18:23:22 +0000

As a beginner MERN stack developer, I want to challenge myself with a project that goes beyond simple CRUD apps. That's how I came up with the idea of building a real-time chat application where users can sign up, log in, and chat instantly with each other.
This project helped me develop skills in authentication, WebSockets, state management, and deployment that are essential for real-world full-stack development.
🛠 Tech Stack:

Frontend: React(Vite),Axios, Context API
Backend: Node.js, Express
Database: MongoDB Atlas
Real-time: Socket.IO
Authentication: JWT
Deployment: Frontend (Vercel), Backend (Render)

✨ Features

🔑 User Authentication (Login / Signup with JWT)

💬 Real-time chat with Socket.IO

👥 Online users tracking

🖼️ Profile update (Cloudinary integration)

📱 Fully responsive design

⚡ Challenges I Faced & Solutions

Socket.IO Connection Issue:

Problem: Connection broke after login/logout
Solution: Passed userId via socket.handshake.query and mapped it to sockect.id

Deployment Issue on Vercel:

Problem: Vercel crashed because serverless functions don't support WebSockets.
Solution: Moved backend to Render, which supports persistent WebSocket connections.

State Management:
Problem: Maintaining auth state and socket connection together was tricky.
Solution: Used React Context API to manage user state, token, and socket connection globally.

📸 Screenshots:

🌐 Live Demo & GitHub Links

🔗 Live App: [chat-app-frontend-delta-seven.vercel.app]

💻 Frontend Repo: [https://github.com/webafsanakeya/chat-app-frontend]

💻 Backend Repo: [https://github.com/webafsanakeya/chat-app-backend]

🎯 Key Learnings

JWT authentication and protecting routes
Real-time communication using Socket.IO
Handling state management between frontend & backend
Deployment differences (Vercel vs Render)

Conclusion

This project was an amazing learning experience as a beginner MERN developer. It gave me confidence in full-stack development and helped me understand the power of real-time communication.

💡 If you’re also working on chat apps or MERN stack projects, let’s connect and share knowledge! 🚀

DEV Community: Web Afsana Keya

Building a Real-Time Chat App with MERN & Socket.IO: A Beginner's Journey