Notiz App
Noch eine Notiz- und Einkaufslisten-App? Brauchen wir so was? Ja. Und zwar mit KI: Zettel vom Kühlschrank oder Rezept fotografieren, Claude liest die Einträge, rechnet Rezeptmengen in Einkaufsmengen um und ergänzt, was schon auf der Liste steht. Drumherum eine schlanke PWA für zwei, die im Funkloch weiterschreibt und sich live abgleicht.
Zum Ausprobieren: Einkaufsliste öffnen, auf das Scan-Symbol neben „Neuer Eintrag“ tippen und einen Beispielzettel lesen lassen. Oder das Handy offline schalten, etwas abhaken, Mia mitschreiben lassen – und wieder online gehen.
-
01
Alles auf einen Blick
Suchleiste, Filter für Listen, Notizen, Geteiltes und das Archiv, angepinnte Notizen oben. Die Suche findet auch Einträge in Listen. In der App archiviert ein Wisch nach links, langes Drücken wählt mehrere Notizen auf einmal aus.
-
02
Listen, die mitdenken
Beim Tippen kommen Vorschläge aus früheren Listen, „2 Milch“ wird zum Mengen-Badge, und eine aus WhatsApp kopierte Liste zerfällt beim Einfügen in einzelne Einträge. Abgehaktes wandert nach unten. Wer den letzten Eintrag abhakt, bekommt Konfetti.
-
03
Foto-Scan mit KI Der Clou
Foto vom handgeschriebenen Zettel oder Screenshot vom Rezept: Claude Haiku 5.5 liest die Einträge über einen n8n-Workflow. Zettel kommen 1:1, Rezepte werden umgerechnet („250 g Mehl“ wird „1 Packung Mehl“). Steht etwas schon auf der Liste, wird die Menge ergänzt. Ob „Pink Lady“ dasselbe ist wie „Äpfel“, entscheidet das Modell, gerechnet wird im Code. Nichts landet ungeprüft in der Liste, und danach gibt es „Rückgängig“.
-
04
Zu zweit, in Echtzeit
Eine geteilte Liste ändert sich bei beiden sofort, oben steht, wer gerade drin ist. Bearbeiten dürfen alle Beteiligten, löschen nur, wer die Liste angelegt hat. Im Mockup spielt „Mia“ die zweite Person.
-
05
Funkloch im Supermarkt
Jede Änderung landet zuerst in einer Warteschlange auf dem Gerät und wird übertragen, sobald wieder Netz da ist. Die Wolke oben zählt, was noch wartet. Nur der Foto-Scan braucht Netz und sagt das, bevor man fotografiert.
-
06
Fünf Designs und Kleinkram
Hell, Dunkel, Schwarz für den Akku, das kantige „Life OS“ und „Arielle“. Dazu Notizfarben, Fotos an Notizen, Teilen aus dem Android-Menü in die App und ein Backup als JSON-Datei.
Das Problem
Zwei Menschen, ein Kühlschrank, ein Einkaufszettel – und der hängt meistens zu Hause, während einer von beiden im Laden steht. Fertige Apps können geteilte Listen, aber die Einkaufsliste eines Haushalts muss nicht auf fremden Servern liegen. Und selbst mit der besten App bleibt die eigentliche Wiederholung: Der handgeschriebene Zettel und das Rezept vom Handy werden Zeile für Zeile abgetippt. Genau das sollte weg.
Der Aufbau
Die App ist eine installierbare PWA mit Next.js 16 und React 19, PocketBase auf dem eigenen Server übernimmt Konten, Daten und Realtime. Jede Änderung landet zuerst in einer IndexedDB-Warteschlange und wird übertragen, sobald Netz da ist; geteilte Listen gleichen sich über PocketBase live ab, inklusive Anzeige, wer gerade in der Liste ist.
Der Foto-Scan geht einen eigenen Weg: Der Browser verkleinert das Foto auf 2048 Pixel (das entfernt nebenbei die GPS-Daten) und schickt es an den eigenen Server. Der prüft die Sitzung und ruft einen n8n-Workflow auf, der Claude Haiku 5.5 mit festem Antwortschema fragt. n8n schreibt nie selbst in die Datenbank: Die Vorschläge landen in einer Prüfansicht und gehen erst nach der Bestätigung den normalen Weg über die Warteschlange.
Die harte Nuss
Steht „Pommes“ schon auf der Liste und auf dem Zettel noch einmal, soll daraus „2 Pommes“ werden – kein zweiter Eintrag. Das klingt nach einem Textvergleich, ist aber keiner: „Pink Lady“ meint „Äpfel“ und „Pommes frites“ meint „Pommes“, aber „Butter“ ist nicht „Buttermilch“ und „Milchreis“ nicht „Milch“.
Die Lösung teilt die Arbeit nach dem, was jede Seite gut kann. Die App schickt die aktuelle Liste mit (nur Text und Haken, höchstens 150 Einträge), und das Modell sagt je gelesenem Eintrag nur, welcher Listeneintrag dasselbe Produkt meint. Gerechnet wird im Code, und nur dort, wo es eindeutig ist: Ohne Zahl zählt ein Eintrag als 1, Gramm und Kilo werden umgerechnet; Bereiche wie „2-3 Bananen“ oder Stück gegen Packungen bleiben unaddiert und werden zur Prüfung vorgelegt. Abgehakte Einträge werden wieder aktiviert statt aufsummiert. Am echten Workflow gemessen: sechs von sechs Zuordnungen richtig, die Gegenproben eingeschlossen.
Verworfen
- Claude direkt aus dem Next.js-Server aufrufen: Der Weg über n8n war ausdrücklich gewollt – der Prompt lässt sich dort ändern, ohne die App neu auszurollen.
- n8n schreibt die erkannten Einträge selbst in die Datenbank: Handschrift-Erkennung irrt, und die Liste ist geteilt. Deshalb erst die Prüfansicht, dann der normale Schreibweg.
- Streaming der Antwort: Haiku braucht wenige Sekunden, Streaming über einen n8n-Webhook hätte Aufwand ohne spürbaren Gewinn gebracht.
- Wischen zum Löschen: Eine fremde geteilte Notiz darf nur ihr Besitzer löschen, der Wisch kann das nicht unterscheiden. Jetzt archiviert der Wisch, gelöscht wird nur über das Menü.
Qualität
- 135 automatisierte Tests in 11 Dateien laufen grün (Stand 28.10.2026); Lint, Typprüfung und Tests laufen in der CI vor jedem Image-Build.
- Lighthouse mobil auf der angemeldeten Startseite: Barrierefreiheit 100 (vorher 94) und Best Practices 100 (12.10.2026).
- Foto-Scan abgesichert: Sitzungsprüfung auf dem eigenen Server, höchstens 30 Scans pro Stunde und Person, der Webhook nur mit Header-Schlüssel. Das Foto wird nicht gespeichert.
- Geschlossenes System ohne offene Registrierung. Zugriffsregeln in PocketBase: Geteilte Notizen dürfen alle Beteiligten bearbeiten, löschen und das Teilen beenden nur der Besitzer.
Ergebnis und Gelerntes
Die App läuft im Alltag für zwei Personen, der Foto-Scan ist seit dem 13.10.2026 in Produktion; im Test nach dem Ausrollen kam die Antwort nach 4,2 Sekunden. Als Nächstes steht eine Qualitätsmessung mit zwölf echten Fotos an – das Testset ist vorbereitet, gelaufen ist sie noch nicht.
Gelernt: Auf dem Handy meldete der Scan „Sitzung abgelaufen“, obwohl die Sitzung gültig war. Die Ursache war das Netz, nicht die Anmeldung: Der Container erreichte PocketBase über die öffentliche Adresse desselben Servers nicht, und die Route meldete jeden Fehler als „abgelaufen“. Seitdem unterscheidet sie „abgelehnt“ von „nicht erreichbar“ und schreibt die Ursache ins Log. Eine Fehlermeldung, die die falsche Ursache nennt, kostet mehr Zeit als der Fehler selbst.