# System Architecture

## 1. High-Level Overview

**Duo Sync Auth** is a Single Page Application (SPA) designed to provide secure authentication and real-time data synchronization. The application leverages a **Serverless** architecture, delegating backend responsibilities (Auth, Database, Websockets) to **Supabase**.

## 2. Technology Stack

### Frontend Layer
* **Framework:** React (v18) with TypeScript for type safety.
* **Build System:** Vite for fast development and optimized production builds.
* **State Management:** TanStack Query (React Query) for server state caching and synchronization.
* **Routing:** React Router DOM.
* **UI/UX:** Tailwind CSS for styling and shadcn/ui for accessible component primitives.

### Backend Layer (BaaS)
* **Platform:** Supabase.
* **Database:** PostgreSQL.
* **Authentication:** Supabase GoTrue (handles JWT tokens and Row Level Security).
* **Real-time:** Supabase Realtime (Websockets) for listening to database changes instantly.

## 3. Architecture Diagram

```mermaid
graph TD
    User[End User] -->|HTTPS| CDN[Vite Host (Vercel/Netlify)]
    User -->|Interacts| Client[React Client]
    
    subgraph Frontend
        Client -->|Navigation| Router[React Router]
        Client -->|Data Fetching| Query[TanStack Query]
        Client -->|UI Components| UI[Shadcn/UI]
    end
    
    subgraph Supabase Backend
        Client -->|Auth API| Auth[GoTrue Auth]
        Client -->|REST/GraphQL| DB[PostgreSQL Database]
        Client -->|Websockets| Realtime[Realtime Service]
    end

    Auth -->|Session Token| Client
    Realtime -->|Live Updates| Client
