⚡ Zync - Real-Time Communication & Language Exchange

Synchronize. Connect. Unify.

---

🌟 Overview

Zync is a next-generation real-time social networking, chatting, and calling application designed to bring people together. Built on a modern full-stack architecture, Zync integrates text chat, audio/video calling, and a smart matchmaking system to connect language learners and friends across the globe.

Whether you want to have a quick high-definition video call, exchange messaging in channels, or meet new friends matching your target languages, Zync makes it smooth and instant.

---

🚀 Key Features

• 💬 Real-Time Text Messaging: Feature-rich chat threads, direct messaging, user mentions, typing indicators, and emoji reactions powered by the GetStream Chat SDK.
• 📞 HD Audio & Video Calling: Ultra-low latency face-to-face calling with custom video grids, camera/audio toggle controls, and live status powered by GetStream Video SDK.
• 🌐 Language Exchange Matchmaking: An onboarding flow where users set their native and learning languages. The application's recommendation engine matches users looking for mutual exchange.
• 🤝 Social Friend Request Pipeline: Complete social loop where users can view recommendations, send requests, and accept/reject pending requests.
• 🟢 Live Presence tracking: Socket.io-driven connection tracking that displays the count of active online users in real-time.
• 🎨 Immersive Multi-Theme UI: Gorgeous user interface utilizing TailwindCSS and DaisyUI supporting dynamic themes (Dark/Light, retro, synthwave, cyberpunk, etc.), and animated using Framer Motion.

---

🛠️ Technology Stack

Layer	Technologies & Tools
Frontend	React 19, Vite, TailwindCSS, DaisyUI, Framer Motion, React Router v7, Zustand, Axios, TanStack React Query
Backend	Node.js, Express, Socket.io, JWT (JSON Web Tokens)
Database	MongoDB (using Mongoose ODM)
Third-Party APIs	GetStream (StreamChat & StreamVideo)

---

🔍 Deep-Dive Project Breakdown

To understand how Zync functions under the hood, let's look at the core design patterns and implementation flows:

1. User Authentication & Lifecycle

• Secure Sign Up & Log In: The authentication system uses bcrypt for server-side password hashing. Successful authentication generates a stateless JSON Web Token (JWT) on the backend that is sent to the client to authorize subsequent requests.
• Onboarding Phase: Upon signup, users are guided to an onboarding page where they provide profile particulars including location, a short bio, their native language, and the language they are learning. Completion of this onboarding updates their profile state, setting isOnboarded to true and allowing access to the main dashboard.
• GetStream Syncing: In tandem with signup and onboarding, the backend invokes the GetStream API via upsertStreamUser, syncing the user details (name, avatar, ID) to the GetStream cloud server. This ensures they are instantly recognizable for chatting and calling services.

2. Social Matchmaking & Connection Flow

• Matchmaking Recommendations: The matchmaking system searches the MongoDB User collection to locate all other onboarded users that:
  1. Are not the logged-in user.
  2. Are not already in the user's friend list. Matching recommendations are then served to the frontend dashboard.
• Bidirectional Friend Pipeline:
  • Sending Requests: When a user requests a connection, a new FriendRequest document is created in the database with status pending.
  • Accepting Requests: The recipient accepts the request, changing the status to accepted and updating both users' friends lists concurrently using MongoDB's atomic $addToSet operator.

3. Integrated Chat & Video SDKs (GetStream)

• Token Generation: On the backend, getStreamToken generates a unique JWT signature using the STREAM_API_SECRET to authenticate the user against Stream's servers.
• Rich Chat Panels: The client initializing the Stream Chat SDK offers full support for message threads, typing state, read receipts, text editing, and media uploads.
• HD Voice & Video Calls: Utilizing @stream-io/video-react-sdk, Zync allows users to start or join voice and video call channels in real-time. Features include dynamic grid layouts, participant list visibility, call state handlers, and local mute controls.

4. Socket.io Live Presence

