React Node Chat App

A full-stack real-time chat application built with React, Node.js, Socket.io, and MongoDB. Supports direct messaging, group channels, file sharing, and user profiles.

Tech Stack

Frontend

• React 19 + Vite
• Tailwind CSS + shadcn/ui (Radix UI)
• Zustand (state management)
• Socket.io Client (real-time messaging)
• Axios (HTTP client)
• React Router DOM

Backend

• Node.js + Express 5
• MongoDB + Mongoose
• Socket.io (WebSocket server)
• JWT authentication (HTTP-only cookies)
• Multer (file uploads)
• Bcrypt (password hashing)

Features

• Authentication — Register, login, logout with JWT stored in HTTP-only cookies
• Profile setup — First/last name, accent color, profile image upload/delete
• Direct messaging — Real-time 1-on-1 chat with message history
• Group channels — Create channels, add members, real-time broadcast
• File sharing — Upload and download file attachments in DMs
• Contact search — Find users by name or email
• Real-time updates — Socket.io for instant message delivery

Prerequisites

• Node.js v18+
• MongoDB running locally on port 27017

Getting Started

1. Clone the repo

git clone <repo-url>
cd react-node-chat-app

2. Set up the server

cd server
npm install

Create server/.env:

PORT=3001
JWTKEY=your_jwt_secret_key
ORIGIN=http://localhost:5173
DATABASE_URL=mongodb://localhost:27017/react-chat-app

Start the server:

npm run dev      # development (nodemon)
npm start        # production

3. Set up the client

cd client
npm install

Create client/.env:

VITE_SERVER_URL=http://localhost:3001

Start the client:

npm run dev      # Vite dev server on http://localhost:5173
npm run build    # Production build
npm run preview  # Preview production build

4. Open the app

Navigate to http://localhost:5173 in your browser.

Project Structure

react-node-chat-app/
├── client/
│   └── src/
│       ├── components/     # Reusable UI components
│       ├── context/        # Socket.io context provider
│       ├── lib/            # Axios API client
│       ├── pages/          # Auth, chat, and profile pages
│       ├── store/          # Zustand slices (auth, chat)
│       └── utils/          # Constants and helpers
└── server/
    ├── controllers/        # Route handlers
    ├── middlewares/        # JWT auth middleware
    ├── models/             # Mongoose schemas (User, Message, Channel)
    ├── routes/             # API route definitions
    ├── socket.js           # Socket.io event handlers
    └── index.js            # Server entry point

API Routes

Method	Endpoint	Description
POST	/api/auth/signup	Register a new user
POST	/api/auth/login	Login
GET	/api/auth/user-info	Get current user info
POST	/api/auth/update-profile	Update profile
POST	/api/auth/add-profile-image	Upload profile image
DELETE	/api/auth/delete-profile-image	Delete profile image
POST	/api/auth/logout	Logout
POST	/api/contact/search	Search users by name or email
GET	/api/contact/get-contact-for-dm	Get DM contact list
GET	/api/contact/get-all-contact	Get all users (for channel creation)
POST	/api/message/get-messages	Get message history
POST	/api/message/upload-file	Upload file attachment
POST	/api/channel/create-channel	Create a channel
GET	/api/channel/get-user-channels	Get user's channels
GET	/api/channel/get-channel-messages/:id	Get channel messages

Socket.io Events

Direction	Event	Description
Client → Server	sendMessage	Send a direct message
Client → Server	sendChannelMessage	Send a channel message
Server → Client	receiveMessage	Receive a direct message
Server → Client	receiveChannelMessage	Receive a channel message