Technische Dokumentation

Unter der Haube

Ein detaillierter Einblick in die Architektur, Tools und Designentscheidungen hinter MunchCoach.

Architekturübersicht

MunchCoach folgt einer modernen Drei-Schichten-Architektur mit klarer Aufgabentrennung.

Client

Nuxt 4 / Vue 3 SPA mit serverseitigem Rendering, TailwindCSS, Pinia-Stores und i18n

Server

Nitro-Server-Engine mit API-Routen, Cerebras-KI-Integration und SSE-Streaming

Datenbank

Supabase mit PostgreSQL, Row Level Security, RPC-Funktionen und Discord OAuth

Cerebras KI

LLM-Inferenz-API für den KI-Rezept-Chat mit Tool-Calling-Fähigkeiten

Technologie-Stack

Jede Technologie wurde aus einem bestimmten Grund gewählt — hier ist warum.

TypeScript / JavaScript

Kernsprache für den gesamten Stack

Nuxt 4 / Vue 3

Full-Stack Vue-Framework

TailwindCSS 4

Utility-First CSS-Framework

Supabase

Open-Source Backend-as-a-Service

Pinia

State Management für Vue

Cerebras Cloud SDK

KI-Inferenz für den Rezept-Chat

VueUse

Sammlung von Composition-API-Utilities

NuxtWind

Vorgefertigte Tailwind-Komponenten

Vercel

Serverlose Deployment-Plattform

Cloudflare

DNS und Edge-Netzwerk

KI-Chat-Workflow

Wie MunchCoach aus einer Nutzernachricht eine personalisierte Rezeptantwort erstellt.

  1. 1Nutzer sendet eine Nachricht über die Chat-Oberfläche
  2. 2Nitro-API-Endpunkt empfängt die Anfrage und authentifiziert den Nutzer
  3. 3Cerebras LLM (gpt-oss-120b) verarbeitet die Nachricht mit Systemkontext
  4. 4LLM entscheidet, welche Tools aufgerufen werden (z. B. Vorrat durchsuchen, Rezepte finden)
  5. 5Server führt Supabase-RPC-Funktionen für jeden Tool-Aufruf aus
  6. 6Tool-Ergebnisse werden für die nächste Iteration an das LLM zurückgegeben
  7. 7LLM generiert die endgültige Antwort
  8. 8Antwort wird über Server-Sent Events (SSE) an den Client gestreamt

Verfügbare KI-Tools

Vorratsinventar des Nutzers abrufen
Zutatendatenbank durchsuchen
Einkaufslisten des Nutzers abrufen
Rezepte mit optionalen Zutatenfiltern suchen
Produktkatalog nach Zutat durchsuchen
Neuen Artikel zum Vorrat hinzufügen
Einen oder mehrere Artikel aus dem Vorrat entfernen
Verfügbare Maßeinheiten abrufen
Neue Einkaufsliste erstellen
Artikel zur Einkaufsliste hinzufügen
Einen oder mehrere Artikel aus einer Einkaufsliste entfernen
Rezepte finden, die mit dem aktuellen Vorrat kochbar sind

Datensicherheit & RPC-Architektur

Wie Nutzerdaten auf jeder Ebene geschützt werden.

Row Level Security (RLS)

Jede Tabelle in der Supabase-Datenbank ist durch Row-Level-Security-Richtlinien geschützt. Diese Richtlinien stellen sicher, dass jeder Nutzer nur seine eigenen Daten lesen und ändern kann — durchgesetzt direkt auf PostgreSQL-Ebene. Selbst wenn Frontend- oder API-Code kompromittiert würde, würde die Datenbank selbst den unbefugten Zugriff auf die Daten anderer Nutzer verhindern.

Nur RPC-basierte KI-Tools

Alle 12 KI-Chat-Tools führen Supabase-RPC-Funktionen aus, anstatt Datenlogik im Node.js-Backend auszuführen. Das bedeutet, dass komplexe Abfragen — wie der Abgleich von Vorratsartikeln mit Rezeptanforderungen — direkt in PostgreSQL laufen, unmittelbar neben den Daten. Das Ergebnis ist eine deutlich niedrigere Latenz und weniger Datentransfer im Vergleich zum Laden von Rohdaten in den Server. Darüber hinaus erzwingen RPC-Funktionen eigene Zugriffsregeln innerhalb der Datenbank, was eine zusätzliche Sicherheitsebene darstellt.

Deployment & Hosting

Wie MunchCoach vom Code zur Produktion gelangt.

Entwickler pusht Code in das GitHub-Repository

Vercel löst automatisch einen Build vom Hauptbranch aus

Die Nuxt-Anwendung wird als Serverless Function auf Vercels Edge-Netzwerk deployed

Cloudflare verwaltet DNS-Routing und bietet CDN-Caching, SSL und DDoS-Schutz

Nutzer greifen über die benutzerdefinierte Domain auf die Anwendung zu