Hey developers! 👋
I'm excited to share a project I just finished — a real-time chat application built using the MERN stack, complete with messaging, image sharing, theme switching, emoji support, and more!
Whether you're into full-stack development or just looking to explore a real-world example of React + Node + Socket.IO, I hope this inspires you.
🚀 Source Code
📦 GitHub Repo: see the repository
🔧 Tech Stack
Here’s what powers the app:
- Frontend: React.js, Tailwind CSS, DaisyUI
- State Management: Zustand (super clean global state)
- Backend: Node.js, Express.js, MongoDB (Mongoose)
- Authentication: JWT + bcrypt
- Real-Time Messaging: Socket.IO
- Image Uploads: Cloudinary
- API Requests: Axios
✨ Features
✅ JWT Auth & Protected Routes
✅ Send, Edit, and Delete Messages
✅ Image Upload & Display
✅ Emoji Support via emoji picker
✅ Light/Dark Mode toggle
✅ User Profile Update (name, avatar)
✅ Clean UI using TailwindCSS + DaisyUI.
💡 Why I Built This ?
I wanted to level up my MERN stack skills and build something real-time, full-featured, and user-friendly. Chat apps are perfect for learning:
WebSocket events (with Socket.IO)
File uploads and handling via Cloudinary
Global state (with Zustand, instead of Redux)
Tailwind UI design + theming
Handling JWT securely on frontend + backend
It also helped me learn how to make my code more modular and scalable.
**
**
chat-app/
├── backend/ # Express, MongoDB, Auth, Socket.IO
└── frontend/ # React, Zustand, Tailwind, DaisyUI
**
🧠 What I Learned
**
Managing socket connections for multiple users
JWT token storage & protection on the client
Zustand’s simplicity over Redux for global state
Theming UI with Tailwind + DaisyUI
Uploading images securely and displaying them in chat.
**
💬 Want to Collaborate or Feedback?
**
I’m open to feedback, feature requests, or even PRs if you’d like to contribute! Just drop a comment or message me.
Top comments (0)