⚡ Echoe — Chat That Resonates

---

📌 Overview

Echoe is a production-ready, real-time chat application designed for speed, simplicity, and scalability. Built using React, Firebase, and Tailwind CSS, it enables instant messaging, secure authentication, and a modern dark-mode interface. This project demonstrates real-world frontend architecture and serverless backend integration.

---

🚀 Key Features

• 💬 Real-Time Messaging Instant message delivery using Firestore listeners (onSnapshot).

• 🔐 Secure Authentication Email/password authentication via Firebase Auth.

• 🔍 Smart User Search Find users through unique usernames.

• 🌙 Modern Dark Mode UI Clean slate-900 themed interface for an enhanced user experience.

• 📱 Fully Responsive Optimized for both mobile and desktop devices.

---

⚡ Performance & Optimization

• 🚀 Vite-powered builds for fast development & production
• 🔥 Real-time Firestore listeners (no manual polling)
• 🎨 Tailwind CSS for minimal CSS bundle size
• 📦 Modular component structure for scalability
• 🌐 Serverless Firebase backend (low latency, no API maintenance)

---

🛠️ Tech Stack

• Frontend: React (Vite)
• Styling: Tailwind CSS
• Backend: Firebase (Serverless)
• Database: Cloud Firestore
• Authentication: Firebase Auth
• Icons: React Icons (react-icons)

---

⚙️ Installation & Setup

Prerequisites

• Node.js (v16+ recommended)
• Firebase account

---

1️⃣ Clone the Repository

git clone https://github.com/yourusername/echoe-chat-app.git
cd echoe-chat-app

---

2️⃣ Install Dependencies

npm install

---

3️⃣ Configure Firebase

1. Create a project in the Firebase Console
2. Enable Authentication → Email/Password
3. Create a Cloud Firestore database
4. Replace the config in src/firebase/firebase.js:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

⚠️ Security Tip: Use environment variables (.env) for production and never commit credentials.

---

4️⃣ Run the Application

npm run dev

Open http://localhost:5173 to start chatting 🚀

---

🌍 Deployment

Echoe is compatible with modern hosting platforms:

• Vercel – Optimized for React & Vite
• Netlify – Fast global CDN delivery

Firebase credentials are configured using environment variables.

---

📂 Firestore Database Structure

users/
 └── userId
     ├── username
     ├── email
     └── avatar

chats/
 └── chatId
     ├── participants
     ├── lastMessage
     └── updatedAt

messages/ (sub-collection)
 └── messageId
     ├── senderId
     ├── text
     └── timestamp

---

🤝 Contributing

Contributions are welcome! Fork the repository, create a feature branch, and submit a pull request.

---

🧠 Future Enhancements

• 👥 Group chats
• ✔️ Read receipts
• 📎 Media sharing
• 🔔 Push notifications
• 🛡️ Firestore security rules refinement

---

📄 License

This project is open-source and licensed under the MIT License.