# 2. High-Level Architecture

## System Architecture Diagram

```
┌─────────────────────────────────────────────────────────────────────────────┐
│                              DOFUS MANAGER                                   │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌─────────────────────────────────────────────────────────────────────┐    │
│  │                         CLIENT (Browser)                             │    │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌────────────┐  │    │
│  │  │   React     │  │  TanStack   │  │  TanStack   │  │  Zustand   │  │    │
│  │  │   Components│  │   Router    │  │   Query     │  │  (UI State)│  │    │
│  │  └─────────────┘  └─────────────┘  └─────────────┘  └────────────┘  │    │
│  └─────────────────────────────────────────────────────────────────────┘    │
│                                    │                                         │
│                                    │ Server Functions (RPC)                  │
│                                    ▼                                         │
│  ┌─────────────────────────────────────────────────────────────────────┐    │
│  │                     SERVER (TanStack Start)                          │    │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌────────────┐  │    │
│  │  │   Server    │  │    Zod      │  │   Prisma    │  │  node-cache│  │    │
│  │  │  Functions  │  │  Validation │  │    ORM      │  │  (Cache)   │  │    │
│  │  └─────────────┘  └─────────────┘  └─────────────┘  └────────────┘  │    │
│  └─────────────────────────────────────────────────────────────────────┘    │
│                                    │                                         │
│                                    ▼                                         │
│  ┌─────────────────────────────────────────────────────────────────────┐    │
│  │                        DATABASE (PostgreSQL)                         │    │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌────────────┐  │    │
│  │  │  Characters │  │   Accounts  │  │   Teams     │  │Progressions│  │    │
│  │  └─────────────┘  └─────────────┘  └─────────────┘  └────────────┘  │    │
│  └─────────────────────────────────────────────────────────────────────┘    │
│                                                                              │
│  ┌─────────────────────────────────────────────────────────────────────┐    │
│  │                      EXTERNAL SERVICES                               │    │
│  │  ┌─────────────────────────────────────────────────────────────┐    │    │
│  │  │                    DofusDB API                               │    │    │
│  │  │            (Classes, Quêtes, Donjons, Succès)                │    │    │
│  │  └─────────────────────────────────────────────────────────────┘    │    │
│  └─────────────────────────────────────────────────────────────────────┘    │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘
```

## Data Flow

```
User Action → React Component → TanStack Query → Server Function → Prisma → PostgreSQL
     ↑                                                                           │
     └───────────────────────── Response ────────────────────────────────────────┘
```

## Key Architectural Decisions

| Decision | Choice | Rationale |
|----------|--------|-----------|
| Full-stack Framework | TanStack Start | Type-safe, modern React, server functions |
| Database | PostgreSQL | Robust, JSON support, full-text search |
| ORM | Prisma | Type-safe queries, excellent DX |
| State Management | TanStack Query + Zustand | Server state vs UI state separation |
| Styling | Tailwind + shadcn/ui | Rapid development, consistent design |
| Deployment | Docker + Traefik | Easy SSL, reverse proxy, scalable |

---