Přeskočit na hlavní obsah

Architektura systému

DnA Cruises je postaven na Cloudflare stacku s následující architekturou.

Přehled​

Systém je monorepo s následujícími komponentami:

  • Frontend aplikace (Next.js) - deployovány přes Cloudflare Pages
  • API Worker (Cloudflare Workers) - centrální backend API
  • Databáze (Cloudflare D1) - SQLite databáze
  • Storage (Cloudflare R2) - objektové úložiště pro soubory

Komponenty​

Frontend Aplikace​

Web App (apps/web)​

  • Framework: Next.js 14+ (App Router)
  • Styling: Tailwind CSS
  • Deployment: Cloudflare Pages
  • URL:
    • Production: dna.cruises
    • Development: dev.dna.cruises
  • Účel: Hlavní webová aplikace pro správu systému
    • Dashboard
    • Správa Items, Assets, Kits, Projects
    • Load Planning interface
    • Users management (Admin)
    • Settings (passkeys, 2FA)

Load App (apps/load)​

  • Framework: Next.js 14+ (App Router)
  • Styling: Tailwind CSS
  • Deployment: Cloudflare Pages
  • URL:
    • Production: load.dna.cruises
    • Development: dev.load.dna.cruises
  • Účel: Nakládková aplikace optimalizovaná pro mobilní zařízení a týmy
    • Load Session interface s QR scanningem
    • Real-time status updates
    • PWA support (plánováno)

Docs (apps/docs)​

  • Framework: Docusaurus
  • Deployment: Cloudflare Pages
  • Účel: Dokumentace systému
    • Technická dokumentace
    • Uživatelská příručka
    • API dokumentace

Backend​

API Worker (workers/api)​

  • Platform: Cloudflare Workers
  • Language: TypeScript
  • Deployment: Cloudflare Workers Builds (automatický) nebo Wrangler CLI (manuální)
  • URL:
    • Production: api.dna.cruises
    • Development: dev.api.dna.cruises
  • Funkce:
    • RESTful API pro všechny frontend aplikace
    • Autentizace (JWT, Passkeys, 2FA, OAuth)
    • Business logika (collision detection, kit completeness, load calculation)
    • Audit logging

Storage​

D1 Database​

  • Type: SQLite (distribuovaná přes Cloudflare edge)
  • Databáze:
    • dna-cruises-dev - Development
    • dna-cruises-prod - Production
  • Použití: Všechna relační data (users, items, assets, projects, kits, load sessions, audit log)

R2 Storage​

  • Type: Object storage (S3-compatible)
  • Buckets:
    • dna-cruises-files-dev - Development
    • dna-cruises-files-prod - Production
  • Použití: Soubory (obrázky, PDF, dokumenty)

Data Flow​

Standardní Request Flow​

User Browser
  ↓
Frontend App (Next.js)
  ↓ (HTTPS)
API Worker (Cloudflare Workers)
  ↓
D1 Database / R2 Storage
  ↓
Response
  ↓
Frontend App
  ↓
User Browser

Autentizace Flow​

1. User → Frontend: Login credentials
2. Frontend → API: POST /auth/login
3. API → D1: Verify credentials
4. API → Frontend: JWT token
5. Frontend: Store token in localStorage
6. Frontend → API: All subsequent requests with Authorization: Bearer <token>
7. API: Verify JWT token on each request

Load Session Scan Flow​

1. User scans QR code
2. Frontend → API: POST /load-sessions/:id/scan { scan_id }
3. API → D1: Find asset/kit by scan_id
4. API → D1: Check if in plan, check collisions
5. API → Frontend: Response (loaded / requiresConfirmation / collision)
6. Frontend: Show confirmation dialog if needed
7. Frontend → API: POST /load-sessions/:id/scan/confirm
8. API → D1: PLAN_ADD + SCAN_LOAD events
9. API → Frontend: Success

Bezpečnost​

Autentizace​

  • JWT Tokens: HS256 algoritmus, 7 denní expirace
  • Passkeys: WebAuthn s server-side signature verification
  • 2FA: TOTP (RFC 6238) nebo SMS
  • OAuth: Google OAuth s state token (CSRF protection)

Autorizace​

  • Role-based access control (RBAC):
    • Loader - základní operace (skeny, qty)
    • Producer - vše jako Loader + správa project kits
    • Admin - plný přístup včetně správy global kits a users

Data Protection​

  • Všechna data jsou vázaná na uživatele
  • Audit log zaznamenává všechny důležité akce
  • Collision detection zabraňuje konfliktům při plánování
  • Constant-time comparison pro citlivé operace (passwords, 2FA codes)

Monorepo Struktura​

navigator/
├── apps/
│   ├── web/          # Next.js web app (main management interface)
│   ├── load/         # Next.js load app (mobile-optimized loading)
│   └── docs/         # Docusaurus docs
├── packages/
│   ├── api/          # Shared API types and utilities
│   ├── db/           # Database schema & migrations
│   └── ui/           # Shared UI components
├── workers/
│   └── api/          # Cloudflare Worker API (backend)
└── scripts/          # Utility scripts

Deployment Flow​

Automatický (CI/CD)​

  1. Push do GitHub (main nebo dev branch)
  2. Cloudflare Workers Builds detekuje push
  3. Build spustí wrangler deploy --env <environment>
  4. Deploy worker s bindings z wrangler.toml
  5. Cloudflare Pages detekuje push
  6. Build spustí build command z konfigurace
  7. Deploy statické soubory na Pages

Manuální​

# Workers
cd workers/api
wrangler deploy --env production

# Pages (po build)
cd apps/web && npm run build
wrangler pages deploy .next --project-name=dna-cruises-web

Scaling​

  • Workers: Automaticky škálují podle load
  • D1: Replikace přes Cloudflare edge
  • R2: Globálně distribuované
  • Pages: CDN caching pro statické soubory

Monitoring​

  • Workers Logs: Cloudflare Dashboard → Workers & Pages → [Worker] → Logs
  • Pages Logs: Cloudflare Dashboard → Pages → [Project] → Deployments
  • Build Status: Cloudflare Dashboard → Builds
  • Analytics: Cloudflare Analytics (pokud povolené)