A high-performance, Serverless Messaging Architecture built with React & Vite. Powered by Firebase for instant data syncing and Cloudinary for optimized media handling.
- 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).
- 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.
| Component | Technology |
|---|---|
| Frontend Core | React.js, Vite, Context API |
| Backend (BaaS) | Firebase (Firestore, Auth) |
| Media Engine | Cloudinary (Upload Widget/API) |
| Styling | CSS3 (Modular & Responsive) |
Follow these steps to set up the chat engine on your machine:
- Clone & Install
# 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
- Environment Setup (.env)
# 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
- Run the App
# Start development server
npm run dev
The app will launch at http://localhost:5173
| Chat Room | Mobile View |
|---|---|
|
 |
Made with ❤️ by Ali Haggag
"Smooth messaging. Instant updates."