Zum Inhalt

System Architecture

🎯 High-Level Overview

**MORELO Dealer Suite** ist eine Edge-first Plattform für Premium Reisemobile mit 7 Hauptschichten: 
graph TB
    CUSTOMER["👤 CUSTOMER LAYER<br/>Website, Konfigurator, Portal"]
    FRONTEND["⚡ FRONTEND LAYER<br/>SvelteKit, i18n, Offline-First"]
    API["🚀 API GATEWAY<br/>SonicJS, Auth, Rate Limiting"]
    BUSINESS["💼 BUSINESS LOGIC<br/>CRM, Configurator, Workflows"]
    DATA["🗄️ DATA LAYER<br/>D1, R2, KV, Queues"]
    INTEGRATIONS["🔌 INTEGRATIONS<br/>Payment, ERP, MS365, Hardware"]
    SECURITY["🔐 SECURITY & OPS<br/>OWASP, Monitoring, CI/CD"]

    CUSTOMER --> FRONTEND
    FRONTEND --> API
    API --> BUSINESS
    BUSINESS --> DATA
    BUSINESS --> INTEGRATIONS
    API --> SECURITY

    classDef customer fill:#e1f5ff,stroke:#01579b,stroke-width:4px,color:#000,font-size:16px
    classDef frontend fill:#f3e5f5,stroke:#4a148c,stroke-width:4px,color:#000,font-size:16px
    classDef api fill:#fff3e0,stroke:#e65100,stroke-width:4px,color:#000,font-size:16px
    classDef business fill:#e8f5e9,stroke:#1b5e20,stroke-width:4px,color:#000,font-size:16px
    classDef data fill:#fff9c4,stroke:#f57f17,stroke-width:4px,color:#000,font-size:16px
    classDef integrations fill:#e0f2f1,stroke:#004d40,stroke-width:4px,color:#000,font-size:16px
    classDef security fill:#ffccbc,stroke:#bf360c,stroke-width:4px,color:#000,font-size:16px

    class CUSTOMER customer
    class FRONTEND frontend
    class API api
    class BUSINESS business
    class DATA data
    class INTEGRATIONS integrations
    class SECURITY security

📋 Layer Details

👤 Customer Layer

Klick zum Aufklappen - Alle Customer Touchpoints 
graph LR
    WEB["🌐 morelo.de<br/>Next.js Website"]
    KONFIG["🎨 Konfigurator<br/>SvelteKit App"]
    EPAPER["📱 E-Paper Display<br/>ESP32 + 7.5″"]
    PORTAL["🔐 Customer Portal<br/>Order Tracking"]

    WEB --> KONFIG
    KONFIG --> PORTAL
    PORTAL -.->|Real-time| EPAPER

    classDef customer fill:#e1f5ff,stroke:#01579b,stroke-width:3px
    class WEB,KONFIG,EPAPER,PORTAL customer
**Components:** - **Website:** Public landing page, product info - **Konfigurator:** Interactive 3D builder, real-time pricing - **E-Paper Display:** IoT device for production updates - **Portal:** Authenticated customer dashboard

⚡ Frontend Layer

Klick zum Aufklappen - Frontend Stack Details 
graph TB
    SVELTE["SvelteKit 2.x<br/>SSR + CSR Hybrid"]
    I18N["🌍 i18n<br/>DE/EN/FR/IT/NO/SE"]
    OFFLINE["💾 Offline-First<br/>Service Worker + IndexedDB"]
    UI["🎨 UI Components<br/>@morelo/ui - Tailwind CSS 4.0"]

    SVELTE --> I18N
    SVELTE --> OFFLINE
    SVELTE --> UI

    classDef frontend fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    class SVELTE,I18N,OFFLINE,UI frontend
