💬 RealTime Chat

A WhatsApp-inspired messaging app built with React & Appwrite

Quick Start • Features • Screenshots • Tech Stack • Contributing

Experience seamless real-time messaging with a familiar WhatsApp-like interface, powered by Appwrite's blazing-fast realtime subscriptions.

---

📑 Table of Contents

• 🖼️ Screenshots
• ✨ Features
• 🛠️ Tech Stack
• 🏗️ Architecture
• 🚀 Quick Start
• ⚙️ Environment Variables
• ☁️ Appwrite Setup
• 📜 Available Scripts
• 📁 Project Structure
• 🌐 Deployment
• 🗺️ Roadmap
• 🤝 Contributing
• 📄 License

---

🖼️ Screenshots

💬 Chat Interface

Real-time messaging with WhatsApp-style bubbles, timestamps, and read receipts

🔐 Authentication

🔑 Login Page Clean, minimal login interface

📝 Register Page Quick sign-up with validation

---

✨ Features

🔐	Secure Authentication	Email/password auth via Appwrite with protected routes
💬	Real-time Messaging	Instant message delivery using Appwrite Realtime subscriptions
🌗	Dark/Light Mode	Toggle between themes with persistent preference
😄	Emoji Support	Full emoji picker for expressive conversations
🔍	User Search	Find and start conversations with any registered user
🗑️	Message Management	Delete your own messages with permission-based controls
📱	Responsive Design	Seamless experience across desktop, tablet, and mobile
⚡	Lightning Fast	Built with Vite for instant HMR and optimized builds

---

🛠️ Tech Stack

Category	Technologies
Frontend
Build Tool
Backend
UI Libraries	emoji-picker-react
Tooling

---

🏗️ Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                           FRONTEND (React)                          │
├─────────────────────────────────────────────────────────────────────┤
│  AuthContext  │  PrivateRoutes  │  React Router  │  Tailwind CSS    │
└───────────────────────────────┬─────────────────────────────────────┘
                                │
                                ▼
┌─────────────────────────────────────────────────────────────────────┐
│                        APPWRITE CLOUD                               │
├─────────────────┬─────────────────┬─────────────────┬───────────────┤
│   🔐 Accounts   │   🗄️ Databases │   📡 Realtime   │   📦 Storage │
│                 │                 │                 │               │
│  • Auth         │  • users        │  • Message      │  • Media      │
│  • Sessions     │  • conversations│    subscriptions│    uploads    │
│                 │  • messages     │                 │               │
└─────────────────┴─────────────────┴─────────────────┴───────────────┘

How it works:

1. Authentication → AuthProvider bootstraps the session via account.get(). Protected routes keep chat behind login.
2. Data Layer → Three Appwrite collections: users, conversations, and messages.
3. Realtime → The chat room subscribes to message events and patches the UI instantly.
4. UI State → React hooks manage search, layout breakpoints, emoji picker, and auto-scroll.

---

🚀 Quick Start

Prerequisites

Requirement	Version
Node.js	18+
npm	10+
Appwrite	Cloud or Self-hosted

Installation

# Clone the repository
git clone https://github.com/JeetMajumdar2003/Realtime-Chat.git

# Navigate to directory
cd Realtime-Chat

# Install dependencies
npm install

# Start development server
npm run dev

🌐 Open http://localhost:5173 in your browser

---

⚙️ Environment Variables

Create a .env file in the root directory (use .env.sample as reference):

VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_ID=your_project_id
VITE_APPWRITE_DATABASE_ID=your_database_id
VITE_APPWRITE_COLLECTION_ID_MESSAGES=your_messages_collection_id
VITE_APPWRITE_COLLECTION_ID_CONVERSATIONS=your_conversations_collection_id
VITE_APPWRITE_COLLECTION_ID_USERS=your_users_collection_id
VITE_APPWRITE_BUCKET_ID=your_bucket_id

📋 Variable Reference

Variable	Description
VITE_APPWRITE_ENDPOINT	Appwrite API endpoint URL
VITE_APPWRITE_PROJECT_ID	Your Appwrite project ID
VITE_APPWRITE_DATABASE_ID	Database ID for chat data
VITE_APPWRITE_COLLECTION_ID_MESSAGES	Collection storing messages
VITE_APPWRITE_COLLECTION_ID_CONVERSATIONS	Collection storing conversation metadata
VITE_APPWRITE_COLLECTION_ID_USERS	Collection storing user profiles
VITE_APPWRITE_BUCKET_ID	Storage bucket for media (optional)

---

☁️ Appwrite Setup

📖 Click to expand setup instructions

1️⃣ Create Database

Create a new database in your Appwrite console (e.g., chat-db).

2️⃣ Create Collections

users Collection

Attribute	Type	Required
username	String	✅
email	String	✅

⚠️ Document ID must match the Appwrite Account $id

conversations Collection

Attribute	Type	Required
participants	String[]	✅
last_message_body	String	❌
last_message_at	DateTime	❌

messages Collection

Attribute	Type	Required
conversation_id	String	✅
user_id	String	✅
username	String	✅
body	String	✅

3️⃣ Create Indexes

• conversations: Array index on participants
• messages: Composite index on conversation_id + $createdAt (ASC)

4️⃣ Configure Permissions

Enable authenticated users to create/read documents. The app uses document-level permissions for message deletion.

---

📜 Available Scripts

Command	Description
npm run dev	🚀 Start development server with HMR
npm run build	📦 Build for production
npm run preview	👁️ Preview production build locally
npm run lint	🔍 Run ESLint checks

---

📁 Project Structure

src/
├── 📄 App.jsx                 # Router + layout shell
├── 📄 appwriteConfig.js       # Appwrite client setup
├── 📄 main.jsx                # App entry point
├── 📄 index.css               # Tailwind imports
│
├── 📁 assets/                 # Static images
│   ├── chat1.png
│   ├── chat2.png
│   ├── login.png
│   └── register.png
│
├── 📁 components/
│   ├── Header.jsx             # Auth-aware navigation
│   ├── FilePreview.jsx        # File preview component
│   └── FileUploadPopup.jsx    # Upload modal
│
├── 📁 pages/
│   ├── Home.jsx               # Conversation sidebar
│   ├── Room.jsx               # Chat room with realtime
│   ├── LoginPage.jsx          # Login form
│   └── RegisterPage.jsx       # Registration form
│
└── 📁 utils/
    ├── AuthContext.jsx        # Auth state management
    └── PrivateRoutes.jsx      # Route protection

---

🌐 Deployment

Appwrite Sites

# Build and deploy
npm run build
npx appwrite deploy sites create --projectId=your_project_id --siteId=your_site_id --path=./dist --entrypoint=index.html

Important Notes

1. Update homepage in package.json if forking
2. Add your deployed domain to Appwrite Project Settings → Platforms

---

🗺️ Roadmap

• 👥 Group chats & read receipts
• 📎 File & voice note uploads
• 🔔 Push notifications via Appwrite Functions
• 😍 Message reactions & typing indicators
• ✨ Onboarding animations

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

⭐ Star this repo if you found it helpful!

Made with ❤️ by Jeet Majumdar