ChatMapp 💬

A modern, full-stack real-time chat application built with the MERN stack (MongoDB, Express.js, React, Node.js). ChatMapp provides seamless real-time communication with a beautiful, responsive interface powered by Chakra UI and Socket.io.

🌐 Live Demo

Production URL: https://chatmapp.onrender.com/

📸 Screenshots

Main chat interface with real-time messaging

Secure authentication system

Group chat functionality

✨ Features

🔐 Authentication & Security

Secure user registration and login
JWT (JSON Web Token) based authentication
Password encryption with bcrypt
Protected routes and middleware

💬 Real-time Messaging

Instant messaging with Socket.io
Real-time message delivery
Typing indicators
Message notifications
Online/offline status

👥 Chat Management

One-on-one private chats
Group chat creation and management
User search functionality
Chat history persistence
Message timestamps

🎨 User Interface

Modern, responsive design with Chakra UI
Dark/light theme support
Mobile-friendly interface
Smooth animations with Framer Motion
Intuitive user experience

🔍 Advanced Features

User profile management
Group chat administration
Real-time user search
Message status indicators
Emoji support

🚀 Quick Start

Prerequisites

Before running this application, make sure you have the following installed:

Node.js (v14 or higher)
MongoDB (local installation or MongoDB Atlas)
Git

Installation

Clone the repository

git clone https://github.com/Gourav830/chatMapp.git
cd chatMapp

Install backend dependencies
```
npm install --legacy-peer-deps
```

Install frontend dependencies

cd frontend
npm install --legacy-peer-deps
cd ..

Environment Configuration

Create a .env file in the root directory:
```
# Server Configuration
PORT=5000
NODE_ENV=development

# Database Configuration
MONGO_URI=your_mongodb_connection_string

# JWT Configuration
JWT_SECRET=your_jwt_secret_key
```
Environment Variables Explained:
- PORT: Server port (default: 5000)
- NODE_ENV: Environment mode (development/production)
- MONGO_URI: MongoDB connection string
- JWT_SECRET: Secret key for JWT token generation

Running the Application

Development Mode

Start the backend server
```
npm run server
```
Start the frontend development server (in a new terminal)
```
npm run client
```
Start both servers concurrently
```
npm run dev
```

The application will be available at:

Frontend: http://localhost:3000
Backend API: http://localhost:5000

Production Mode

Build the frontend
```
npm run build
```
Start the production server
```
npm start
```

🏗️ Project Structure

chatMapp/
├── backend/                    # Backend server code
│   ├── config/                # Configuration files
│   │   ├── db.js             # Database connection
│   │   └── generateToken.js   # JWT token utilities
│   ├── controllers/           # Route controllers
│   │   ├── chatControllers.js
│   │   ├── messageControllers.js
│   │   └── userControllers.js
│   ├── middleware/            # Custom middleware
│   │   ├── authMiddleware.js
│   │   └── errorMiddleware.js
│   ├── models/               # Database models
│   │   ├── chatModel.js
│   │   ├── messageModel.js
│   │   └── userModel.js
│   ├── routes/               # API routes
│   │   ├── chatRoutes.js
│   │   ├── messageRoutes.js
│   │   └── userRoutes.js
│   └── server.js            # Main server file
├── frontend/                # React frontend
│   ├── public/             # Static assets
│   ├── src/               # Source code
│   │   ├── components/    # React components
│   │   ├── config/       # Frontend configuration
│   │   ├── Context/      # React context
│   │   └── Pages/        # Page components
│   └── package.json
├── screenshots/           # Application screenshots
├── package.json          # Backend dependencies
└── README.md            # Project documentation

🛠️ Technology Stack

Backend Technologies

Node.js - JavaScript runtime environment
Express.js - Web application framework
MongoDB - NoSQL database
Mongoose - MongoDB object modeling
Socket.io - Real-time bidirectional event-based communication
JWT - JSON Web Tokens for authentication
bcrypt.js - Password hashing library

Frontend Technologies

React - JavaScript library for building user interfaces
Chakra UI - Modular and accessible component library
Socket.io Client - Real-time communication client
Axios - HTTP client for API requests
React Router - Declarative routing for React
Framer Motion - Animation library

Development Tools

Nodemon - Development server with auto-restart
dotenv - Environment variable management
Concurrently - Run multiple commands concurrently

📋 Available Scripts

Backend Scripts

npm start          # Start production server
npm run server     # Start development server with nodemon
npm run build      # Install dependencies and build frontend

Frontend Scripts

