Projektarchitektur

E-Cashpoint Web ist eine SPA (Single Page Application), die mit React 18 + Vite erstellt wurde, mit einem Microservices-Backend.

Technologie-Stack

Frontend

Tecnología	Versión	Uso
React	18.3	Framework UI
Vite	7.x	Build tool / dev server
React Router	6.x	Routing SPA
styled-components	6.x	CSS-in-JS
framer-motion	11.x	Animaciones
react-i18next	15.x	Internacionalización
react-leaflet	4.x	Mapas
recharts	2.x	Gráficos
Stripe.js	4.x	Pagos

Backend (Microservices)

Servicio	URL	Responsabilidad
Login Service	login.e-smartpoints.de	Autenticación (Keycloak)
Gateway API	gateway.e-smartpoints.de	API principal
Users Data	(interno)	Perfiles, wallets, referidos
Commerce Catalog	(interno)	Productos, menús
Commerce Operations	(interno)	Pedidos, POS
Billing	(billing.e-smartpoints.de)	Suscripciones, Stripe
Feeds Service	(interno)	Marketing, posts
Super Admin API	(interno)	Panel admin

Worker-/Edge-Funktionen

Worker	Plataforma	Función
example-WORKER.JS	Cloudflare Workers	Generación de imágenes (OpenAI gpt-image-1.5, Gemini), video (Gemini Veo 3.1), eliminación de fondo (Poof), plantillas (Orshot), texto (Gemini)
fal-WORKER.JS	Cloudflare Workers	Generación de imágenes (Fal.ai Recraft v3) y video (Pixverse v6, LTX 2.3 Fast) con Upstash Redis
Logo Generator	Cloudflare Workers	Generación de logos con IA (Puter/gpt-image-1) con Turnstile y límites en IndexedDB

Ordnerstruktur

E-CASHPOINT-WEB/
├── src/
│   ├── components/          # Componentes reutilizables
│   │   ├── dashboard/       # Módulos del dashboard
│   │   └── *.jsx            # Componentes globales
│   ├── pages/               # Páginas (rutas)
│   │   ├── billing/         # Checkout success/cancel
│   │   └── *.jsx
│   ├── modules/             # Módulos por perfil de comercio
│   │   ├── restaurantes/    # Restaurantes (bar, cafetería, fast food)
│   │   │   ├── pages/
│   │   │   ├── components/
│   │   │   └── config/
│   │   ├── servicios/       # Servicios (peluquería, spa, etc.)
│   │   └── superAdmin/
│   ├── services/            # Clientes API (apiFetch)
│   ├── state/               # Estado global (auth, businessProfile)
│   ├── styles/              # styled-components globales + temas
│   ├── i18n/                # Sistema de internacionalización
│   │   ├── index.js
│   │   └── locales/
│   │       ├── de.json
│   │       ├── en.json
│   │       └── es.json
│   ├── App.jsx              # Configuración de rutas
│   ├── main.jsx             # Entry point
│   └── theme.js
├── public/                  # Assets estáticos
├── dist/                    # Build output
├── docs/                    # Esta documentación (Docusaurus)
├── package.json
└── vite.config.js

Handelsprofile

Die Anwendung unterstützt 3 Handelsprofile, jedes mit spezifischen Modulen:

// src/config/subtypes.js
export const profileConfig = {
  restaurantes: { 
    subtypes: ['restaurant', 'bar', 'cafeteria', 'fast_food'],
    modules: ['menu', 'orders', 'tables', 'inventory', 'kitchen']
  },
  servicios: {
    subtypes: ['service', 'beauty'],
    modules: ['agenda', 'citas', 'personal']
  },
  productos: {
    subtypes: ['product', 'technology', 'fashion', 'home'],
    modules: ['catalog', 'pos', 'inventory']
  }
};

Datenfluss

┌──────────┐   login    ┌──────────┐   token   ┌──────────────┐
│  Cliente  │──────────▶│  Keycloak│──────────▶│  localStorage │
└──────────┘            └──────────┘            └──────────────┘
                                                      │
                                                      ▼
┌──────────┐  REST/JSON  ┌──────────────────────────────────────┐
│ Frontend │◀──────────▶│   Gateway API (Cloudflare Workers)   │
└──────────┘             └──────────────────────────────────────┘
                                  │            │
                                  ▼            ▼
                         ┌──────────┐    ┌──────────┐
                         │ Users DB │    │ Billing  │
                         └──────────┘    └──────────┘

Authentifizierung

• 🔐 OAuth 2.0 / OpenID Connect mit Keycloak
• 🎫 JWT mit benutzerdefinierten Ansprüchen (roles, realm_access)
• 💾 Token in localStorage gespeichert (access_token)
• ⏰ Automatische Aktualisierung vor Ablauf
• 🔒 2FA für Superadministratoren verfügbar

Designmuster

• 🎨 Komponentenzusammensetzung über Vererbung
• 📦 Benutzerdefinierte Hooks für wiederverwendbare Logik
• 🎯 Container-/Präsentationskomponenten
• 💅 styled-components mit Theme-Anbieter
• 🌐 i18n zentralisiert mit Kontext

Nächste Schritte

• Kennen Sie die Anwendungsrouten →
• Erfahren Sie mehr über i18n-System →