# Duo Sync Auth

A modern, scalable web application built with React, TypeScript, and Supabase. This project implements a secure authentication flow and real-time data synchronization architecture, utilizing a high-performance frontend stack for an optimal user experience.

## 🚀 Technology Stack

This project is built on a modern foundation of best-in-class tools:

* **Frontend Framework:** [React](https://reactjs.org/) (v18+)
* **Language:** [TypeScript](https://www.typescriptlang.org/) for static typing and code safety.
* **Build Tool:** [Vite](https://vitejs.dev/) for lightning-fast HMR and bundling.
* **Styling:** [Tailwind CSS](https://tailwindcss.com/) for utility-first styling.
* **UI Components:** [shadcn/ui](https://ui.shadcn.com/) for accessible, reusable component patterns.
* **Backend & Auth:** [Supabase](https://supabase.com/) (PostgreSQL, GoTrue, Realtime).

---

## 🏗️ System Architecture

The application follows a **Client-Server-Database** architecture where the client communicates directly with Supabase services.

### High-Level Data Flow

```mermaid
graph TD
    User[User Device] -->|HTTPS| CDN[Content Delivery / Vite Host]
    User -->|Interacts| App[React Application]

    subgraph Client Layer
        App -->|Routing| Router[React Router]
        App -->|State Mgmt| Query[TanStack Query]
        App -->|UI Render| DOM[Virtual DOM]
    end

    subgraph Backend Layer (Supabase)
        App -->|Auth Requests| Auth[GoTrue Auth]
        App -->|Data Fetch/Mutate| DB[PostgreSQL Database]
        App -->|Realtime Sub| Socket[Realtime WebSocket]
    end

    Auth -->|JWT Token| App
    DB -->|JSON Data| App