A modern real-time chat application built with React, Node.js, Express, MongoDB, and Socket.IO.
The app features real-time messaging, user authentication, profile management, and a responsive UI.
- Frontend (Vercel): Chat App Frontend
- Backend (Render): Chat App Backend
- Real-time messaging interface
- Responsive design for all devices
- Secure user authentication and session management
- Profile editing and user search functionality
- Loading indicators and smooth UX transitions
- User registration and login (JWT + secure cookies)
- Email existence checking
- Profile update and user search APIs
- Secure password hashing using
bcryptjs
- Real-time communication with
Socket.IO
- MongoDB database for persistent storage
- Frontend: React, Redux, Socket.IO Client
- Backend: Node.js, Express.js, MongoDB, Mongoose, Socket.IO, JWT, bcryptjs
- Deployment: Vercel (Frontend), Render (Backend)
client/
├── public/
│ └── static assets (favicon, manifest, etc.)
├── src/
│ ├── assets/ (audio, videos, images)
│ ├── components/ (UI components like Avatar, SearchUser, Sidebar)
│ ├── helper/ (helper functions like uploadFile.js)
│ ├── layout/ (application layouts)
│ ├── pages/ (major pages like Home, Register, ForgotPassword)
│ ├── redux/ (store and userSlice)
│ ├── routers/ (application routing)
│ ├── App.js / App.css / index.js
├── .env
├── package.json
└── README.md
server/
├── config/ (MongoDB connection setup)
├── controller/ (request handlers: register, login, logout, update user)
├── helpers/ (utility functions)
├── models/ (Mongoose models for User and Conversation)
├── routes/ (API routes)
├── socket/ (Socket.IO server handling)
├── .env
├── index.js
└── README.md
Method | Endpoint | Description |
---|---|---|
POST | /api/register |
Register a new user |
POST | /api/email |
Check if email exists |
POST | /api/password |
Authenticate user, set cookie |
GET | /api/user-details |
Fetch current user details |
GET | /api/logout |
Logout user, clear session |
POST | /api/update-user |
Update user profile |
POST | /api/search-user |
Search users by name or email |
- Authenticated Socket.IO connections using JWT tokens.
- Event-driven architecture for sending and receiving messages.
- Conversations are saved in MongoDB for persistence.
- Node.js (v14 or newer)
- npm (v6 or newer)
- MongoDB (local or Atlas)
- Navigate to the client folder:
cd client
- Install dependencies:
npm install
- Run the app:
Access it at: http://localhost:3000
npm start
- Navigate to the server folder:
cd server
- Install dependencies:
npm install
- Create a
.env
file in the/server
directory:FRONTEND_URL=http://localhost:3000 MONGO_URI=your-mongodb-uri PORT=8080 JWT_SECRET_KEY=your-secret-key
- Run the server:
Backend will run on http://localhost:8080
npm start # or node index.js
Variable | Purpose |
---|---|
FRONTEND_URL |
URL of frontend (for CORS) |
MONGO_URI |
MongoDB connection string |
PORT |
Port for server (default 8080) |
JWT_SECRET_KEY |
Secret key for JWT token encryption |
Command | Usage |
---|---|
npm start |
Run development server (client or server) |
npm run build |
Build production frontend assets |
npm test |
Run frontend tests |
npm run eject |
Eject CRA configuration (irreversible) |
- Frontend and backend must be served over HTTPS in production.
- Configure cookies with
SameSite=None; Secure
for cross-site authentication. - Update
.env
variables before deploying to Vercel and Render.
- React Documentation
- Create React App Docs
- Express.js Documentation
- MongoDB Documentation
- Socket.IO Documentation
This project is licensed under the MIT License.