Chat Application

A modern, real-time chat application built with the MERN stack (MongoDB, Express, React, Node.js) and Socket.IO for instant messaging capabilities.

Features

• Real-time Messaging: Instant messaging with WebSocket technology using Socket.IO
• User Authentication: Secure user registration and login with JWT
• Responsive Design: Fully responsive UI that works on desktop and mobile devices
• User Profiles: Customizable user profiles with avatar images
• Online Status: See which users are currently online
• Dark/Light Mode: Toggle between dark and light themes
• Persistent Sessions: Secure session management with HTTP-only cookies

Tech Stack

Frontend

• React - Frontend JavaScript library
• Vite - Build tool and development server
• Zustand - State management
• React Router - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• DaisyUI - Component library for Tailwind CSS
• Axios - HTTP client for API requests
• Socket.IO Client - Real-time bidirectional event-based communication
• React Hot Toast - Toast notifications

Backend

• Node.js - JavaScript runtime
• Express - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling tool
• Socket.IO - Real-time bidirectional event-based communication
• JWT - Authentication
• bcryptjs - Password hashing
• Cloudinary - Image hosting service
• Cookie Parser - Parse HTTP request cookies
• CORS - Enable cross-origin resource sharing
• dotenv - Environment variables

Project Structure

chatapp/
├── backend/              # Backend server code
│   ├── src/
│   │   ├── controllers/  # Route controllers
│   │   ├── lib/          # Library files (DB connection, socket setup)
│   │   ├── middleware/   # Custom middleware
│   │   ├── models/       # MongoDB models
│   │   ├── routes/       # API routes
│   │   └── seeds/        # Database seeders
│   └── package.json
├── frontend/             # React frontend code
│   ├── public/           # Static assets
│   ├── src/
│   │   ├── components/   # React components
│   │   ├── constants/    # Application constants
│   │   ├── pages/        # Page components
│   │   ├── store/        # State management
│   │   ├── App.jsx       # Main App component
│   │   └── main.jsx      # Entry point
│   └── package.json
└── README.md

Getting Started

Prerequisites

• Node.js (v14 or higher)
• MongoDB
• NPM or Yarn

Installation

1. Clone the repository

   git clone https://github.com/bouzayenilyes/chatty_app.git
   cd chatapp

2. Install dependencies for both backend and frontend

   npm run build

3. Set up environment variables Create a .env file in the backend directory with the following variables:

   MONGODB_URI=...
   PORT=5001
   JWT_SECRET=put_your_jwt_secret_here
   CLOUDINARY_CLOUD_NAME=...
   CLOUDINARY_API_KEY=...
   CLOUDINARY_API_SECRET=...
   NODE_ENV=development
   

4. Start the development servers

   npm start

   This will start the backend server. In another terminal, navigate to the frontend directory and run:

   cd frontend
   npm run dev

5. Open your browser and navigate to http://localhost:5173

Usage

1. Sign Up: Create a new account with your email and password
2. Log In: Access your account with your credentials
3. Start Chatting: Select a user from the online list and begin messaging
4. Customize Profile: Update your profile information and avatar
5. Toggle Theme: Switch between light and dark mode in settings

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

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

Contact

Ilyes Bouzayen - @Ilyesbouzayen - [email protected]

Project Link: https://github.com/bouzayenilyes/chatty_app