BlahBlah is a real-time chat web app built with the MERN stack. It supports secure, real-time messaging with image sharing, profile customization, and theme switching. Built with a sleek UI powered by Tailwind CSS and DaisyUI, and real-time communication handled via Socket.IO, the app uses MongoDB Atlas for scalable cloud-based data storage.
- React.js
- Tailwind CSS + DaisyUI
- Zustand (State Management)
- Axios
- Lucide React (Icons)
- React Router DOM
- Node.js + Express.js
- MongoDB Atlas + Mongoose
- Socket.IO
- JSON Web Token (JWT)
- bcryptjs
- Cloudinary (Image Uploads)
- Cors
- Cookie-parser
- 🔐 JWT-based authentication (login/signup)
- 💬 Real-time one-on-one chat using Socket.IO
- 🖼️ Send and receive images in chat
- 🧑 Upload and update user profile pictures via Cloudinary
- 🟢 Real-time user presence (online/offline)
- 🎨 Theme switcher with multiple DaisyUI themes
- 🌐 MongoDB Atlas for cloud-hosted database
- 🗂️ Chat history persistence
BlahBlah/
├── backend/
│ └── src/
│ ├── controllers/ # Route handler logic
│ ├── lib/ # DB connection, Cloudinary config, etc.
│ ├── middleware/ # JWT auth, Multer, error handling
│ ├── models/ # Mongoose schemas
│ ├── routes/ # Express routers
│ └── index.js # Server entry point
│
├── frontend/
| ├── public/
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── constants/ # App-wide constants
│ │ ├── lib/ # Axios instance, utility functions
│ │ ├── pages/ # Page-level views
│ │ ├── store/ # Zustand store
│ │ ├── App.jsx # Root app component
│ │ ├── main.jsx # ReactDOM entry point
│ │ ├── index.css # Global styles
│ │ └── index.html # HTML entry point
│ ├── tailwind.config.js
│ ├── postcss.config.js
│ └── package.json
- ✏️ Typing indicators
- 🔔 Message notifications
- 🧑🤝🧑 Group chat functionality
- 📎 File/document sharing
- 🕵️♂️ Message read receipts
This project is licensed under the MIT License.