Frontend
Tech Stack
| Komponente | Technologie |
|---|---|
| Framework | React 19 + TypeScript |
| Build Tool | Vite 7 |
| Routing | React Router DOM 7 |
| Auth | Supabase (managed) |
| State | React Hooks + localStorage |
| Styling | Custom CSS (Glassmorphic Design) |
Seiten / Routen
| Route | Seite | Beschreibung |
|---|---|---|
/login | Login | Anmeldung / Registrierung via Supabase |
/ | Dashboard | Aktiver Plan, Tages-Predictions |
/setup/bookmaker | Bookmaker Setup | Wizard: Anbieter waehlen + Einzahlung |
/setup/plan | Plan Setup | Wizard: Risiko, Ziel, Budget, Quote |
/plan/:id | Plan Detail | Run Table, aktive Wetten, Historie |
Auth Flow
- User landet auf
/login(oeffentliche Route) - Registrierung (Name, Email, Passwort) oder Login
- Supabase verwaltet Auth-State via JWT
- Geschuetzte Routen per
AuthGuard(redirect zu Login wenn nicht eingeloggt) - Sign-out loescht Session
Design System
- Farben: Deep Blue Background (
#070b14), Cyan Glow (#00d4ff), Purple (#8b5cf6), Green (#00ff88), Red (#ff3366), Gold (#ffd700) - Fonts: Inter (Body), JetBrains Mono (Zahlen/Betraege)
- Komponenten: Glass Cards (blur + backdrop filter), Pill Buttons, Risk Cards
- Animationen: Fade-in, Heart Break/Gain, Confetti bei Gewinn
- Responsive: Breakpoint bei 640px, Flex/Grid Layouts
State Management
Kein globaler Store - jeder Feature-Bereich hat einen eigenen Hook:
| Hook | localStorage Key | Funktion |
|---|---|---|
useBookmakers() | ba_bookmakers | Wettanbieter verwalten |
usePlans() | ba_plans | Wettplaene CRUD |
useBets() | ba_bets | Wetten + Ergebnisse |
Jeder Hook bietet refresh() zum Neuladen nach Aenderungen.
Betting Flow
- Dashboard zeigt Tages-Predictions von API (
/api/v1/predictions/{date}) - User klickt Pick → Modal mit Details (Match, Liga, Tipp, Quote, Einsatz, Gewinn)
- Bestaetigung → Wette in localStorage gespeichert
- Plan-Detail zeigt aktive Wette mit Win/Loss Buttons
- Win: Lives Reset + Bankroll waechst, Loss: 1 Leben weniger
Run Table
Mathematische Einsatz-Berechnung:
r = quote / (quote - 1)(Martingale-Faktor)- Konstanter Profit pro Runde
- Rekursive Berechnung ueber alle Runden
- Visualisierung mit Fortschrittsbalken zum Ziel
Build & Deployment
# Development
cd /home/hlorenz/lite/frontend
npm run dev # Vite Dev Server auf :5173, Proxy zu API :3030
# Production Build
npm run build # Output in dist/
# Deployment
# Static Files in dist/ werden von Nginx served
# API Proxy ueber Nginx location /api/ → localhost:3030
Verzeichnisstruktur
frontend/
├── src/
│ ├── main.tsx # Entry Point
│ ├── App.tsx # Router Setup
│ ├── pages/ # Seiten-Komponenten
│ ├── components/ # Shared Components
│ ├── hooks/ # Custom Hooks (useStore, useAuth)
│ ├── styles/ # CSS Dateien
│ └── lib/ # Utilities, Supabase Client
├── dist/ # Production Build Output
├── vite.config.ts # Vite Config mit API Proxy
└── package.json