Chat Nova is a real-time chat application built with React.js and Firebase, enabling instant messaging with support for text, images, and videos through a modern and responsive interface.
Chat Nova follows a Client–Server Architecture with a Serverless Backend (BaaS), ensuring real-time communication, scalability, and secure cloud-based data handling.
| Layer | Responsibility |
|---|---|
| Frontend | React.js chat interface and UI components |
| Backend (BaaS) | Firebase services for authentication and database |
| Real-Time Layer | Firestore listeners for instant updates |
| Media Storage | Cloudinary for image and video handling |
Chat Nova follows the Software as a Service (SaaS) model, offering cloud-based real-time messaging that users can access through authenticated accounts without local installation.
| Feature | Description |
|---|---|
| Chat Interface | Responsive UI with sidebar, chat window, and user panel |
| State Management | React Context API for global state handling |
| User 搜索 | 搜索 users by username to start chats |
| Media Sharing | Upload and send images and videos |
| 通知 | Real-time message updates |
| Feature | Description |
|---|---|
| Firebase Auth | User authentication (signup, login, password reset) |
| Firestore DB | Stores users, chats, and messages |
| Real-Time Sync | onSnapshot listeners for live updates |
| Media Storage | Cloudinary integration for files |
| Status Tracking | Seen messages and last active status |
| Capability | Description |
|---|---|
| Authentication | Secure login and signup system |
| 个人资料 Management | Update avatar, name, and bio |
| Real-Time Chat | Instant messaging with live updates |
| Media Sharing | Send images and videos in chat |
| Chat History | Persistent conversation storage |
| 动态 Tracking | Last seen and message status |
| Layer | Technology |
|---|---|
| Frontend | React.js, HTML, CSS, JavaScript |
| Backend | Firebase (Firestore + Authentication) |
| Storage | Cloudinary |
| State Management | React Context API |
https://chat-nova-swart.vercel.app/
Muhammad Ashhadullah Zaheer
LinkedIn: https://www.linkedin.com/in/muhammad-ashhadullah-zaheer-41194a340/