DotChat App

DotChat is a full-stack, real-time chat application designed to provide seamless and interactive communication. Built with a modern tech stack including React, Node.js, Express, MongoDB, and Socket.io, it offers real-time messaging, user authentication, and profile customization.

Features

• Real-Time Messaging: Instant message delivery and reception using WebSockets (Socket.io).
• User Authentication: Secure signup and login processes using JWT (JSON Web Tokens) and bcrypt for password hashing.
• Online Status Indicators: See which users are currently online in real-time.
• Profile Management: Customize user profiles, including uploading profile pictures (integrated with Cloudinary).
• Responsive Design: A beautiful, responsive user interface styled with Tailwind CSS, ensuring a great experience on both desktop and mobile devices.

Tech Stack

Frontend

• Framework: React 19 with Vite
• Routing: React Router DOM
• State Management: React Context API
• Styling: Tailwind CSS v4
• Real-time Communication: Socket.io-client
• HTTP Client: Axios
• Notifications: React Hot Toast

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB (via Mongoose)
• Real-time Communication: Socket.io
• Authentication: JWT (JSON Web Tokens) & bcryptjs
• Media Storage: Cloudinary (for profile pictures and media)
• Environment Management: dotenv

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• MongoDB (Local or Atlas)
• Cloudinary Account (For image uploads)

Installation & Setup

1. Clone the repository (if applicable) or navigate to the project directory:

   cd "DotChat App"

2. Setup the Backend (Server):

   • Navigate to the server directory:

     cd server

   • Install dependencies:

     npm install

   • Create a .env file in the server directory and add the following variables:

     PORT=5000
     MONGO_URI=your_mongodb_connection_string
     JWT_SECRET=your_jwt_secret_key
     FRONTEND_URL=http://localhost:5173
     CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
     CLOUDINARY_API_KEY=your_cloudinary_api_key
     CLOUDINARY_API_SECRET=your_cloudinary_api_secret

   • Start the development server:

     npm run server

3. Setup the Frontend (Client):

   • Open a new terminal and navigate to the client directory:

     cd client

   • Install dependencies:

     npm install

   • Create a .env file in the client directory and add the following variables:

     VITE_BACKEND_URL=http://localhost:5000

   • Start the Vite development server:

     npm run dev

4. Access the Application: Open your browser and navigate to http://localhost:5173.

Folder Structure

DotChat App/
├── client/                 # React frontend application
│   ├── public/             # Static assets
│   ├── src/
│   │   ├── components/     # Reusable React components
│   │   ├── pages/          # Application pages (Home, Login, Profile)
│   │   ├── App.jsx         # Main application component
│   │   └── main.jsx        # Entry point
│   ├── context/            # React Context for global state (Auth, etc.)
│   ├── package.json        # Frontend dependencies
│   └── vite.config.js      # Vite configuration
│
└── server/                 # Node.js/Express backend
    ├── controllers/        # Route controllers (Auth, Messages)
    ├── lib/                # Utilities and database connection
    ├── middleware/         # Express middleware (Auth protection)
    ├── models/             # Mongoose database schemas (User, Message)
    ├── routes/             # API routes
    ├── server.js           # Main server entry point & Socket.io setup
    └── package.json        # Backend dependencies