https://github.com/ali-haggag7/realtime-chat-engine
💬 High-performance Real-time Chat Engine built with React & Vite. Features Serverless architecture (Firebase), secure Auth, and instant media sharing (Cloudinary).
https://github.com/ali-haggag7/realtime-chat-engine
clean-ui cloudinary firebase firestore messaging-app react realtime-chat serverless spa vite
Last synced: 29 days ago
JSON representation
💬 High-performance Real-time Chat Engine built with React & Vite. Features Serverless architecture (Firebase), secure Auth, and instant media sharing (Cloudinary).
- Host: GitHub
- URL: https://github.com/ali-haggag7/realtime-chat-engine
- Owner: Ali-Haggag7
- Created: 2025-08-06T17:58:31.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2026-04-03T20:49:07.000Z (3 months ago)
- Last Synced: 2026-04-03T22:19:37.830Z (3 months ago)
- Topics: clean-ui, cloudinary, firebase, firestore, messaging-app, react, realtime-chat, serverless, spa, vite
- Language: JavaScript
- Homepage: https://realtime-chat-engine.vercel.app
- Size: 494 KB
- Stars: 11
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
💬 Realtime Chat Engine
A high-performance, Serverless Messaging Architecture built with React & Vite.
Powered by Firebase for instant data syncing and Cloudinary for optimized media handling.
## 🔥 Key Features
### ⚡ Performance & Architecture
* **Serverless Backend:** Fully managed backend using **Firebase** (Auth, Firestore/Realtime DB) for zero-maintenance scalability.
* **Instant Sync:** Real-time listeners ensure messages appear instantly without page reloads.
* **Lightning Fast:** Built with **Vite** for optimized bundling and instant HMR (Hot Module Replacement).
### 🎨 User Experience
* **Secure Identity:** Robust authentication system managed via Firebase Auth.
* **Rich Media:** Seamless image uploads and optimization using **Cloudinary API**.
* **Responsive UI:** A clean, mobile-first interface designed for all screen sizes.
---
## 🛠️ Tech Stack
| Component | Technology |
| :--- | :--- |
| **Frontend Core** | React.js, Vite, Context API |
| **Backend (BaaS)** | Firebase (Firestore, Auth) |
| **Media Engine** | Cloudinary (Upload Widget/API) |
| **Styling** | CSS3 (Modular & Responsive) |
---
## 🚀 Getting Started Locally
Follow these steps to set up the chat engine on your machine:
1. **Clone & Install**
```bash
# Clone the repository
git clone [https://github.com/Ali-Haggag7/Realtime-Chat-Engine.git](https://github.com/Ali-Haggag7/Realtime-Chat-Engine.git)
cd Realtime-Chat-Engine
# Install dependencies
npm install
```
2. **Environment Setup (.env)**
```bash
# Create a .env file in the root directory. You need to setup a Firebase project and a Cloudinary account.
VITE_API_KEY=your_firebase_api_key
VITE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_PROJECT_ID=your_project_id
VITE_STORAGE_BUCKET=your_project.appspot.com
VITE_MESSAGING_SENDER_ID=your_sender_id
VITE_APP_ID=your_app_id
VITE_CLOUDINARY_CLOUD_NAME=your_cloud_name
VITE_CLOUDINARY_UPLOAD_PRESET=your_upload_preset
```
3. **Run the App**
```bash
# Start development server
npm run dev
```
The app will launch at http://localhost:5173
## 📸 Interface Previews
| **Chat Room** | **Mobile View** |
| :---: | :---: |
| | 
|
---
Made with ❤️ by Ali Haggag
"Smooth messaging. Instant updates."