**Tech Stack:** - **SvelteKit 2.x:** Server-side rendering + client-side hydration - **i18n:** 6 languages (DE, EN, FR, IT, NO, SE) - **Offline-First:** Works without internet, syncs when online - **Tailwind CSS 4.0:** Utility-first styling **Links:** - [SvelteKit Docs](https://kit.svelte.dev) - [Tailwind CSS 4.0](https://tailwindcss.com)

🚀 API Gateway

Klick zum Aufklappen - API Gateway Architecture 
graph TB
    SONIC["SonicJS CMS<br/>Hono.js Router<br/>Auto API Generation"]
    AUTH["🔐 Authentication<br/>JWT + RBAC"]
    RATE["⚡ Rate Limiting<br/>Cloudflare KV<br/>1000 req/min"]

    SONIC --> AUTH
    SONIC --> RATE

    classDef backend fill:#fff3e0,stroke:#e65100,stroke-width:2px
    class SONIC,AUTH,RATE backend
**Components:** - **SonicJS:** Headless CMS with auto-generated REST APIs - **Auth:** JWT tokens + Role-Based Access Control - **Rate Limiting:** 1000 requests/minute per IP **Links:** - [SonicJS GitHub](https://github.com/lane711/sonicjs) - [Hono.js](https://hono.dev)

💼 Business Logic

Klick zum Aufklappen - Business Logic Layer 
graph TB
    CRM["📊 CRM Core<br/>Models, Customers<br/>Quotes, Activities"]
    CONFIG["⚙️ Configurator Engine<br/>Price Calculator<br/>Dependency Resolver<br/>PDF Generator"]
    WORKFLOW["🔄 Workflow Engine<br/>Lead → Quote → Order<br/>State Machine"]

    CRM --> CONFIG
    CONFIG --> WORKFLOW

    classDef business fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px
    class CRM,CONFIG,WORKFLOW business
**Features:** - **CRM:** Customer management, activity tracking - **Configurator:** Real-time price calculation, 3D preview - **Workflows:** Automated lead-to-order pipeline

🗄️ Data Layer

Klick zum Aufklappen - Cloudflare Data Storage 
graph TB
    D1["Cloudflare D1<br/>SQLite at Edge<br/>Drizzle ORM"]
    R2["Cloudflare R2<br/>Object Storage<br/>PDFs, Images, Docs"]
    KV["Cloudflare KV<br/>Key-Value Cache<br/>Sessions, Rate Limits"]
    QUEUE["Cloudflare Queues<br/>Background Jobs<br/>Email, Sync, Reports"]

    D1 -.->|Backup| R2
    KV -.->|TTL| QUEUE

    classDef data fill:#fff9c4,stroke:#f57f17,stroke-width:2px
    class D1,R2,KV,QUEUE data
**Storage:** - **D1:** SQLite database at Cloudflare Edge (low latency) - **R2:** S3-compatible object storage (PDFs, images) - **KV:** Fast key-value store (cache, sessions) - **Queues:** Asynchronous job processing **Links:** - [Cloudflare D1](https://developers.cloudflare.com/d1) - [Cloudflare R2](https://developers.cloudflare.com/r2)

🔌 Integrations

Klick zum Aufklappen - External System Integrations 
graph TB
    subgraph PAYMENT["💳 Payment & Financing"]
        KLARNA["Klarna<br/>36-120 Mo Financing<br/>USDC Stablecoin"]
        TARGO["Targo Bank<br/>SEPA Instant<br/>PSD2 AIS"]
    end

    subgraph ERP["📈 ERP & Accounting"]
        SEVDESK["sevDesk<br/>Invoices, Inventory<br/>DATEV Export"]
    end

    subgraph MS365["☁️ Microsoft 365"]
        OUTLOOK["📧 Outlook/Exchange"]
        TEAMS["💬 MS Teams"]
        BOOKINGS["📅 MS Bookings"]
    end

    subgraph PRODUCTION["🏗️ Production"]
        PLANE["Plane.so<br/>Project Management<br/>Sprint Tracking"]
    end

    KLARNA --> SEVDESK
    SEVDESK --> PLANE
    OUTLOOK -.-> SEVDESK

    classDef payment fill:#fff9c4,stroke:#f57f17,stroke-width:3px
    classDef erp fill:#fce4ec,stroke:#880e4f,stroke-width:2px
    classDef ms365 fill:#e3f2fd,stroke:#0d47a1,stroke-width:2px
    classDef production fill:#e0f2f1,stroke:#004d40,stroke-width:3px

    class KLARNA,TARGO payment
    class SEVDESK erp
    class OUTLOOK,TEAMS,BOOKINGS ms365
    class PLANE production
**Integrated Systems:** | System | Purpose | Link | |--------|---------|------| | **Klarna** | Payment financing 36-120 months | [API Docs](https://docs.klarna.com) | | **Targo Bank** | SEPA Instant payments | [Open Banking](https://www.openbankingtracker.com/provider/targobank-de) | | **sevDesk** | Invoicing & accounting | [API](https://api.sevdesk.de) | | **Plane.so** | Production management | [Docs](https://docs.plane.so) | | **MS Graph** | Email, Calendar, SharePoint | [Docs](https://learn.microsoft.com/en-us/graph) |

🔐 Security & Operations

Klick zum Aufklappen - Security & Monitoring 
graph TB
    subgraph SECURITY["🔐 Security"]
        OWASP["OWASP Top 10<br/>SQL Injection Prevention<br/>XSS Protection"]
        ENCRYPTION["Encryption<br/>TLS 1.3 in Transit<br/>AES-256 at Rest"]
        RBAC["RBAC Roles<br/>Admin, Manager, Agent"]
        GDPR["GDPR Compliance<br/>EU Data Residency<br/>Right to Delete"]
    end

    subgraph MONITORING["📊 Monitoring"]
        SENTRY["Sentry<br/>Error Tracking"]
        ANALYTICS["Cloudflare Analytics<br/>Traffic, Cache Hits"]
    end

    subgraph CICD["🚀 CI/CD"]
        GITHUB["GitHub Actions<br/>Lint + Test + Deploy"]
        WRANGLER["Wrangler CLI<br/>Cloudflare Deploy"]
    end

    OWASP --> ENCRYPTION
    ENCRYPTION --> RBAC
    RBAC --> GDPR
    SENTRY -.-> ANALYTICS
    GITHUB --> WRANGLER

    classDef security fill:#ffccbc,stroke:#bf360c,stroke-width:3px
    classDef monitoring fill:#d7ccc8,stroke:#3e2723,stroke-width:2px
    classDef cicd fill:#b2dfdb,stroke:#00695c,stroke-width:2px

    class OWASP,ENCRYPTION,RBAC,GDPR security
    class SENTRY,ANALYTICS monitoring
    class GITHUB,WRANGLER cicd
**Security:** - ✅ OWASP Top 10 compliance - ✅ TLS 1.3 + AES-256 encryption - ✅ Role-Based Access Control (Admin, Manager, Agent, Customer) - ✅ GDPR compliant (EU data residency) **Monitoring:** - [Sentry](https://sentry.io) for error tracking - Cloudflare Analytics for performance metrics **CI/CD:** - GitHub Actions for automated testing - Wrangler CLI for Cloudflare deployment

🔗 Complete Flow Example

Klick zum Aufklappen - End-to-End Customer Journey 
graph TB
    A["👤 Customer visits<br/>morelo.de"] --> B["🎨 Opens Konfigurator"]
    B --> C["⚙️ Configures motorhome<br/>Real-time price"]
    C --> D["💰 Quote accepted<br/>Klarna financing"]
    D --> E["📧 Confirmation email<br/>MS Graph API"]
    E --> F["🏗️ Production starts<br/>Plane.so project"]
    F --> G["📱 E-Paper updates<br/>Customer's device"]
    G --> H["✅ Delivery scheduled<br/>MS Bookings"]

    classDef customer fill:#e1f5ff,stroke:#01579b,stroke-width:2px
    classDef process fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px

    class A,B,C customer
    class D,E,F,G,H process
**Timeline:** 1. **Day 1:** Customer configures, gets instant quote 2. **Day 2-3:** Financing approval (Klarna) 3. **Week 1:** Production project created (Plane.so) 4. **Weeks 2-30:** Build phases with real-time E-Paper updates 5. **Week 31:** Delivery appointment (MS Bookings)

📚 Further Reading

🎨 Interactive Viewer

Want to explore this architecture interactively?

👉 Open in Mermaid Live Editor

  1. Copy diagram code from this page
  2. Paste into editor
  3. Zoom, pan, export to PNG/SVG!

Last Updated: 15. Januar 2026
Documentation: main.morelo-dealer-suite.pages.dev