A modern, feature-rich real-time chat application built with React and Spring Boot
Features • Tech Stack • Getting Started • Deployment • Screenshots
- Instant message delivery via WebSocket (STOMP)
- Read receipts (✓✓ for delivered, blue ✓✓ for read)
- Typing indicators
- Message reactions (❤️ 👍 😂 😮 😢 🙏)
- Reply to messages
- Message timestamps
- Image Sharing - Send photos with preview
- File Sharing - Share documents (PDF, DOC, etc.)
- Voice Notes - Record and send audio messages
- Cloudinary integration for fast media delivery
- 10MB file size limit
- One-on-one voice calls
- HD video calling
- WebRTC peer-to-peer connection
- Call notifications
- Mute/unmute controls
- Camera toggle
- Create unlimited groups
- Add/remove members
- Group admin controls
- Group profile pictures
- Member list management
- Group messaging with all features
- Email/Password authentication
- JWT token-based sessions
- BCrypt password hashing
- Secure API endpoints
- Protected routes
- WhatsApp-inspired design
- Dark theme
- Responsive layout (mobile & desktop)
- Smooth animations
- Emoji picker
- File upload progress
- Loading states
- Online/offline status
- Last seen timestamps
- Message delivery status
- Typing indicators
- Call notifications
- React 18 - UI library
- React Router - Navigation
- WebSocket (STOMP.js) - Real-time messaging
- WebRTC - Voice/Video calls
- Axios - HTTP client
- React Toastify - Notifications
- React Icons - Icon library
- Vite - Build tool
- Spring Boot 3 - Java framework
- Spring WebSocket - Real-time communication
- Spring Security - Authentication
- JWT - Token-based auth
- MongoDB - Database
- Cloudinary - Media storage
- Maven - Build tool
- Vercel - Frontend hosting
- Render - Backend hosting
- MongoDB Atlas - Cloud database
- Cloudinary - CDN for media
- Node.js 18+
- Java 17+
- Maven 3.8+
- MongoDB (local or Atlas)
- Clone the repository
git clone https://github.com/raziquehasan/Real-Time-chat-app.git
cd Real-Time-chat-app/chat-app-backend/chat-app-backend- Configure environment variables
Create .env file:
# MongoDB
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/zapchat
# JWT
JWT_SECRET=your-secret-key-here
JWT_EXPIRATION=86400000
# Cloudinary
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret
# Server
PORT=8080- Run the backend
./mvnw clean install
./mvnw spring-boot:runBackend will run on http://localhost:8080
- Navigate to frontend
cd ../../frontend-chat- Install dependencies
npm install- Configure environment
Create .env file:
VITE_API_BASE_URL=http://localhost:8080
VITE_WS_URL=http://localhost:8080- Run the frontend
npm run devFrontend will run on http://localhost:5173
- Create new Web Service on Render
- Connect GitHub repository
- Configure:
- Build Command:
cd chat-app-backend/chat-app-backend && ./mvnw clean install - Start Command:
cd chat-app-backend/chat-app-backend && java -jar target/chat-app-backend-0.0.1-SNAPSHOT.jar
- Build Command:
- Add environment variables (same as
.env) - Deploy!
- Import project from GitHub
- Configure:
- Framework: Vite
- Root Directory:
frontend-chat - Build Command:
npm run build - Output Directory:
dist
- Add environment variables:
VITE_API_BASE_URL=https://your-backend.onrender.com VITE_WS_URL=https://your-backend.onrender.com - Deploy!
Beautiful gradient UI with email/password authentication
WhatsApp-inspired design with real-time messaging
HD quality calls with WebRTC
Create and manage group conversations
Share images, files, and voice notes
Real-Time-chat-app/
├── chat-app-backend/
│ └── chat-app-backend/
│ ├── src/main/java/com/substring/chat/
│ │ ├── config/ # Security, JWT, WebSocket config
│ │ ├── controllers/ # REST & WebSocket endpoints
│ │ ├── entities/ # MongoDB models
│ │ ├── repositories/ # Data access layer
│ │ ├── services/ # Business logic
│ │ └── dto/ # Data transfer objects
│ └── pom.xml
│
└── frontend-chat/
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Main pages
│ ├── services/ # API & WebSocket services
│ ├── context/ # React context
│ └── config/ # Routes & config
└── package.json
- WebSocket connection using STOMP protocol
- Message persistence in MongoDB
- Read receipts tracking
- Typing indicators
- Cloudinary integration for media storage
- Multipart file upload
- Progress tracking
- Image preview
- WebRTC peer connection
- STUN/TURN server configuration
- Call signaling via WebSocket
- Media stream management
- JWT token generation
- Password hashing with BCrypt
- Protected API endpoints
- Token refresh mechanism
POST /api/auth/register - Register new user
POST /api/auth/login - Login user
POST /api/auth/logout - Logout user
GET /api/private-chat/messages/{userId} - Get chat history
POST /api/private-chat/send-file - Send file/image
POST /api/private-chat/send-voice-note - Send voice note
GET /api/groups - Get user's groups
POST /api/groups - Create group
PUT /api/groups/{id} - Update group
DELETE /api/groups/{id} - Delete group
POST /api/groups/{id}/members - Add member
DELETE /api/groups/{id}/members - Remove member
POST /api/calls/initiate - Start call
POST /api/calls/accept - Accept call
POST /api/calls/reject - Reject call
POST /api/calls/end - End call
/app/private-message - Send private message
/app/group-message - Send group message
/app/webrtc-signal - WebRTC signaling
/user/queue/messages - Receive messages
/topic/group/{groupId} - Group messages
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
Razique Hasan
- GitHub: @raziquehasan
- Email: hasanrazique@gmail.com
- WhatsApp for UI/UX inspiration
- Spring Boot community
- React community
- WebRTC documentation
For support, email hasanrazique@gmail.com or open an issue on GitHub.
Made with ❤️ by Razique Hasan
⭐ Star this repo if you find it helpful!