Headerpicture

Von der Notion-Site zur eigenen Rezepte-App

Ursprünglich habe ich unsere Rezeptsammlung in Notion verwaltet. Die Notion-Site war schnell eingerichtet, aber für eine ansprechende Präsentation zu unflexibel. Ich habe das Frontend neu gebaut, um volle Kontrolle über Design und Funktionalität zu haben.

Die alte Site, als Notion-Site:

Die Motivation

Die Notion-Site war okay, aber Grenzen waren schnell erreicht:

  • Begrenzte Anpassungsmöglichkeiten am Design

  • Keine individuellen Layouts

  • Schwierig, eigene Interaktionsmuster umzusetzen

Das Ziel: Eine eigene App, die die Vorteile von Notion als Backend nutzt, aber mit vollem Gestaltungsspielraum.

Der Tech-Stack

  • Next.js 15 mit App Router

  • TypeScript

  • Tailwind CSS

  • Notion API als Backend

Die Herausforderungen

1. Notion API Integration

Die Rezepte liegen weiterhin in Notion. Die App lädt sie über die Notion API und präsentiert sie im eigenen Design. Besonders wichtig war die Verarbeitung von Rich-Text-Inhalten mit Formatierungen (fett, kursiv, Listen).

2. Flexible Kategorisierung

Kategorien in Notion (z.B. "Hauptspeisen", "Pasta") werden im Frontend zu Hauptkategorien und Unterkategorien gemappt. Die Konfiguration ist zentral in config/categories.ts hinterlegt.

3. Bilder und Focal Points

Notion unterstützt Focal Points für Bilder. Die App nutzt diese, um Cover-Bilder optimal zu positionieren.

4. Länder-Flags und Icons

Rezepte können Länder-Emojis als Icons haben. Die App konvertiert diese zu SVG-Flags mit react-country-flag, für andere Icons werden Emojis direkt angezeigt.

Die Features

  • Kategorien-Navigation: Filterung nach Frühstück, Vorspeisen, Hauptspeisen, Suppen, Nachspeisen, Dessert

  • Modal-Darstellung: Klick auf ein Rezept öffnet eine Modal-Ansicht mit vollständigem Inhalt

  • Sidebar-Navigation: Detailseite mit Sidebar für schnellen Wechsel zwischen Rezepten

  • Responsive Design: Funktioniert auf Desktop, Tablet und Smartphone

  • Rich-Text-Rendering: Notion-Formatierungen (Überschriften, Listen, fett, kursiv) bleiben erhalten

  • Vegetarische Filter: Markierung vegetarischer Optionen

  • Tags: Kategorisierung über Tags

Die Architektur

Die App nutzt Next.js API Routes, die die Notion API aufrufen. Mit revalidate wird der Cache nach einer Stunde aktualisiert. Ein /api/revalidate Endpoint erlaubt manuelles Cache-Invalidieren.

Die Datenstruktur trennt sauber zwischen:

  • Notion-Daten: Original-Datenbankstruktur

  • Frontend-Daten: Transformierte Daten für die UI

  • Config: Zentrale Mapping-Konfigurationen

Deployment

Die App läuft auf https://recipes.meimberg.io und wird über GitHub Actions automatisch gebaut und deployed. Docker sorgt für eine reproduzierbare Build-Umgebung.

Das Ergebnis

Zugegebenermaßen noch nicht ganz perfekt - aber nah dran. Server Side Rendering und Caching sollte noch optimiert werden. Aber hey, für 2-3 Stunden Hacking schon mal nicht schlecht.

Was als Nächstes kommt

  1. Edit-Masken: Rezepte direkt in der App bearbeiten

  2. Backend-Migration: Optionaler Wechsel zu Spring Boot + MySQL, um unabhängig von Notion zu sein

Für jetzt funktioniert die Lösung mit Notion als Backend gut und bietet die gewünschte Flexibilität im Frontend.

Fazit

Die Kombination aus Notion als Backend und Next.js im Frontend bietet einen guten Balance zwischen Flexibilität und Einfachheit. Die Rezepte bleiben in Notion verwaltbar, während die Präsentation vollständig anpassbar ist.

Die App ist live unter https://recipes.meimberg.io – schaut gerne vorbei.

Dieser Artikel wurde mit Cursor AI geschrieben – einem mächtigen Tool, das auch die Entwicklung dieser App deutlich beschleunigt hat.

Nachsatz: Dieser Satz wurde von mir geschrieben, und mir fällt auf, dass Cursor durchaus zum Eigenlob neigt...

https://recipes.meimberg.io/