🚀 MERN_ChatApp

A modern, real-time chat app built with MongoDB, Express, React, Node.js, and Socket.io.

Secure authentication, scalable architecture, and a responsive user experience!

✨ Features

⚡ Real-time Messaging (Socket.io)

🔒 JWT Authentication

👥 One-to-One & Group Chats

🛠️ Environment-based Configuration

🏷️ Dynamic Chat Rooms

🟢 Online Status Indicators

📱 Responsive UI (React)

🔁 RESTful API Backend

🛠️ Tech Stack

📦 Project Structure

📁 client/   # React frontend
├── 📁 public/
└── 📁 src/
    ├── 📁 assets/   # Static files like images
    ├── 📁 components/   # Reusable React components
    ├── 📁 context/   # Context API setup
    ├── 📁 hooks/   # Custom React hooks
    ├── 📁 pages/   # Main pages like Chat, Login, Signup
    ├── 📁 utils/   # Axios config, helper functions
    ├── App.js
    └── index.js

📁 server/   # Express backend
├── 📁 config/   # DB connection, environment setup
├── 📁 controllers/   # Route logic (e.g., auth, chat)
├── 📁 middleware/   # Auth, error handling
├── 📁 models/   # Mongoose schemas (User, Chat, Message)
├── 📁 routes/   # Route files (userRoutes, chatRoutes)
├── 📁 utils/   # Token generation, validation
└── index.js   # Server entry point

.env   # Environment variables
README.md   # Project documentation
package.json   # Project metadata and dependencies
yarn.lock / package-lock.json

⚡ Getting Started

1. ⚙️ Setup Environment Variables

Create a .env file in the backend directory with the following values (example):

MONGO_URI=your_mongodb_connection_string JWT_SECRET=your_jwt_secret PORT=5000

2. 📦 Install Dependencies

Backend:

cd backend npm install

Frontend:

cd ../frontend npm install

3. 🚀 Run the Application

Start Backend Server:

cd backend npm start

Start Frontend Development Server:

cd ../frontend npm start

The app will be available at http://localhost:3000