Chat App 💬

A real-time chat application that allows users to communicate instantly with friends, family, or colleagues. Built with modern web technologies to provide a seamless messaging experience.

Table of Contents

• Features
• Demo
• Prerequisites
• Installation
• Environment Setup
• Building the Application
• Running the Application
• Usage
• Screenshots
• Technologies Used
• Project Structure
• Contributing
• License

Features

• 🚀 Real-time messaging - Instant message delivery using WebSocket technology
• 👥 Multiple chat rooms - Create and join different chat rooms
• 👤 User authentication - Secure login and registration system
• 📱 Responsive design - Works seamlessly on desktop and mobile devices
• 😀 Emoji support - Express yourself with emojis
• 🔔 Message notifications - Get notified when new messages arrive
• 📸 Media sharing - Share images and files (if implemented)
• 🌙 Dark/Light mode - Toggle between themes (if implemented)
• ✅ Message status - See when messages are delivered and read
• 👀 Online status - See who's currently online

Demo

🔗 Live Demo: [Your deployed app URL here]

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js (version 16.0 or higher)
• npm (comes with Node.js)
• Git
• A modern web browser (Chrome, Firefox, Safari, Edge)

Installation

1. Clone the repository

   git clone https://github.com/Atharva0745/Chat-App.git

2. Navigate to the project directory

   cd Chat-App

3. Install dependencies

   npm install

Environment Setup

1. Create a .env file in the root directory of the project:

   touch .env

2. Add your environment variables to the .env file:

   # Server Configuration
   PORT=3000
   NODE_ENV=development
   
   # Database Configuration (MongoDB/PostgreSQL)
   DATABASE_URL=mongodb://localhost:27017/chatapp
   # OR for PostgreSQL: DATABASE_URL=postgresql://username:password@localhost:5432/chatapp
   
   # JWT Configuration
   JWT_SECRET=your_super_secret_jwt_key_here

   ⚠️ Important:

   • Never commit your .env file to version control
   • Replace all placeholder values with your actual credentials
   • Keep your JWT_SECRET long and secure

Building the Application

To build the application for production, run:

npm run build

This command will:

• ✅ Compile and optimize your React/Frontend code
• ✅ Minimize CSS and JavaScript files
• ✅ Generate production-ready static files
• ✅ Create optimized bundles for better performance
• ✅ Output files to build/ or dist/ directory

Running the Application

Development Mode

# Start both frontend and backend
npm start

# OR start them separately
npm run dev        # Start backend server
npm run client     # Start frontend (if separate)

Production Mode

After building the application:

npm run serve
# OR
node server.js

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000 (if separate)

Usage

Getting Started

1. Register/Login: Create a new account or login with existing credentials
2. Join a Room: Enter a chat room name or join an existing one
3. Start Chatting: Begin sending messages in real-time
4. Invite Friends: Share room codes with friends to chat together

Key Features

• Send Messages: Type in the message box and press Enter or click Send
• Create Rooms: Click "New Room" to create a private chat room
• User Management: See who's online and their status
• Message History: Scroll up to see previous messages
• Settings: Customize your profile and preferences

Screenshots

Add screenshots of your chat application here:

Login Page

User authentication interface with secure login

Chat Interface

Main chat interface showing real-time messaging

Mobile View

Responsive design optimized for mobile devices

Room Selection

Interface for joining or creating chat rooms

📁 Where to add images:

• Create a screenshots folder in your repository root
• Add PNG/JPG images (max 1200px width recommended)
• Use descriptive filenames like chat-interface.png
• Compress images to keep repository size manageable

📅 When to add screenshots:

• After implementing major UI features
• Before releasing new versions
• When the interface design changes
• To showcase mobile responsiveness
• After adding new chat features

Technologies Used

Frontend

• React.js - User interface library
• Socket.IO Client - Real-time bidirectional communication
• CSS3/SCSS - Styling and animations
• React Router - Navigation and routing
• Axios - HTTP client for API requests

Backend

• Node.js - Runtime environment
• Express.js - Web application framework
• Socket.IO - Real-time communication
• MongoDB/PostgreSQL - Database for storing messages and users
• Mongoose/Prisma - Database ORM/ODM
• JWT - Authentication and authorization

Additional Tools

• bcryptjs - Password hashing
• cors - Cross-origin resource sharing
• dotenv - Environment variable management
• multer - File upload handling (if implemented)
• cloudinary - Image storage and optimization (if implemented)

Project Structure

Chat-App/
├── client/                 # Frontend React application
│   ├── public/
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── hooks/         # Custom React hooks
│   │   ├── utils/         # Helper functions
│   │   ├── context/       # React context providers
│   │   └── App.js         # Main App component
│   └── package.json
├── server/                 # Backend Node.js application
│   ├── controllers/       # Route controllers
│   ├── middleware/        # Custom middleware
│   ├── models/           # Database models
│   ├── routes/           # API routes
│   ├── utils/            # Helper functions
│   └── server.js         # Main server file
├── screenshots/          # App screenshots for README
├── .env.example         # Environment variables template
├── .gitignore          # Git ignore file
├── package.json        # Main package.json
└── README.md          # This file

API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - User login
• GET /api/auth/me - Get current user
• POST /api/auth/logout - User logout

Chat

• GET /api/rooms - Get all chat rooms
• POST /api/rooms - Create new room
• GET /api/rooms/:id/messages - Get room messages
• POST /api/rooms/:id/messages - Send message

Users

• GET /api/users - Get all users
• PUT /api/users/profile - Update user profile

Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository on GitHub
2. Create your feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add some amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request with a clear description

Contribution Guidelines

• Follow existing code style and formatting
• Add comments for complex logic
• Update README if you add new features
• Test your changes thoroughly
• Make sure all tests pass

Troubleshooting

Common Issues

🚨 Build fails

# Clear npm cache and reinstall
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

🚨 Environment variables not working

• Ensure .env file is in the root directory
• Check that variable names match exactly
• Restart the server after changing .env

🚨 Database connection issues

• Verify your database is running
• Check DATABASE_URL in .env file
• Ensure database credentials are correct

🚨 Socket.IO connection problems

• Check CORS_ORIGIN in .env matches your frontend URL
• Verify firewall isn't blocking the connection
• Check browser console for WebSocket errors

🚨 Port already in use

# Find and kill process using the port
lsof -ti:3000 | xargs kill -9  # Mac/Linux
netstat -ano | findstr :3000   # Windows

Deployment

Using Heroku

1. Install Heroku CLI
2. Create a new Heroku app
3. Set environment variables in Heroku dashboard
4. Deploy using Git

Using Vercel/Netlify

1. Connect your GitHub repository
2. Set build command: npm run build
3. Set environment variables
4. Deploy automatically on push

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact & Support

Developer: Atharva
GitHub: @Atharva0745
Repository: Chat-App

---

⭐ If you found this project helpful, please give it a star!

Made with ❤️ by Atharva