https://superback.vercel.app/

SyncSpace — Real-Time Chat

A full-stack real-time messaging app with authenticated users, persistent conversations, and instant delivery via WebSockets.

What's Inside

• Backend: Node.js + Express + Socket.io + MongoDB
• Frontend: React + Vite + Tailwind CSS
• Auth: JWT tokens (httpOnly cookies) + bcrypt password hashing
• Real-time: WebSocket (Socket.io) for instant message delivery
• Storage: MongoDB with Mongoose ODM
• UI: Component library (primitives, layouts, chat components)

Features

• ✅ User authentication (signup, login, logout)
• ✅ Real-time messaging with online/offline status
• ✅ Persistent conversation history
• ✅ Responsive UI (mobile-first, works on all devices)
• ✅ Clean component architecture
• ✅ Secure routes (JWT validation)
• ✅ Automatic conversation creation on first message

Quick Start

Backend (port 5500):

cd backend
npm install
npm run dev

Frontend (port 5173):

cd frontend
npm install
npm run dev

Then open http://localhost:5173 in your browser.

Setup

Create backend/.env:

MONGO_URI=mongodb://localhost:27017/syncspace
JWT_SECRET=your_secret_key_here
PORT=5500
ALLOWED_ORIGINS=http://localhost:5173

For MongoDB, use local instance or MongoDB Atlas.

API Endpoints

Method	Endpoint	Auth	Purpose
POST	/api/auth/register	❌	Create account
POST	/api/auth/login	❌	Login, get JWT
POST	/api/auth/logout	✅	Logout
POST	/api/message/send/:id	✅	Send message (real-time)
GET	/api/message/getMessages/:id	✅	Get chat history
GET	/api/users	✅	Get user list

Tech Stack

Backend

• Express.js (HTTP server)
• Socket.io (WebSocket)
• MongoDB + Mongoose (database)
• JWT + bcrypt (auth)
• Node.js 16+ (runtime)

Frontend

• React 18 (UI)
• Vite (build tool)
• Tailwind CSS (styling)
• Socket.io-client (WebSocket)
• Zustand (state management)
• Axios (HTTP)

Project Structure

backend/
  ├─ server.js           (Express + Socket.io entry)
  ├─ controllers/        (auth, messages, users logic)
  ├─ models/             (User, Message, Conversation schemas)
  ├─ routes/             (API endpoints)
  ├─ middleware/         (JWT validation)
  └─ db/                 (MongoDB connection)

frontend/
  ├─ src/
  │  ├─ pages/           (Login, Signup, Home, Settings)
  │  ├─ components/      (Primitives, Layout, Chat UI)
  │  ├─ context/         (Auth, Socket, Theme state)
  │  ├─ hooks/           (Custom API hooks)
  │  └─ zustand/         (Conversation state)

Key Concepts

Authentication Flow

1. User signs up → password hashed (bcrypt)
2. Login → JWT generated, stored in httpOnly cookie
3. Protected routes validate JWT via secureRoute middleware

Real-Time Messaging

1. User sends message → POST /api/message/send/:receiverId
2. Message saved to MongoDB
3. If receiver is online: emit via Socket.io instantly
4. If offline: stored, delivered on next login

Socket Events

• connect – User joins, updates online user list
• disconnect – User leaves, updates online status
• newMessage – Real-time message delivery to receiver

Production Readiness

Current State: Core features working, needs hardening for production.

What's Missing:

• Automated tests (unit, integration, E2E)
• CI/CD pipeline
• Rate limiting
• Input validation/sanitization
• Error logging/monitoring
• HTTPS + secure cookies
• Database backups
• Socket.io clustering (Redis adapter)
• API documentation (Swagger/OpenAPI)

Documentation

For detailed info:

• START_HERE.md — Quick 5-min local setup
• docs/architecture.md — System design & data flow
• DELIVERABLES.md — Project summary
• backend/README.md — Backend-specific details
• frontend/README.md — Frontend-specific details

Next Steps

1. Run both servers locally (see Quick Start)
2. Sign up and test real-time messaging
3. Open DevTools to see Socket.io events
4. Check architecture docs for deeper understanding
5. Extend features or deploy

---

Status: Working prototype
License: MIT (if applicable)