> ## Documentation Index
> Fetch the complete documentation index at: https://docs.remind.tools/llms.txt
> Use this file to discover all available pages before exploring further.

# System Design

> High-level system architecture and component interactions

# System Design

High-level system architecture documentation for Remind Tools.

## System Overview

```mermaid theme={null}
graph TB
    subgraph "Client Layer"
        A[Flutter Apps]
        B[Web App]
    end
    
    subgraph "API Layer"
        C[Supabase API]
        D[Edge Functions]
    end
    
    subgraph "Data Layer"
        E[(PostgreSQL)]
        F[Object Storage]
    end
    
    subgraph "External Services"
        G[Gemini AI]
        H[MapBox]
    end
    
    A --> C
    B --> C
    C --> D
    D --> E
    D --> F
    D --> G
    D --> H
```

## Component Architecture

### Frontend Components

* **Presentation Layer**: Flutter widgets and screens
* **State Management**: BLoC + Riverpod
* **Navigation**: GoRouter with deep linking
* **Local Storage**: Hive for offline data

### Backend Components

* **API Gateway**: Supabase REST/GraphQL
* **Authentication**: Supabase Auth with JWT
* **Real-time**: WebSocket connections
* **Functions**: Edge Functions for business logic

## Data Flow

<Steps>
  <Step title="User Action">
    User interacts with Flutter UI
  </Step>

  <Step title="State Update">
    BLoC processes action and updates state
  </Step>

  <Step title="API Call">
    Repository layer makes API request
  </Step>

  <Step title="Backend Processing">
    Edge Function handles business logic
  </Step>

  <Step title="Data Persistence">
    PostgreSQL stores/retrieves data
  </Step>

  <Step title="Response">
    Data flows back through layers to UI
  </Step>
</Steps>

## Scalability Considerations

* Horizontal scaling via Supabase
* CDN for static assets
* Database connection pooling
* Caching strategies
* Load balancing