67 lines
6.9 KiB
Markdown
67 lines
6.9 KiB
Markdown
# 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 |
|
|
|
|
---
|