Real-time MERN Stack Chat Application with C Logo, Green Theme & Advanced Messaging
- Frontend (Vercel):
https://chat-app-using-mern-stack-sigma.vercel.app - Backend (Render):
https://chatapp-using-mern-stack.onrender.com
Login with demo:
pankaj@gmail.com / pankaj123
- ✅ One-to-one & Group chats (10 members)
- ✅ Real-time messaging via Socket.IO
- ✅ Online / Offline status with green dot
- ✅ Typing indicator
typing... - ✅ Message ticks: Single ✓ sent (offline), Double ✓✓ grey delivered (online), Double ✓✓ blue #53BDEB read (seen)
- ✅ Unread badges, scroll-to-bottom with count
- 💚 C Logo Branding - Green circle C icon everywhere (replaced WhatsApp icon)
- 🟢 Green Theme #00A884 / #25D366 / #F0F2F5 / #E5DDD5
- 😊 Emoji Picker - 40+ emojis, frequently used, categories
- 📷 Image Sharing - Preview + base64 upload, 2MB limit
- 👤 Profile Photo Upload - Click camera icon, base64, instant Redux update
- ⭐ Starred Messages, Reply Preview (green left border)
- 🔍 Search Chats + Filters: All / Unread / Groups (working with counts)
- 📦 Archived Chats UI, Date Pills, ChatApp bubbles with tails
- 🔔 Notifications with sound + green badge
- 22 Users with gender-specific avatars (randomuser.me men/women)
- 20 Single chats (Pankaj ↔ others)
- 4 Group chats (Family, Office, College, MERN Devs - 10 members each)
- 150+ Messages with ticks, emoji, image, star, reply
- Auto-seeds when DB empty, skips if 22 users exist - No need to run again
| Layer | Tech |
|---|---|
| Frontend | React 18, Vite, Tailwind CSS, Redux Toolkit, React Router, React Icons, Socket.IO Client |
| Backend | Node 18.17.1, Express 4.19, Mongoose 8.4, Socket.IO 4.7, JWT, Bcrypt, Multer |
| Database | MongoDB Atlas (Free 512MB) |
| Deployment | Vercel (Frontend), Render (Backend) - Free lifetime |
ChatApp/
├── backend/
│ ├── config/jwtProvider.js
│ ├── controllers/
│ │ ├── auth.js (lowercase email, bcrypt check logs)
│ │ ├── chat.js (single + group)
│ │ ├── message.js (text/image/emoji, status, star, reply)
│ │ └── user.js (profile update with image)
│ ├── models/
│ │ ├── user.js (about, phone, isOnline, lastSeen, gender avatars)
│ │ ├── chat.js (groupImage, isMuted, isArchived)
│ │ └── message.js (messageType, messageStatus, imageUrl, isStarred, replyTo, readBy)
│ ├── routes/
│ │ ├── auth.js (signup, signin)
│ │ ├── chat.js (get, post, group, delete, rename)
│ │ ├── message.js (post, get, clear, status, star)
│ │ └── user.js (profile, users, update, online)
│ ├── seed/
│ │ ├── whatsappSeed.js (manual 22 users)
│ │ ├── autoSeed.js (auto one-time, checks count)
│ │ ├── forceFix22.js (permanent fix, deletes manual 1 user, creates 22 with bcrypt PASS check)
│ │ └── fixLogin.js (reset pankaj password)
│ ├── server.js (CORS, 10mb limit, autoSeedIfNeeded, socket onlineUsers Map, delivered/read events)
│ ├── package.json (nodemon in devDependencies, seed scripts)
│ └── .env.example
├── frontend/
│ ├── public/
│ │ ├── logo.jpeg (C Logo 3.1KB)
│ │ └── c-logo.png (C Logo)
│ ├── src/
│ │ ├── assets/
│ │ │ ├── c-logo.png (Circle C green - main logo)
│ │ │ └── logo.jpeg (C logo)
│ │ ├── components/
│ │ │ ├── Header.jsx (ChatApp logo only, no by Pankaj badges, profile dropdown z-999 fixed)
│ │ │ ├── Footer.jsx (Minimal: All rights reserved 2026 Pankaj Prajapati)
│ │ │ ├── chatComponents/
│ │ │ │ ├── MyChat.jsx (Filters All/Unread/Groups working with counts)
│ │ │ │ ├── UserSearch.jsx, GroupChatBox.jsx
│ │ │ │ └── ChatNotSelected.jsx (C logo centered, no encryption text, centered image+text)
│ │ │ ├── messageComponents/
│ │ │ │ ├── MessageBox.jsx (Clean status: Online/Offline/Typing only, no tick text)
│ │ │ │ ├── AllMessages.jsx (Wallpaper, bubbles, ticks grey/blue, star, reply preview, hover actions)
│ │ │ │ ├── MessageSend.jsx (Pill input, emoji picker, attach menu, mic FAB)
│ │ │ │ └── EmojiPicker.jsx (320x320, categories)
│ │ │ └── ProfileDetail.jsx (Camera icon upload base64, about edit)
│ │ ├── pages/
│ │ │ ├── SignIn.jsx (C logo, no Demo Tip, lowered form mt-8 md:mt-12)
│ │ │ ├── SignUp.jsx (No 📍 paragraph, lowered form mt-8)
│ │ │ ├── Home.jsx (onlineUsers tracking, delivered/read listeners)
│ │ │ └── Error.jsx (C logo, light theme)
│ │ ├── redux/ (auth, myChat, message, condition)
│ │ ├── socket/ (VITE_BACKEND_URL dynamic)
│ │ └── index.css (ChatApp theme #00A884, #F0F2F5, #E5DDD5, bubble tails, shimmer light)
│ ├── index.html (Title: ChatApp - by Pankaj Prajapati)
│ ├── tailwind.config.js (ChatApp colors)
│ └── package.json (name: chatapp)
└── README.md
- Node 18.17.1+
- MongoDB Atlas URI or local Mongo
git clone https://github.com/PrajapatiPankaj1/ChatApp.git
cd ChatAppcd backend
npm installCreate backend/.env:
PORT=9000
FRONTEND_URL=http://localhost:5173
MONGODB_URI=mongodb+srv://chatapp:Chatapp123@cluster0.qoqxfbz.mongodb.net/chat-app?retryWrites=true&w=majority&appName=Cluster0
JWT_SECRET=d710114d38648bc3f16ec1e33e557149d00aaa87a068af36ffce5e528d33392ad674a1ce6b4578fce62896bb46ac6102a3786b9077e03cd3d2871df000a883d2
AUTO_SEED=true
NODE_ENV=developmentRun:
npm run dev
# 🚀 Server listening on 9000
# ✅ Database Connection established - ChatApp by Pankaj Prajapati
# 🌱 DB Empty - Auto seeding... 22 users, 20 chats, 4 groups - One time only!
# 🔑 Login: pankajprajapti9764@gmail.com / pankaj123cd ../frontend
npm installCreate frontend/.env:
VITE_BACKEND_URL=http://localhost:9000
VITE_APP_NAME=ChatApp
VITE_COPYRIGHT=All rights reserved 2026 Pankaj PrajapatiRun:
npm run dev
# http://localhost:5173Main: pankajprajapti9764@gmail.com / pankaj123
Others (password same):
arjun.sharma@gmail.com / password123 (male men/10.jpg)
priya.sharma@gmail.com / password123 (female women/10.jpg)
If login fails
cd backend
npm run seed:clear # Empty DB
npm run seed:force # Permanent 22 users with bcrypt PASS checkNo need to seed again - Auto checks DB already has 22 users - No need to seed again.
Pankaj Prajapati
- Email: pankajprajapti9764@gmail.com
- GitHub: https://github.com/PrajapatiPankaj1/
- LinkedIn: https://www.linkedin.com/in/pankaj-prajapati1/
© All rights reserved 2026 Pankaj Prajapati - ChatApp