🌊 AftaMeet - Full-Stack Real-Time Communication Platform

A modern, real-time video calling and chat application powered by React, Node.js, and GetStream.

Features • Tech Stack • Architecture • Getting Started

---

✨ Features

• 📹 Real-Time Video Calls: High-quality, low-latency video calls powered by the Stream Video React SDK.
• 💬 Live Chat: Instant messaging with typing indicators, read receipts, and rich media support using Stream Chat.
• 🔐 Secure Authentication: JWT-based authentication stored securely in HTTP-only cookies, keeping user sessions safe.
• 🎨 Theming & Brutalist UI: Built with Tailwind CSS and DaisyUI, featuring a sleek, responsive design and robust theme management managed by Zustand.
• 🚀 Onboarding Flow: Seamless user onboarding experience to set up profiles before diving into chats and calls.
• 🔔 Notifications: Real-time notifications for incoming messages and call invites.

---

🛠 Tech Stack

💻 Frontend (Client)

• React 19 & Vite — Fast, modern UI development.
• Tailwind CSS & DaisyUI — Utility-first styling and pre-built components.
• Zustand — Lightweight global state management (e.g., Theme Store).
• React Router v7 — Declarative routing and navigation.
• React Query — Data fetching, caching, and state synchronization.
• GetStream SDKs (stream-chat-react, @stream-io/video-react-sdk) — Core communication UI and logic.

⚙️ Backend (API Server)

• Node.js & Express.js — Robust backend framework.
• MongoDB & Mongoose — NoSQL database for flexible user and metadata storage.
• JWT (JSON Web Tokens) — Secure user authentication.
• GetStream API — Backend client for generating secure access tokens for real-time services.

---

🏗 Architecture

Streamify leverages a decoupled, scalable architecture relying on GetStream for heavy real-time workloads:

┌──────────────────────────────────────────────────────────────────┐
│                        CLIENT (React / Vite)                    │
│   GetStream SDKs handle direct WebSocket connections for media   │
└──────────┬────────────────────────────┬─────────────────────────┘
           │ HTTP (Auth/Tokens)         │ WebSockets / WebRTC
           ▼                            ▼
┌───────────────────────┐    ┌────────────────────────────────────┐
│   EXPRESS API SERVER  │    │           GETSTREAM API            │
│   (Node.js / Express) │    │  (Managed Chat & Video Services)   │
│                       │    │                                    │
│  • JWT Auth           │    │  • Relays Video & Audio Streams    │
│  • User Management    │    │  • Handles Chat Pub/Sub            │
│  • Token Generation   │    │  • Presence & Typing Indicators    │
│    for GetStream      │    │                                    │
└──────────┬────────────┘    └────────────────────────────────────┘
           │ 
           ▼
┌───────────────────────┐
│   MONGODB CLUSTER     │
│  (Users, Profiles)    │
└───────────────────────┘

Key Design Decisions

1. Offloading Real-Time Infrastructure: By integrating GetStream, the Express server is freed from managing complex, stateful WebSocket connections and WebRTC signaling. The backend acts primarily as a secure identity provider and token issuer.
2. JWT & HTTP-Only Cookies: Authentication leverages short-lived JWTs stored in HTTP-only cookies to protect against XSS attacks, ensuring robust session security.
3. Dedicated Onboarding State: The application correctly distinguishes between authenticated users and fully onboarded users (isOnboarded), seamlessly routing incomplete profiles to the necessary setup screens before granting access to the core chat and video functionalities.

---

🚀 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine.

Prerequisites

• Node.js (v18+)
• MongoDB URI (Local or MongoDB Atlas)
• GetStream Account (API Key and Secret)

1. Clone & Install

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

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

2. Environment Variables

Create a .env file in the backend directory:

PORT=5001
NODE_ENV=development
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key

# GetStream Credentials
STREAM_API_KEY=your_stream_api_key
STREAM_API_SECRET=your_stream_api_secret

3. Running the Application

You will need two terminal instances:

Terminal 1: Start the Backend Server

cd backend
npm run dev

Terminal 2: Start the Frontend Client

cd frontend
npm run dev

Visit https://aftameet-streamify.onrender.com to access the Streamify application!