DEV Community

Web Afsana Keya
Web Afsana Keya

Posted on

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

#react #node #webdev #mongodb

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

  1. Socket.IO Connection Issue:

  • Problem: Connection broke after login/logout

  • Solution: Passed userId via socket.handshake.query and mapped it to sockect.id

  1. Deployment Issue on Vercel:

  • Problem: Vercel crashed because serverless functions don't support WebSockets.

  • Solution: Moved backend to Render, which supports persistent WebSocket connections.

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

📸 Screenshots:

Login

Signup

Real-Time Chat

🌐 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

  1. JWT authentication and protecting routes
  2. Real-time communication using Socket.IO
  3. Handling state management between frontend & backend
  4. 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! 🚀

Top comments (0)