npm start          # Start development server
npm run build      # Build for production
npm test           # Run tests
npm run eject      # Eject from Create React App

🔧 API Endpoints

Authentication Routes

POST /api/user/register - Register a new user
POST /api/user/login - Login user
GET /api/user - Search users (protected)

Chat Routes

POST /api/chat - Create or fetch one-on-one chat (protected)
GET /api/chat - Fetch all chats for user (protected)
POST /api/chat/group - Create group chat (protected)
PUT /api/chat/rename - Rename group chat (protected)
PUT /api/chat/groupremove - Remove user from group (protected)
PUT /api/chat/groupadd - Add user to group (protected)

Message Routes

POST /api/message - Send message (protected)
GET /api/message/:chatId - Fetch all messages for chat (protected)

🔒 Authentication Flow

User Registration/Login
- User provides email and password
- Password is hashed using bcrypt
- JWT token is generated and returned
Protected Routes
- JWT token is sent in Authorization header
- Middleware verifies token and extracts user info
- User info is attached to request object
Frontend Authentication
- Token is stored in localStorage
- Axios interceptor adds token to requests
- Protected routes redirect unauthenticated users

🌐 Socket.io Events

Client to Server Events

setup - Initialize user connection
join chat - Join a specific chat room
typing - User started typing
stop typing - User stopped typing
new message - Send new message

Server to Client Events

connected - Connection established
message received - New message received
typing - Someone is typing
stop typing - Someone stopped typing

📦 Dependencies

Backend Dependencies

{
  "bcryptjs": "^2.4.3", // Password hashing
  "colors": "^1.4.0", // Console colors
  "dotenv": "^9.0.2", // Environment variables
  "express": "^4.17.1", // Web framework
  "express-async-handler": "^1.1.4", // Async error handling
  "jsonwebtoken": "^8.5.1", // JWT implementation
  "mongoose": "^5.12.9", // MongoDB ODM
  "nodemon": "^2.0.7", // Development server
  "socket.io": "^4.1.2" // Real-time communication
}

Frontend Dependencies

{
  "@chakra-ui/icons": "^1.0.13", // Chakra UI icons
  "@chakra-ui/react": "^1.6.2", // UI component library
  "@emotion/react": "^11", // CSS-in-JS library
  "@emotion/styled": "^11", // Styled components
  "axios": "^0.21.1", // HTTP client
  "framer-motion": "^4", // Animation library
  "react": "^17.0.2", // React library
  "react-chips": "^0.8.0", // Chip component
  "react-dom": "^17.0.2", // React DOM
  "react-lottie": "^1.2.3", // Lottie animations
  "react-notification-badge": "^1.5.1", // Notification badges
  "react-router-dom": "^5.2.0", // Routing
  "react-scrollable-feed": "^1.3.1", // Scrollable chat feed
  "socket.io-client": "^4.1.2" // Socket.io client
}

🐛 Troubleshooting

Common Issues

MongoDB Connection Error
```
Error: MongoNetworkError: failed to connect to server
```
Solution: Check your MongoDB connection string and ensure MongoDB is running.
JWT Secret Missing
```
Error: JWT_SECRET is not defined
```
Solution: Add JWT_SECRET to your .env file.
Port Already in Use
```
Error: listen EADDRINUSE :::5000
```
Solution: Change the port in .env or kill the process using the port.
Frontend Build Issues
```
npm ERR! peer dep missing
```
Solution: Use npm install --legacy-peer-deps to resolve peer dependency conflicts.

Debug Mode

To run the application in debug mode:

# Backend
DEBUG=* npm run server

# Frontend
npm start

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Workflow

Fork the repository
Create a 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

Code Style

Use consistent indentation (2 spaces)
Follow React best practices
Write meaningful commit messages
Add comments for complex logic

📄 License

This project is licensed under the ISC License. See the LICENSE file for details.

👨‍💻 Author

Gourav Singla

GitHub: @Gourav830
LinkedIn: Connect with me

🙏 Acknowledgments

Thanks to the MERN stack community for excellent documentation
Chakra UI for the beautiful component library
Socket.io for real-time communication capabilities
All contributors who helped improve this project

📞 Support

If you have any questions or need help with setup, please:

Check the Issues page
Create a new issue if your problem isn't listed
Provide detailed information about your environment and the issue

⭐ Star this repository if you found it helpful! ⭐

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
backend		backend
frontend		frontend
screenshots		screenshots
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
yarn.lock		yarn.lock

Gourav830/chatMapp

Folders and files

Latest commit

History

Repository files navigation