Full-Stack Realtime Chat Application

A full-stack chat application built with React + Vite, Node.js + Express, MongoDB, and Socket.io.
The application supports real-time messaging, user authentication, friend management, and profile customization.
Both frontend and backend are deployed on Render.

---

Features

• JWT-based authentication (register and login)
• User profile editing with profile picture upload
• User search functionality
• Complete friend system (send, accept, reject, cancel, unfriend)
• Real-time one-on-one messaging using Socket.io
• Instant message delivery and UI updates
• Works across multiple devices and browser tabs
• Fully deployed frontend and backend

---

Technology Stack

Frontend

• React
• Vite
• React Router
• Socket.io Client

Backend

• Node.js
• Express.js
• MongoDB with Mongoose
• Socket.io
• JWT Authentication

---

Deployment (Render)

Backend Deployment (Web Service)

1. Deploy the backend folder as a Render Web Service.
2. Set required environment variables:

   MONGO_URI=<your MongoDB Atlas connection string>
   JWT_SECRET=<your JWT secret>
   

3. Start command:

   npm start
   

4. Backend is served at:

   https://chat-app-bp0o.onrender.com
   

---

Frontend Deployment (Static Site)

Render Static Site Configuration:

Setting	Value
Root Directory	client
Build Command	npm install && npm run build
Publish Directory	dist

Environment variables:

VITE_API_URL=https://chat-app-bp0o.onrender.com

Render builds the Vite application and serves the dist/ output folder.

---

How Realtime Messaging Works

• The frontend initializes a socket connection:

  const socket = io(API_BASE);

• The backend stores online user connections in a Map.
• A message is delivered as follows:
  • Client emits send-message
  • Server identifies the receiver’s socket ID
  • Server emits receive-message to the receiver
• Messages are saved in MongoDB for persistence.

---

Project Structure

chat-app/
│
├── backend/            # Express API and Socket.io server
│
└── client/             # React + Vite frontend
    ├── src/
    ├── public/
    └── index.html

---

Running Locally

Backend

cd backend
npm install
npm start

Frontend

cd client
npm install
npm run dev

---

Live Links

Frontend: https://chat-app-frontend-gxgy.onrender.com/ Backend: https://chat-app-bp0o.onrender.com

---

Author

Developed by Amudhan