📱 WhatsApp Clone - Uda-chat (HTML, CSS, JavaScript + Firebase)

A simple web app that simulates core WhatsApp features using Firebase Realtime Database, built with just HTML, CSS, and JavaScript — no frameworks.

🚀 Features

• ✅ Real-time messaging powered by Firebase Realtime Database
• ✅ User authentication with Firebase Authentication (optional: Email/Password or Google Sign-In)
• ✅ Clean and responsive UI (inspired by WhatsApp Web)
• ✅ Message timestamps
• ✅ Basic chat rooms (groups or 1-on-1 chats)

🛠 Tech Stack

Technology	Description
HTML / CSS	Markup & Styling
JavaScript	Frontend logic
Firebase Realtime Database	Real-time backend
Firebase Authentication (optional)	User authentication

✨ Demo

Coming soon… (Optional: Add link to demo or screenshots)

🏗️ Project Structure

/whatsapp-clone
 ├── index.html
 ├── styles.css
 ├── app.js
 └── /firebase/
      └── config.js

🔥 Firebase Setup

1. Go to Firebase Console and create a project.

2. Enable:

   • Authentication (optional)
   • Realtime Database (start in test mode or configure rules)

3. Get your Firebase config and add it to /firebase/config.js:

// /firebase/config.js
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DB_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
};

firebase.initializeApp(firebaseConfig);
const database = firebase.database();

4. Set Realtime Database Rules (for testing):

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Or for testing without auth (open access):

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

⚠️ Note: Open rules should only be used in development!

⚙️ Installation & Usage

1. Clone the repo:

git clone https://github.com/your-username/whatsapp-clone.git
cd whatsapp-clone

2. Open index.html in your browser:

open index.html

Or use Live Server extension in VSCode for auto reload.

📌 TODOs

• User authentication (Google or Email/Password)
• Chat rooms & user lists
• Emoji support
• Media sharing (images/files)
• Push notifications

🙌 Contributing

Feel free to fork the repo, suggest features, or submit pull requests.

📄 License

MIT License © 2025