Real-Time Chat App
A personal project exploring real-time messaging and video calls with a clean, responsive UI.
Role
Personal project
Industry
Personal Project
Timeline
2024
Stack
9 technologies
What this project is
A real-time chat application built to explore live messaging and video. Users can create accounts, join chat rooms, and send messages instantly, with video calling powered by ZegoCloud — all wrapped in a clean, responsive interface.
Context
A self-directed project to deepen my real-time and state-management skills.
Main goal
Build a polished real-time messaging experience with authentication and video calling.
The problem — and the value delivered
Written for owners and stakeholders: what was broken, why it mattered, and what changed.
The problem
Real-time features — instant messaging, presence, and video — are notoriously tricky to get right. I wanted hands-on experience wiring them together into a smooth product.
Why it mattered
As a learning project, the goal was mastery of real-time patterns and clean client-side state management.
The solution
A chat app with account creation, chat rooms, instant messaging, and ZegoCloud-powered video calls, with state handled through React's Context API.
Benefits delivered
- Instant messaging with a responsive, modern UI.
- Video calling integrated via ZegoCloud.
- Accounts and rooms backed by Firebase.
Architecture & implementation
Written for developers and recruiters: the technical decisions, tradeoffs, and lessons.
Architecture
A React (Vite) frontend using the Context API for client state, Firebase for authentication and data, and ZegoCloud for real-time video, deployed on Vercel.
Frontend
- React
- JavaScript
- Vite
- Tailwind CSS
- Context API
Realtime & Data
- Firebase
- ZegoCloud
- Node.js
Delivery
- Vercel
Implementation highlights
Instant messaging
Real-time message delivery with a smooth, responsive UI.
Video calling
Integrated ZegoCloud for live video between users.
Context-based state
Client state managed cleanly with React's Context API.
Challenges
Coordinating real-time state
Keeping messaging, presence, and video in sync required careful client-side state design.
Lessons learned
- Real-time UIs live or die by their state model.
- Third-party SDKs like ZegoCloud accelerate hard features when integrated cleanly.
What it does
Instant Messaging
Real-time chat in shared rooms.
Video Calls
Live video powered by ZegoCloud.
Accounts & Rooms
Auth and chat rooms via Firebase.
Full technology stack
Want something like this for your business?
I turn manual, error-prone workflows into reliable software. Let's talk about what you need.
Start a conversation