SuperChat – React + Node/Express

A simple chat application with user signup/login, user discovery, chat creation, and message exchange backed by MongoDB. The frontend is a React app (Create React App) using Redux Toolkit, and the backend is an Express API with JWT authentication.

Project Overview

• Frontend provides authentication pages, a protected home view, user search, and chat UI scaffolding.
• Backend exposes REST endpoints for auth, users, chats, and messages, secured with JWT.
• Data is stored in MongoDB using Mongoose models for users, chats, and messages.

Tech Stack

• Frontend: React, Redux Toolkit, React Router, Axios, React Hot Toast
• Backend: Node.js, Express, Mongoose, JSON Web Tokens, bcryptjs
• Database: MongoDB (Atlas or local)
• Dev Tools: CRA (react-scripts), Nodemon

Local Setup and Running

Prerequisites

• Node.js LTS (v18 or v20 recommended)
• A MongoDB connection string

Backend (server)

1. Create a .env file or edit server/config.env with:

PORT_NUMBER=5000
CONN_STRING=<your-mongodb-connection-string>
JWT_SECRET=<strong-random-secret>

2. Install and start the API:

cd "c:\Users\risha\Desktop\SuperChat\server"
npm install
npm run dev
# or
npm start

The server reads CORS settings from server/app.js. When using the CRA proxy (recommended), CORS is handled by the dev server. If you call the API directly from the browser (without proxy), ensure origin includes your frontend dev URL (e.g., http://localhost:3000).

Frontend (client)

1. Proxy or direct API base URL:
   • Default: CRA dev server proxies requests to http://localhost:5000 via proxy in client/package.json.
   • Alternative: set client/src/apiCalls/index.js base using .env.local:

cd "c:\Users\risha\Desktop\SuperChat\client"
echo REACT_APP_API_BASE_URL=http://localhost:5000 > .env.local

2. Install and start the client:

cd "c:\Users\risha\Desktop\SuperChat\client"
npm install
npm start

CRA serves at http://localhost:3000 by default.

API Endpoints Summary

Base path: /api

Auth

• POST /api/auth/signup – create user
  • Body: { firstname, lastname, email, password }
  • Accepts firstName/lastName aliases.
• POST /api/auth/login – login and receive JWT
  • Body: { email, password }
  • Response: { success, message, token }

Users (requires Authorization)

• GET /api/user/get-logged-user – returns logged-in user
• GET /api/user/get-all-users – returns all users except logged-in

Chats (requires Authorization)

• POST /api/chat/create-new-chat
  • Body: { members: [userId1, userId2] }
• GET /api/chat/get-all-chats – chats where req.userId is a member

Messages (requires Authorization)

• POST /api/message/new-message
  • Body: { chatId, sender, text }
  • Also updates chats.LastMessage.
• GET /api/message/get-all-messages/:chatId – list messages by chat
• POST /api/message/get-all-messages – same as above with { chatId } in body

Auth Header

Use Authorization: Bearer <token> in requests. The middleware also tolerates a bare token, but Bearer is recommended.

Authentication Flow

1. Signup via /api/auth/signup.
2. Login via /api/auth/login; store token in localStorage.
3. Client attaches the token automatically via Axios interceptor in client/src/apiCalls/index.js.
4. Protected routes use client/src/components/protectedRoute.js to:
   • Fetch the logged user (/api/user/get-logged-user).
   • Fetch all users (/api/user/get-all-users).
5. On token missing/invalid, user is redirected to /login.

Scaling Notes

1. Stateless API: keep JWT auth stateless; avoid server-side sessions.
2. DB Indexes: add indexes on messages.chatId, messages.createdAt, and chats.members for faster lookups.
3. Pagination: paginate /message/get-all-messages with limit/cursor for large chats.
4. Rate Limiting & Validation: throttle auth and messaging endpoints; validate payloads.
5. Real-time Transport: introduce WebSockets (e.g., Socket.IO) for live messaging, typing indicators, and read receipts, while retaining REST as fallback.
6. Horizontal Scale: run multiple API instances behind a load balancer; use a shared store (e.g., Redis) for WebSocket coordination.
7. Observability: centralize logs/traces/metrics; add health checks and readiness probes.
8. Secrets Management: load CONN_STRING/JWT_SECRET from a secret manager, not committed files.

Notes on Proxy vs Direct API Calls

• Using the CRA proxy (default) avoids CORS complexity during local dev.
• If you set REACT_APP_API_BASE_URL, ensure backend CORS in server/app.js includes your frontend origin (http://localhost:3000).

Build

cd "c:\Users\risha\Desktop\SuperChat\client"
npm run build

Build output goes to client/build.

---

This project was bootstrapped with Create React App. See CRA docs for generic topics like testing, PWA, and advanced configuration.