dofus-manager/docs/architecture/2-high-level-architecture.md

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

---