Produktdesign · Marke · Full-Stack · 2026
Otra MesaGutes Essen verdient einen zweiten Tisch.
Ein fast echtes Food-Rescue-Produkt für Barranquilla — drei Apps, echte Reservierungen, simulierte Zahlungen und ein QR-Abholcode, auf einem Stack, den ich selbst gebaut habe und hoste.
Jeden Abend wird gutes Essen weggeworfen, nur weil der Tag vorbei ist. Otra Mesa verkauft es als „Überraschung des Hauses“ für ein Drittel des Preises: weniger Verschwendung, ein fairer Erlös für das Restaurant, neue Gäste aus der Nachbarschaft.
- Meine Rolle — alles: Marke, Produktdesign, Designsystem, Frontend, Backend und die Server, auf denen es läuft.
- Das Produkt — drei Apps auf einer API, für Gäste, für Restaurants und für den Admin.
- Wie echt — Konten, Reservierungen, Abholcodes, Bewertungen und Benachrichtigungen funktionieren wirklich. Nur das Geld ist simuliert, mit Testkarten.
- Wo — Barranquilla, Kolumbien — eine funktionierende Demo mit Beispiel-Restaurants. Gebaut und gehostet von mir in Deutschland.
Entdecken, eine Überraschung und die Karte. Reservieren, bezahlen und heute mit einem QR-Code abholen.
Drei Apps, eine API
| App | Was sie kann |
|---|---|
| Gäste-App, für Leute in der Nähe | entdecken und Karte, reservieren und bezahlen, Abholung per QR, Favoriten, Bewertungen, gerettetes Essen |
| Portal für Betriebe, für das Team im Restaurant | Aufnahme beantragen, Überraschungen veröffentlichen (immer mindestens 30 % günstiger), QR scannen, Team einladen, Einnahmen sehen |
| Admin-Büro, für mich | Restaurants freigeben, Reservierungen, Zahlungen und Auszahlungen, Nutzer, Bewertungen, ein Protokoll jeder Aktion |
Das Portal für Betriebe lebt auf dem Handy an der Theke. Die Oberfläche ist auf Spanisch.
Das Admin-Büro: jede Reservierung aller Restaurants, sobald sie eingeht.
Design: ruhig und systematisch
Ruhig als Grundhaltung. Ein weißer Hintergrund, eine einzige Textfarbe, eine Schrift. Das Grün des Logos trägt die Hauptaktionen; Terrakotta bleibt kleinen Details vorbehalten — Sterne, Etiketten, der aktive Tab. Uhrzeiten stehen so da, wie man sie in Barranquilla sagt: 5:15–5:45 p. m.
Eine Quelle für drei Apps. Jede Farbe, Größe, Rundung und jeder Schatten ist ein Token: neun Schriftgrößen, zwölf Abstände, fünf Radien, vier Schatten, sechs farbenblind-sichere Diagrammfarben und ein dunkler Modus für die Werkzeuge der Betriebe.
Dokumentiert, getestet und live. Elf echte Komponenten — dieselben, die die drei Apps nutzen — in einem öffentlichen Katalog, jede hell und dunkel, mit ihrer Prüfung auf Barrierefreiheit. Unit- und Typtests laufen bei jeder Änderung; Code und Tokens sind öffentlich auf GitHub, mit semantischen Versionen. Die Geschichte dahinter steht im Musterbuch mit 45 Seiten.
Live aus dem Katalog: die Überraschungskarten. Zum Wischen — das ist die Komponente selbst, kein Bild davon.
Designsystem live ↗ · Code auf GitHub ↗ · Musterbuch (PDF, 45 Seiten) ↗
Technik: die schwierigen Stellen
| Problem | Meine Lösung |
|---|---|
| „In der Nähe“, auf den Meter | MongoDB mit 2dsphere-Index und $geoNear; Postgres bleibt das offizielle Register. Per Haversine geprüft. |
| Die letzte nie doppelt verkaufen | Der Bestand sinkt in einem einzigen atomaren Schritt: zwei Personen, eine Überraschung, eine Reservierung. |
| Geld, ohne echtes Geld | Bei der Reservierung autorisiert, bei der Abholung belastet, beim Storno freigegeben, erstattbar — mit 20 % Provision und Auszahlungen. Nur Testkarten; gespeichert werden nur die letzten vier Ziffern. |
| Anmelden ohne Passwort | Google (OpenID Connect mit PKCE) oder ein sechsstelliger Code per E-Mail: nur als Fingerabdruck gespeichert, läuft ab, verfällt nach fünf Versuchen. |
| Hier Inhaber, dort im Team | Ein Konto, mehrere Schlüssel. Einladungen per E-Mail werden bei der ersten Anmeldung zu Schlüsseln; ein Restaurant verliert nie seinen letzten Inhaber. |
| Rechtzeitig Bescheid geben | Web Push: eine neue Reservierung für das Team, „Abholung in 30 Minuten“ für den Gast. |
Betrieben wie ein echtes Produkt
Nach dem Start habe ich gemessen, gekürzt und wieder gemessen — auf einem Mittelklasse-Handy mit langsamem 4G, Median aus drei Ladevorgängen:
| Langsames 4G | Vorher | Nachher |
|---|---|---|
| Entdecken · geladen | 1.918 KB | 664 KB (−65 %) |
| Entdecken · Hauptbild sichtbar | 10,1 s | 3,5 s |
| Daten pro Ansicht | 141 KB | 15 KB |
- Bei jeder Änderung getestet — drei Roboter gehen den ganzen Weg: 98 Prüfungen für Gäste, Betriebe, den Admin und beide Farbmodi.
- Getestete Backups — jede Nacht eine Kopie, getestet durch Wiederherstellen; jede Datenbankänderung erst an einer Kopie geprobt.
- Eine Blackbox für Fehler — GlitchTip auf meinem eigenen Server, mit Source Maps, die nie veröffentlicht werden. Keine personenbezogenen Daten, nach 30 Tagen gelöscht.
- Ein ehrliches Dashboard — jede Zahl mit Vergleich und n, jedes Diagramm auch als Tabelle. Beispieldaten sind immer gekennzeichnet.
- Automationen, die sich melden — n8n schickt einen Morgenbericht, einen Wochenbericht an jedes Restaurant und eine Warnung, wenn eine Aufgabe fehlschlägt. Sein Datenbanknutzer liest nur, was die Berichte brauchen.
Die Konsole listet jede automatische Aufgabe, und eine, die nicht mehr läuft, erscheint als verspätet. Der Wochenbericht geht an jedes Restaurant — hier mit einem Demo-Restaurant und Beispieldaten. Die Oberfläche ist auf Spanisch.
Barrierefrei von Anfang an
Jede Ansicht geprüft nach WCAG 2.2 AA — dem Standard hinter dem Barrierefreiheitsstärkungsgesetz (BFSG) — erst von einem Roboter, dann von Hand, angemeldet als Gast, als Restaurant und als Admin.
| Was nicht stimmte | Was sich geändert hat |
|---|---|
| Das Foto jeder Karte war ein Button ohne Namen: Ein Screenreader sagte nur „Button, Button, Button” | Der Name darunter öffnet die Überraschung; das Foto bleibt eine Abkürzung für den Finger |
| Auf der Karte verschwand der Tastaturfokus fast (2,6:1) | Ein dunkler Rahmen mit Abstand, auf jeder Straße sichtbar — einmal behoben, im Designsystem |
| Vergangene Reservierungen waren auf 70 % abgeblendet, der Text fiel auf 2,9:1 | Jetzt verblasst nur das Foto; der Text bleibt lesbar |
| Beim Wechsel der Ansicht wussten Tastatur- und Screenreader-Nutzer nicht, wo sie sind | Der Fokus springt zum neuen Titel, und der Browser-Tab sagt, wo man ist |
Das Ergebnis: 14 von 14 öffentlichen Ansichten, 18 von 18 im Backoffice und 8 von 8 im Portal für Restaurants ohne Befund, hell und dunkel. Erklärung zur Barrierefreiheit (Englisch) ↗
Stack
Frontend — React · React Router · Vite · Leaflet + OpenStreetMap
Backend — Node.js · Express · Postgres · MongoDB · Web Push · Google OpenID Connect
Infrastruktur — Hetzner Deutschland · Docker · Caddy · GlitchTip · n8n · Monorepo