ChatSphere

A modern real-time chat application built with the MERN Stack and Socket.IO, delivering secure authentication, instant messaging, and a responsive user experience.

ChatSphere is designed with a scalable architecture, clean code practices, and reusable components, making it an excellent foundation for modern real-time communication applications.

---

Preview

Landing Page	Chat Interface
Add Screenshot	Add Screenshot

---

Features

Authentication

• User Registration
• User Login
• JWT Authentication
• Protected Routes
• User Profile API

Real-Time Communication

• One-to-One Messaging
• Instant Message Delivery using Socket.IO
• Real-Time Connection Management

Frontend

• Responsive UI
• React Context API for Global State Management
• React Router for Navigation
• Axios-based API Layer
• Reusable Components
• Modern UI with Tailwind CSS

Backend

• RESTful API Architecture
• Express.js Middleware
• MongoDB with Mongoose
• JWT Authentication
• Modular Folder Structure
• Centralized Error Handling

---

Tech Stack

Frontend

• React
• Vite
• Tailwind CSS
• React Router
• Axios
• Context API

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• JWT
• Socket.IO

---

Project Structure

ChatSphere/
│
├── client/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── context/
│   │   ├── hooks/
│   │   ├── pages/
│   │   ├── services/
│   │   ├── utils/
│   │   ├── App.jsx
│   │   └── main.jsx
│   └── package.json
│
├── server/
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── utils/
│   ├── server.js
│   └── package.json
│
├── README.md
└── .gitignore

---

Installation

Clone the Repository

git clone https://github.com/Hanzalah-m/ChatSphere.git

cd ChatSphere

---

Install Dependencies

Frontend

cd client
npm install

Backend

cd ../server
npm install

---

Environment Variables

Create a .env file inside the server directory.

PORT=3000

MONGO_URI=your_mongodb_connection_string

JWT_SECRET=your_secret_key

CLIENT_URL=http://localhost:5173

---

Running the Project

Start Backend

cd server
npm run dev

Start Frontend

cd client
npm run dev

Frontend:

http://localhost:5173

Backend:

http://localhost:3000

---

Authentication Flow

User
   │
   ▼
Register / Login
   │
   ▼
JWT Token Generated
   │
   ▼
Stored in Local Storage
   │
   ▼
Protected API Requests
   │
   ▼
Authenticated User Profile

---

API Endpoints

Authentication

Method	Endpoint	Description
POST	/api/auth/register	Register a new user
POST	/api/auth/login	Authenticate user
GET	/api/auth/profile	Fetch authenticated user

---

Upcoming Features

• Group Chats
• Typing Indicators
• Read Receipts
• Online/Offline Presence
• File & Image Sharing
• Emoji Support
• Message Search
• Notifications
• Voice & Video Calling
• Message Reactions
• Dark Mode Customization

---

Future Improvements

• Redis for Socket Session Management
• Docker Support
• CI/CD Pipeline
• Unit & Integration Testing
• Rate Limiting
• End-to-End Encryption
• Multi-Device Synchronization

---

License

This project is licensed under the MIT License.

---

Author

Hanzalah

GitHub: https://github.com/Hanzalah-m

---

Contributing

Contributions, issues, and feature requests are welcome.

If you'd like to improve ChatSphere, feel free to fork the repository, create a feature branch, and submit a pull request.

---

Show Your Support

If you found this project useful, consider giving it a ⭐ on GitHub.