A full-stack, Project real-time chat application built with React, Express, Socket.IO, and MongoDB — featuring secure authentication, media sharing, and a Dockerized monolith deployment.
✨ Features
🔐 Authentication & Authorization — Secure sign-up/sign-in via Clerk, with JWT-protected API routes and webhook-synced user data.
⚡ Real-Time Messaging — Bi-directional communication powered by Socket.IO; messages appear instantly without page refresh.
🖼️ Media Sharing — Send images and files in conversations via Multer + ImageKit.
💬 Conversation Sidebar — View all active conversations and online users at a glance.
🎨 Theme Support — Multiple UI themes switchable at runtime via React Context.
🖼️ Wallpaper Customization — Personalized chat backgrounds managed through a dedicated WallpaperContext.
👁️ Read Receipts — Messages show delivery and seen status so users know when their message has been read.
🟢 Online Indicators — Real-time presence dots show which users are currently active in the sidebar.
✍️ Typing Indicators — Live "is typing…" feedback appears while the other user composes a message.
🔄 Auth State Sync — Zustand-powered global auth store that stays in sync with Clerk's session lifecycle.
🕐 Cron Jobs — Automated background tasks (e.g., cleanup) running in production via the cron library.
🌐 SPA + API Monolith — Express serves both the REST API and the Vite-built React frontend from a single server.
🐳 Docker Support — Multi-stage Dockerfile for optimized production images (frontend build → backend build → lean runtime).
🍞 Toast Notifications — User-friendly feedback for actions using react-hot-toast.
❤️ Health Check Endpoint — /health route for uptime monitoring and container orchestration.
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite 8 | Build tool & dev server |
| React Router v8 | Client-side routing |
| Clerk React | Authentication UI & session management |
| Zustand | Global state management |
| Socket.IO Client | Real-time WebSocket communication |
| HeroUI + Tailwind CSS v4 | Component library & utility-first styling |
| Axios | HTTP client |
| react-hot-toast | Toast notifications |
| Lucide React | Icon library |
| Technology | Purpose |
|---|---|
| Node.js + Express 5 | HTTP server & REST API |
| Socket.IO | WebSocket server |
| MongoDB + Mongoose | Database & ODM |
| Clerk Express / Backend | Auth middleware & webhook verification |
| Multer | Multipart file upload handling |
| ImageKit | Cloud image storage & CDN |
| Cron | Scheduled background jobs |
| dotenv | Environment variable management |
| CORS | Cross-origin request handling |
| Technology | Purpose |
|---|---|
| Docker (multi-stage) | Containerized build & deployment |
| Nodemon | Development hot-reload |
| ESLint | Code linting |
CYVION-CHATAPP/
├── backend/
│ ├── dist/ # Compiled output (generated by npm run build)
│ ├── src/
│ │ ├── controllers/ # Route handler logic (auth, message)
│ │ ├── lib/ # db.js, socket.js, cron.js
│ │ ├── middleware/ # auth.middleware, upload.middleware
│ │ ├── models/ # Mongoose schemas (user.model)
│ │ ├── routes/ # auth.route, message.route
│ │ ├── seeds/ # Database seed scripts
│ │ ├── webhooks/ # clerk.webhook handler
│ │ └── index.js # Express app entry point
│ ├── .env
│ └── package.json
│
├── frontend/
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ ├── context/ # ThemeContext, WallpaperContext
│ │ ├── data/ # Static data / constants
│ │ ├── hooks/ # Custom React hooks
│ │ ├── lib/ # Utility functions / axios config
│ │ ├── pages/ # ChatPage, AuthPage
│ │ ├── store/ # Zustand stores (useAuthStore)
│ │ ├── styles/ # Global styles
│ │ ├── App.jsx # Root component with routing
│ │ ├── index.css # Base CSS
│ │ └── main.jsx # React DOM entry point
│ ├── .env
│ ├── index.html
│ ├── eslint.config.js
│ ├── vite.config.js
│ └── package.json
│
├── .dockerignore
├── .gitignore
└── Dockerfile # Multi-stage production build
| Method | Route | Description |
|---|---|---|
GET |
/api/auth/check |
Verify authenticated user (protected) |
| Method | Route | Description |
|---|---|---|
GET |
/api/messages/users |
Get all users for sidebar |
GET |
/api/messages/conversations |
Get conversation list for current user |
GET |
/api/messages/:id |
Get message history with a specific user |
POST |
/api/messages/send/:id |
Send a message (supports media upload) |
| Method | Route | Description |
|---|---|---|
GET |
/health |
Health check |
POST |
/api/webhooks/clerk |
Clerk webhook handler |
PORT=3001
MONGODB_URI=your_mongodb_connection_string
FRONTEND_URL=http://localhost:5173
NODE_ENV=development
# Clerk
CLERK_SECRET_KEY=your_clerk_secret_key
CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret
# ImageKit
IMAGEKIT_PUBLIC_KEY=your_imagekit_public_key
IMAGEKIT_PRIVATE_KEY=your_imagekit_private_key
IMAGEKIT_URL_ENDPOINT=your_imagekit_url_endpointVITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_API_URL=http://localhost:3001- Node.js v22+
- MongoDB (local or Atlas)
- A Clerk account
- An ImageKit account
- Docker (optional, for containerized runs)
1. Clone the repository
git clone https://github.com/Anmol1578/Cyvion-Chat
cd Cyvion-Chat2. Set up the backend
cd backend
cp .env.example .env # fill in your values
npm install
npm run dev3. Set up the frontend
cd frontend
cp .env.example .env # fill in your values
npm install
npm run devFrontend runs at http://localhost:5173 · Backend runs at http://localhost:3001
docker build \
--build-arg VITE_CLERK_PUBLISHABLE_KEY=your_key \
-t chatapp .
docker run -p 3001:3001 --env-file backend/.env chatappApp is served at http://localhost:3001
- All message routes are protected by
protectRoutemiddleware (Clerk JWT verification) - Clerk webhooks use raw body parsing + signature verification to prevent spoofing
- CORS is restricted to the configured
FRONTEND_URL - Docker runtime uses a non-root
nodeuser - Production cron jobs only activate when
NODE_ENV=production
This project is licensed under the ISC License.
⭐ If you found this project helpful, consider giving it a star!