Chat App

A full-stack chat application built with React, Vite, Node.js, Express, MongoDB, and Socket.io.

Features

• User authentication with signup, login, and logout
• JWT authentication stored in HTTP-only cookies
• Real-time messaging with Socket.io
• Direct user-to-user chat conversations
• Message image upload support
• Profile picture upload via Cloudinary
• Protected routes for authenticated users
• Client-side theme handling and responsive chat UI

Tech Stack

• Frontend: React, Vite, Tailwind CSS, Zustand, React Router
• Backend: Node.js, Express, MongoDB, Mongoose, Socket.io
• Authentication: JWT cookies
• Image storage: Cloudinary

Project Structure

• backend/ — Express API, authentication, message routes, Cloudinary helpers, socket server
• frontend/ — React application with pages, components, and state management

Prerequisites

• Node.js and npm installed
• MongoDB database available
• Cloudinary account for image uploads

Environment Variables

Create a .env file inside the backend/ folder with the following variables:

PORT=5002
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Installation

From the project root, install backend and frontend dependencies:

npm install --prefix backend
npm install --prefix frontend

Running Locally

Start the backend in development mode:

npm run dev --prefix backend

Start the frontend development server:

npm run dev --prefix frontend

Then open the frontend at http://localhost:5173.

Production Build

Build the frontend and run the backend server:

npm run build
npm start

This will install dependencies for both sides, build the frontend, and run the backend server.

API Endpoints

Auth

• POST /api/auth/signup — Create a new user
• POST /api/auth/login — Log in an existing user
• POST /api/auth/logout — Log out the user
• PUT /api/auth/update-profile — Update profile picture (protected)
• GET /api/auth/check — Validate current auth session (protected)

Messages

• GET /api/messages/users — Get other users for chat sidebar (protected)
• GET /api/messages/:id — Get chat history with a user (protected)
• POST /api/messages/send/:id — Send a message to a user (protected)

Notes

• The backend serves the built React app when NODE_ENV=production.
• Messages can include text and optional image uploads.
• Authentication is validated through cookies and protected route middleware.

License

This project is available under the ISC license.