• Socket Server: A lightweight Socket.io instance runs alongside the HTTP Express server.
• Active Count Broadcasting: Whenever a client connects or disconnects, the server increments or decrements a global onlineUsersCount variable and broadcasts it to all connected sockets using io.emit("update_online_users", count).

5. Unified Theming Store (Zustand & daisyUI)

• Theming: The client uses Zustand state management to persist user theme preferences in local storage.
• Dynamic daisyUI Skins: Themes are dynamically injected into the root layout element using the data-theme attribute (e.g. dark, light, synthwave, cyberpunk, retro), rendering the corresponding DaisyUI color palette instantly across all pages.

---

📐 System Architecture & Flow

The following diagram represents the data flow, socket communication, API calls, and integration with third-party servers:

graph TD
    subgraph Client ["Client (React + Vite)"]
        UI["UI Pages & Layout (App.jsx, Tailwind, daisyUI, Framer Motion)"]
        ZQ["React Query & Axios (API Requests)"]
        ZS["Zustand Stores (Auth, Theme)"]
        StreamSDK["Stream SDKs (Chat & Video calls)"]
        SocketIO_C["Socket.io Client (Presence Count)"]
    end

    subgraph Server ["Server (Node.js + Express)"]
        AuthM["Auth Middleware (JWT Validation)"]
        AuthC["Auth Controller (Signup, Login, Onboard)"]
        UserC["User Controller (Friends, Requests, Profiles)"]
        ChatC["Chat Controller (Stream Token Generation)"]
        SocketIO_S["Socket.io Server (Tracks & Broadcasts Active Connections)"]
    end

    subgraph External ["External Services"]
        MongoDB[("MongoDB (Mongoose)")]
        StreamAPI["GetStream API (Chat & Video Cloud)"]
    end

    %% Client Interactions
    UI --> ZQ
    UI --> ZS
    UI --> StreamSDK
    UI --> SocketIO_C

    %% API Requests
    ZQ -->|HTTP Requests with JWT| AuthM
    AuthM --> AuthC
    AuthM --> UserC
    AuthM --> ChatC

    %% Real-time Sockets
    SocketIO_C <-->|update_online_users| SocketIO_S

    %% Stream Connections
    StreamSDK <-->|Real-time Media & Messages| StreamAPI

    %% Server to DB and External Services
    AuthC -->|Read/Write User Data| MongoDB
    UserC -->|Read/Write Friend Request Data| MongoDB
    AuthC -->|Upsert User| StreamAPI
    ChatC -->|Generate User Tokens| StreamAPI

Loading

---

📁 Directory Structure

zync/
├── backend/                 # Node.js + Express Backend
│   ├── src/
│   │   ├── controllers/     # Controller logic (Auth, User, Chat token generation)
│   │   ├── lib/             # Mongoose DB and GetStream SDK instances
│   │   ├── middleware/      # JWT route protection middleware
│   │   ├── models/          # Mongoose Schemas (User, FriendRequest)
│   │   ├── routes/          # Express Routers
│   │   └── server.js        # Main Express and Socket.io server entry point
│   ├── .env.example         # Example backend environment variables
│   └── package.json
├── frontend/                # React + Vite Frontend
│   ├── src/
│   │   ├── components/      # Reusable components (Layout, PageLoader, etc.)
│   │   ├── constants/       # App-wide constants (themes, options)
│   │   ├── hooks/           # Custom React hooks
│   │   ├── pages/           # Pages (Home, Login, Signup, Chat, Call, Profile, Friends, Onboarding)
│   │   ├── store/           # Zustand state management stores
│   │   ├── App.jsx          # Route declarations and app entry wrapper
│   │   ├── index.css        # Global CSS & Tailwind utilities
│   │   └── main.jsx         # Render node setup
│   ├── .env.example         # Example frontend environment variables
│   ├── tailwind.config.js   # Tailwind & DaisyUI configuration
│   ├── vite.config.js       # Vite build configurations
│   └── package.json
├── package.json             # Root-level configuration for package management
└── README.md

---

👤 Authors & Contributors

• Adnan Rizvi - Creator & Lead Developer - @adnan275

---

Enjoy your real-time chats and calls with Zync! 🚀