ChatFlow

ChatFlow is a real-time chat app I built using the MERN stack and Socket.IO. It lets users sign up, chat with each other live, update their profile picture, and switch between different themes.

---

What it does

• Sign up and log in securely with JWT
• Send and receive messages in real time
• See which users are currently online
• Upload a profile picture (stored via Cloudinary)
• Switch between multiple UI themes
• Works well on both desktop and mobile

---

Built with

Backend

• Node.js + Express
• MongoDB + Mongoose
• Socket.IO
• JWT + bcryptjs for auth
• Cloudinary for image uploads

Frontend

• React 19 + Vite
• Zustand for state management
• React Router DOM
• Socket.IO client
• TailwindCSS + DaisyUI
• Axios

---

Project structure

Chat-app/
├── backend/
│   └── src/
│       ├── controllers/
│       ├── lib/
│       ├── middleware/
│       ├── models/
│       ├── routes/
│       ├── seeds/
│       └── index.js
├── frontend/
│   └── src/
│       ├── components/
│       ├── pages/
│       ├── store/
│       ├── lib/
│       └── constants/
└── package.json

---

Running locally

Prerequisites

• Node.js v18+
• A MongoDB Atlas cluster
• A Cloudinary account

1. Clone the repo

git clone https://github.com/Lipika6/ChatFlow.git
cd ChatFlow

2. Set up environment variables

cp backend/.env.example backend/.env

Fill in your credentials in backend/.env:

MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.xxxxx.mongodb.net/chat_db
PORT=5001
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINAR_API_KEY=your_api_key
CLOUDINAR_API_SECRET=your_api_secret

3. Install dependencies

cd backend && npm install
cd ../frontend && npm install

4. Start the dev servers

# from backend/
npm run dev

# from frontend/ (in a separate terminal)
npm run dev

The backend runs on http://localhost:5001 and the frontend on http://localhost:5173.

---

API routes

Auth — /api/auth

Method	Endpoint	What it does
POST	/signup	Create a new account
POST	/login	Log in
POST	/logout	Log out
PUT	/update-profile	Update profile picture
GET	/check	Check if user is logged in

Messages — /api/messages

Method	Endpoint	What it does
GET	/users	Fetch users for the sidebar
GET	/:id	Load chat history with a user
POST	/send/:id	Send a message

---

Deploying

Build the frontend:

cd frontend && npm run build

Set NODE_ENV=production in your .env and Express will serve the built frontend from the backend.

---

License

MIT