- ✨ Features
- 🛠️ Tech Stack
- 🏗️ Architecture
- ⚡ Quick Start
- 🔧 Installation
- ⚙️ Configuration
- 🚀 Deployment
- 📖 API Documentation
- 🎨 UI Components
- 🔒 Authentication
- 📱 Responsive Design
- 🧪 Testing
- 🤝 Contributing
- 📄 License
- 👥 Authors
🔥 Core Features
- 💬 Real-time Messaging: Instant message delivery with Socket.io
- 👥 User Authentication: Secure JWT-based auth with bcrypt encryption
- 🖼️ Media Sharing: Image and file uploads via Cloudinary integration
- 🌐 Online Status: Real-time user presence indicators
- 📱 Responsive Design: Mobile-first approach with TailwindCSS
- 🎨 Modern UI: Beautiful interface with DaisyUI components
- 🌙 Theme Support: Dark/Light theme switching
- ⚡ Fast Performance: Optimized with Vite and modern React patterns
🚀 Advanced Features
- 📊 Real-time Analytics: Live user activity tracking
- 👤 User Profiles: Customizable user profiles with avatars
- 🔐 Secure Sessions: HTTP-only cookies with CORS protection
- 📈 Scalable Architecture: Microservice-ready design
- 🛡️ Data Validation: Comprehensive input validation and sanitization
⚠️ Error Handling: Graceful error handling with user-friendly messages- 📱 PWA Ready: Progressive Web App capabilities
graph LR
A[React 19.1.0] --> B[Vite Build Tool]
A --> C[TailwindCSS 4.1.8]
C --> D[DaisyUI Components]
A --> E[Socket.io Client]
A --> F[Zustand State]
A --> G[React Router DOM]
A --> H[Axios HTTP]
A --> I[React Hot Toast]
A --> J[Lucide Icons]
| Technology | Version | Purpose |
|---|---|---|
| React | 19.1.0 | UI Framework |
| Vite | 6.3.5 | Build Tool & Dev Server |
| TailwindCSS | 4.1.8 | Utility-first CSS Framework |
| DaisyUI | 5.0.43 | Pre-built UI Components |
| Socket.io Client | 4.8.1 | Real-time Communication |
| Zustand | 5.0.5 | State Management |
| React Router DOM | 7.6.1 | Client-side Routing |
| Axios | 1.9.0 | HTTP Client |
| React Hot Toast | 2.5.2 | Notification System |
| Lucide React | 0.511.0 | Modern Icons |
graph LR
A[Node.js] --> B[Express 5.1.0]
B --> C[MongoDB]
C --> D[Mongoose ODM]
B --> E[Socket.io Server]
B --> F[JWT Auth]
F --> G[bcryptjs]
B --> H[Cloudinary]
B --> I[CORS]
B --> J[Cookie Parser]
| Technology | Version | Purpose |
|---|---|---|
| Node.js | 20+ | Runtime Environment |
| Express | 5.1.0 | Web Framework |
| MongoDB | Latest | NoSQL Database |
| Mongoose | 8.15.1 | MongoDB ODM |
| Socket.io | 4.8.1 | WebSocket Server |
| JWT | 9.0.2 | Authentication Tokens |
| bcryptjs | 3.0.2 | Password Hashing |
| Cloudinary | 2.6.1 | Media Management |
| CORS | 2.8.5 | Cross-Origin Requests |
| dotenv | 16.5.0 | Environment Variables |
📊 System Architecture Diagram
graph TB
subgraph "Client Side"
A[React App] --> B[Zustand Store]
A --> C[Socket.io Client]
A --> D[Axios HTTP Client]
B --> E[Auth Store]
B --> F[Chat Store]
B --> G[Theme Store]
end
subgraph "Server Side"
H[Express Server] --> I[Socket.io Server]
H --> J[Auth Routes]
H --> K[Message Routes]
H --> L[Auth Middleware]
I --> M[Real-time Events]
end
subgraph "Database"
N[MongoDB]
O[User Collection]
P[Message Collection]
N --> O
N --> P
end
subgraph "External Services"
Q[Cloudinary]
R[JWT Tokens]
end
C -.->|WebSocket| I
D -->|HTTP/HTTPS| H
H --> N
H --> Q
L --> R
style A fill:#61DAFB
style H fill:#339933
style N fill:#47A248
style Q fill:#3448C5
🗄️ Database Schema
erDiagram
User {
ObjectId _id
String email
String fullName
String password
String profilePic
Date createdAt
Date updatedAt
}
Message {
ObjectId _id
ObjectId senderId
ObjectId receiverId
String text
String image
Date createdAt
Date updatedAt
}
User ||--}o Message : sends
User ||--}o Message : receives
Prerequisites: Node.js 20+, MongoDB, Git
# 🚀 Clone the repository
git clone https://github.com/Spidy394/Konvo.git
cd Konvo
# 📦 Install dependencies for both client and server
npm run build
# 🔧 Set up environment variables
cp server/.env.example server/.env
# Edit server/.env with your configuration
# 🏃♂️ Start development servers
npm run dev:server # Backend on port 5001
npm run dev:client # Frontend on port 5173🎉 Open http://localhost:5173 to view the app!
📋 Detailed Setup Instructions
git clone https://github.com/Spidy394/Konvo.git
cd Konvonpm installcd server
npm installcd client
npm install- Create account at MongoDB Atlas
- Create a new cluster
- Get connection string
- Add to environment variables
# Install MongoDB locally
# Ubuntu/Debian
sudo apt-get install mongodb
# macOS
brew install mongodb-community
# Start MongoDB service
sudo systemctl start mongod # Linux
brew services start mongodb-community # macOS🔐 Environment Variables
Create a .env file in the server directory:
# Server Configuration
PORT=5001
NODE_ENV=development
# Database
MONGODB_URI=
# JWT Configuration
JWT_SECRET=
JWT_EXPIRES_IN=
# Cloudinary Configuration
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
# CORS Configuration
CLIENT_URL=🎨 Client Configuration
The client uses Vite configuration in client/vite.config.js:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
proxy: {
'/api': {
target: 'http://localhost:5001',
changeOrigin: true
}
}
}
})☁️ Deploy to Render.com
- Fork this repository
- Connect your GitHub account to Render
- Create a new Web Service
- Connect your forked repository
- Configure environment variables
- Deploy!
This project is licensed under the ISC License - see the LICENSE file for details.
ISC License
Copyright (c) 2025 Shubhodeep Mondal
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.
Give a ⭐️ if this project helped you!
Built with ❤️ by Shubhodeep Mondal
Konvo - Where conversations come alive in real-time 💬✨