Quick-Chat

1. Overview

Quick-Chat is a full‑stack, real‑time chat application built with React on the frontend and Node.js/Express on the backend, using Socket.io for live messaging.
It allows users to create an account, log in, see who is online, chat one‑to‑one in real time, send images, and manage a simple profile (name, bio, avatar).

The goal of this project is to demonstrate a production‑style messaging flow end‑to‑end: authentication with JWT, global state management with the React Context API, real‑time communication via WebSockets, persistence with MongoDB, and a responsive, modern UI.

---

2. Tech Stack

• Frontend

  • React 19 (SPA, components, hooks)
  • Vite (bundler/dev server)
  • React Router DOM (routing, protected routes)
  • React Context API (AuthContext, ChatContext for global state)
  • Socket.io Client (real‑time messaging)
  • Axios (HTTP client)
  • Tailwind CSS (utility‑first styling)
  • React Hot Toast (notifications)

• Backend

  • Node.js + Express 5
  • MongoDB + Mongoose (data models for User and Message)
  • Socket.io Server (WebSocket connections, online users, real‑time events)
  • JWT (jsonwebtoken) (authentication & route protection)
  • bcryptjs (password hashing)
  • Cloudinary (image upload & hosting for chat images and profile pictures)
  • dotenv (environment configuration)
  • cors (CORS configuration)
  • nodemon (development server reload)

---

3. Project Structure (High Level)

• Root

  • client/ – React + Vite frontend
  • server/ – Node.js + Express backend
  • README.md – Project documentation (this file)

• Client (frontend)

  • src/App.jsx – Routes and layout (Home, Login, Profile)
  • src/main.jsx – App entry; wraps app with BrowserRouter, AuthProvider, ChatProvider
  • context/AuthContext.jsx – Auth state, axios setup, socket connection, login/logout, profile update
  • context/ChatContext.jsx – Chat state, users list, selected user, messages, unseen counts, socket listeners
  • src/pages/* – HomePage, LoginPage, ProfilePage
  • src/components/* – Sidebar, ChatContainer, RightSidebar

• Server (backend)

  • server.js – Express app + HTTP server + Socket.io setup
  • routes/userRoutes.js – /api/auth routes (signup, login, check, update profile)
  • routes/messageRoutes.js – /api/messages routes (users for sidebar, messages, send, mark seen)
  • controllers/userController.js – auth logic, profile update
  • controllers/messageController.js – messaging logic, unseen counts, Cloudinary upload
  • middleware/auth.js – protectRoute middleware using JWT
  • models/User.js, models/message.js – Mongoose models
  • lib/db.js – MongoDB connection
  • lib/cloudinary.js – Cloudinary config
  • lib/utils.js – helper functions (e.g., JWT token generation)

---

4. Prerequisites

• Node.js (LTS recommended)
• npm or yarn
• MongoDB instance (local or cloud, e.g. MongoDB Atlas)
• Cloudinary account (for image uploads)

You will also need to create environment variable files for client and server.

---

5. Backend Setup (server/)

1. Install dependencies

cd server
npm install

2. Create .env file in server/

cd server
copy NUL .env  # Windows (or: type NUL > .env)

Fill it with your configuration:

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

NODE_ENV=development

3. Run the backend in development

cd server
npm run server   # uses nodemon

The API and Socket.io server will start (by default on http://localhost:5000 if PORT is 5000).

---

6. Frontend Setup (client/)

1. Install dependencies

cd client
npm install

2. Create .env file in client/

cd client
copy NUL .env  # Windows (or: type NUL > .env)

Add the backend URL (must match the backend you started):

VITE_BACKEND_URL=http://localhost:5000

3. Run the frontend

cd client
npm run dev

Vite will show a local URL (usually http://localhost:5173).
Open that in your browser to access the Quick‑Chat UI.

---

7. Basic Usage Flow

1. Sign up / Log in

   • Create a new account or log in with existing credentials.
   • On success, the backend returns a JWT token, which is stored in localStorage and attached to every axios request.

2. Socket connection

   • After authentication, the frontend opens a Socket.io connection, passing the userId in the handshake query.
   • The server tracks online users and broadcasts them to all clients.

3. Chatting

   • The sidebar loads other users and their unseen message counts.
   • Selecting a user:
     • Fetches the conversation from the backend.
     • Marks all messages from that user as seen.
   • Sending a message calls the REST API to persist it in MongoDB and notifies the receiver through Socket.io.
   • Image messages are uploaded to Cloudinary, and only the secure URL is stored in the database.

---

8. Notes & Future Improvements

• Add unit/integration tests for controllers and critical components.
• Add typing support (TypeScript) for better DX and safety.
• Improve error handling and validation on both client and server (e.g., form validation, rate limiting).
• Enhance UI themes (dark mode, accessibility improvements).