Ein Blick hinter die Kulissen
Wie Geyer Rezepte
eigentlich funktioniert
Vom Klick im Browser bis zum Rezept auf dem Teller – ein kleiner Rundgang durch die Technik dahinter.
Die Küchenübersicht
Drei Stationen, ein Kreislauf
Dein Browser stellt die Bestellung, Supabase ist die Küche, und eine kleine Funktion sorgt dafür, dass dich am Ende auch eine Benachrichtigung erreicht.
Dein Gerät
Browser oder
installierte App
Service Worker
Cache + Empfang
von Push-Nachrichten
Supabase
Postgres-Datenbank
+ Bilder-Speicher
Edge Function
Verschickt die
Benachrichtigung
Push-Dienst
Von Google/Apple
bereitgestellt
Station 1
Die Speisekarte – ganz ohne Framework
Kein React, kein Vue – jede Seite ist eine eigene, schlichte HTML-Datei. Das hält die App schnell, verständlich und leicht wartbar.
index.html
Login mit Familienmitglied + Passwort
EINSTIEGhome.html
Startseite mit den zwei Hauptwegen
NAVIGATIONbrowse.html
Alle Rezepte der Familie durchsuchen
LISTErecipe.html
Details, Portionen anpassen, Likes
DETAILadd.html
Neues Rezept erstellen oder bearbeiten
FORMULARcook.html
Schritt-für-Schritt-Kochmodus
MODUSsettings.html
Benachrichtigungen ein-/ausschalten
EINSTELLUNGENsupport.html
FAQ und Kontakt
HILFEDrei Dateien, die überall mitlaufen
Damit sich Code nicht wiederholt, teilen sich alle Seiten drei Bausteine, die im Ordner codes/ liegen:
- shared.css – Farben, Schriften und Bausteine wie Buttons oder Karten als CSS-Variablen
- shared.js – Login-Logik, Datenbank-Zugriffe, Toasts, das Tutorial
- config.js – Familienmitglieder, Passwörter und der Wartungsschalter
const FAMILY_MEMBERS = [
{ key: "robert", name: "Robert", … },
{ key: "rolf", name: "Rolf", … },
// …weitere Familienmitglieder
];
// jede Seite lädt dieselben Bausteine:
<script src="codes/config.js"></script>
<script src="codes/shared.js"></script>
Die Küche: Supabase
Statt eines eigenen Servers übernimmt Supabase die Datenhaltung – eine gehostete Postgres-Datenbank mit eingebautem Bilder-Speicher. Der Browser spricht sie direkt an, über einen öffentlichen, aber eingeschränkten Zugriffsschlüssel.
So bleibt die App ohne eigenes Backend lauffähig: Rezepte, Likes und Benachrichtigungs-Einstellungen liegen zentral in der Cloud, statt lokal auf einem Gerät.
Eine App ohne App Store
Die manifest.json macht die Seite installierbar – mit eigenem Icon, Namen und Startbildschirm. Der Service Worker (sw.js) cached dabei bewusst nur stabile Dateien wie Stylesheets und Icons.
- HTML-Seiten werden nie gecacht – jede Ansicht kommt immer frisch vom Server
- Rezeptdaten kommen live aus Supabase, nie aus dem Cache
- Ein einzelner Fehler beim Caching blockiert nie den Zugriff auf die App
Wie eine Benachrichtigung entsteht
Setzt jemand ein ❤️ oder ein neues Rezept online, reicht der Browser das Ereignis an eine Edge Function bei Supabase weiter – eine winzige, serverlose Funktion, die genau einen Zweck hat: die Nachricht an den Push-Dienst des jeweiligen Betriebssystems zu übergeben.
Der Service Worker wartet still im Hintergrund und zeigt sie an, sobald sie ankommt – mit dem eigenen App-Icon statt eines grauen Platzhalters.
Jede Person wählt selbst, worüber sie informiert werden möchte – gespeichert pro Familienmitglied.
Ein Familientor statt einem Passwort-Formular
Anstelle eines klassischen Logins wählt man einfach sein eigenes Gesicht aus der Familie und gibt das persönliche Passwort ein. Die Liste der Mitglieder liegt zentral in config.js – neue Personen hinzuzufügen bedeutet nur eine neue Zeile.
Jede Person kann anschließend ausschließlich ihre eigenen Rezepte bearbeiten oder löschen – fremde lassen sich nur mit ❤️ markieren.