Chat Application

A simple full-stack chat application with authentication, user profiles, and (optional) real-time messaging using React and Node.js.

🎬 Demo Video

Watch on YouTube

demo images

Features

• User registration and login
• Profile update
• List of online users (if sockets enabled)
• Send and receive messages
• Responsive UI with React
• Toast notifications for actions

Tech Stack

• Frontend: React, Context API, Axios, React Hot Toast
• Backend: Node.js, Express, MongoDB
• (Optional) Real-time: Socket.IO

Getting Started

Prerequisites

• Node.js (v16+)
• npm or yarn
• MongoDB (local or Atlas)

Installation

1. Clone the repository

git clone https://github.com/VIGGU-7/chat-application.git
cd chat-application

2. Install dependencies

Backend:

cd backend
npm install

Frontend:

cd ../frontend
npm install

3. Configure Environment Variables

Create a .env file in the backend folder:

PORT=8080
mongo_url="<>"
JWT_SECRET="<>"
cloudName="<>"
cloudinaryApiKey=<>
cloudinaryApiSecret="<>"
clientUrl=<>
NODE_ENV="devolopment"

Create a .env file in the frontend folder:

VITE_BACKEND_URL="http://<>/api"
VITE_BASE_URL="http://<>"  

4. Start the Application

Backend:

npm run dev

Frontend:

npm start

The frontend runs on http://localhost:3000
The backend runs on http://localhost:8080

Usage

• Register a new account or log in.
• Update your profile.
• Start chatting with other users.
• If real-time is enabled, messages and online status update instantly.

Project Structure

chat-application/
  backend/
    src/
      controllers/
      models/
      routes/
      ...
    server.js
  frontend/
    src/
      components/
      context/
      lib/
      ...
    App.jsx

Customization

• To enable/disable real-time features, adjust socket logic in the context files.
• Update styles in frontend/src as needed.