Real-Time Chat Application

Overview

A full-stack real-time chat application built using the MERN stack (MongoDB, Express.js, React.js, Node.js) with Socket.IO for live messaging.

Features

• User Authentication
• Real-time Messaging
• User Sidebar
• Emoji Support
• Responsive Design

Technologies Used

• Frontend: React.js, Tailwind CSS
• Backend: Node.js, Express.js
• Database: MongoDB
• Real-time Communication: Socket.IO
• State Management: Zustand
• Authentication: JWT, bcryptjs

Prerequisites

• Node.js (v18+)
• npm (v9+)
• MongoDB

Installation

1. Clone the Repository

git clone https://github.com/your-username/chat-app.git
cd chat-app



2. Backend Setup
Navigate to backend directory and install dependencies:

cd backend
npm install



Create a .env file in the backend directory with:

MONGO_DB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
PORT=5000
NODE_ENV=development



3. Frontend Setup
Navigate to frontend directory and install dependencies:

cd frontend
npm install



4. Run the Application
Development Mode
Start Backend (from backend directory):
npm run server



Start Frontend (from frontend directory):
npm run dev



Production Build
npm run build


Project Structure
chat-app/
├── backend/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── middleware/
│   └── server.js
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   └── App.jsx
│   └── vite.config.js
└── package.json



Environment Variables
MONGO_DB_URI: MongoDB connection string
JWT_SECRET: Secret key for JWT token generation
PORT: Server port (default: 5000)
NODE_ENV: Environment mode (development/production)
Contributing
Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

If you have any questions or suggestions, feel free to reach out to me ,
Contact
abishek.nights@gmail.com