💬 Chatify — Real-Time Chat Application

A modern real-time web chat application built with Vite, React, TypeScript, and Firebase.
Chatify focuses on performance, clean UI, and rich messaging features for both 1:1 and group conversations.

---

✨ Features

• 🔐 Google Authentication (Firebase Auth)
• 💬 Real-Time Messaging
  • 1:1 chats
  • Group conversations
• 🧵 Replies
  • Reply-to context for text, images, and files
• 🔗 Smart Link Detection
  • Automatically converts URLs to clickable links
• 😀 Emoji Support
  • Emoji picker
  • Message reactions
• 👀 Read Receipts
  • Seen indicators for messages
• 📎 Media Sharing
  • Image uploads
  • File uploads
• 🗑️ Message Removal
  • Tombstone-style deletion notes
• 🌓 Theme Toggle
  • Light / Dark mode
• 👑 Group Management
  • Admin controls
  • Promote members
  • Add / remove participants

---

🧰 Tech Stack

Frontend

• ⚛️ React 18
• 🧠 TypeScript
• ⚡ Vite

Styling

• 🎨 Styled Components
• 🧩 Material UI (selected components)

State Management

• 🐻 Zustand

Backend (BaaS)

• 🔐 Firebase Authentication
• 🗃️ Firestore
• 🗂️ Firebase Storage

---

🗂️ Project Structure (High Level)

src/
├── firebase/     # Firebase client initialization
├── pages/        # Route-level pages (SignIn, Home, Chat, 404)
├── components/   # UI components (Chat, Sidebar, Media, Core)
├── hooks/        # Custom hooks (queries, theme, user store)
├── library/      # Utilities, types, constants

---

🚀 Getting Started

Prerequisites

• 🟢 Node.js (LTS recommended)

---

📦 Install Dependencies

npm install

---

🔥 Firebase Configuration

This project requires a Firebase project with:

• 🔐 Authentication (Google provider enabled)
• 🗃️ Firestore Database
• 🗂️ Storage

Create a .env file from .env.example and set the following values:

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=

---

✅ Firebase Console Checklist

• Authentication Build → Authentication → Sign-in method → Google → Enable

• Firestore Build → Firestore Database → Create database

• Storage Build → Storage → Get started

---

🔒 Security Note

You may use test mode rules for local development. Before deploying, ensure Firestore and Storage rules are properly secured.

---

▶️ Run Locally

npm run dev

---

🧪 Available Scripts

npm run dev       # Start development server
npm run build     # Type-check + production build
npm run preview   # Preview production build
npm run tscheck   # TypeScript noEmit check

---

🛣️ Roadmap (Ideas)

• ✅ Automated tests (unit + integration)
• ✅ Chat virtualization for large message histories
• ✅ Improved upload progress and retry UX

---

📜 License

MIT License, free to use, modify, and build upon.