// case study mobile
Fischly
Ein Fullstack-Fishing-Companion in React Native für die bayerische Fischerprüfung: Lernflows, Statistik, Loadouts, katalogbasierte Produktsuche, Karten und ein Fastify/PostgreSQL-Backend.
// tl;dr — hat's funktioniert?
// der Auslöser
Das Problem
Fischly begann mit dem offiziellen Fragenkatalog der bayerischen Fischerprüfung, einer druckorientierten Quelle, die zu verlässlichen App-Daten werden musste. Mit dem Wachstum des Produkts erweiterte sich dieselbe Herausforderung auf Ausrüstung, Loadouts, Kartenorte, Fänge und Fotos: Jeder Workflow brauchte normalisierte serverseitige Daten statt fragilem rein lokalem State.
// das Setup
Kontext & Rahmenbedingungen
Fischly begann als Lern-App für die bayerische Fischerprüfung und entwickelt sich zu einem umfassenden Begleiter für Angler. Das Projekt umfasst eine Expo/React-Native-App, Fastify-APIs, Prisma/PostgreSQL-Datenmodelle, einen gemeinsamen typisierten API-Client, Import-Workflows, Deployment und produktionssichere Wartungsskripte.
// meine Entscheidungen
Entscheidungen & Tradeoffs
Prüfungsmaterial in eine wartbare Datenquelle verwandeln
Der offizielle Fragenkatalog verändert sich über die Zeit und umfasst mehr als tausend Fragen. Fischly hält diese Quelle als strukturierte Fragendaten mit geprüften Korrekturen und wiederholbaren Importen, statt auf manuelle App-Updates zu setzen.
Ausrüstung als normalisierte Katalogdaten modellieren
Loadouts referenzieren Produktvarianten für Ruten, Rollen, Schnüre und Köder, statt Katalogfelder zu duplizieren. Die Produktsuche kombiniert eine kuratierte Katalogdatenquelle mit eigener Ausrüstung, Herstellerfiltern, Attributen, Preisen und Bildern.
Mobile-App, Backend-API und Shared Packages im TypeScript-Monorepo trennen
Gemeinsame Typen und API-Verträge reduzieren Duplikate zwischen React-Native-App, Fastify-Backend, Lernflows, Loadouts, Produktsuche und Kartenfeatures und halten die einzelnen Schichten unabhängig wartbar.
// wie's zusammenpasst
Architektur
Strukturierte Prüfungsdaten, katalogbasierte Ausrüstungsdaten und Karten-/Gewässerdaten laufen über eine Fastify-API in PostgreSQL und die React-Native-App. Gemeinsame TypeScript-Pakete liefern typisierte Verträge über den gesamten Stack.
// die harten Teile
Zentrale Herausforderungen
- Druckorientiertes Prüfungsmaterial in eine strukturierte, aktualisierbare Fragenquelle verwandeln.
- Ausrüstungsvarianten und Attribute normalisieren, damit Produktsuche und Loadouts konsistente Details anzeigen können.
- Lernstand, Ausrüstung, Karten, Fänge und Fotos hinter typisierten, validierten Backend-Verträgen halten.
// ist es live gegangen?
Ergebnis
Eine produktionsreife Mobile-Plattform mit strukturierten Prüfungsdaten, API-gestütztem Lernstand, Statistik, Prüfungssimulation, Fehlertraining, normalisierter Ausrüstungssuche/Loadouts und integrierter Angelkarte.
// im Nachhinein, 20/20
Das nächste Produktrisiko liegt darin, die wachsenden Datenbereiche einfach aktualisierbar, validierbar und sicher betreibbar zu halten, während sich die App von der Prüfungsvorbereitung zu einem breiteren Angelbegleiter entwickelt.
Stack
- React Native
- Expo
- Expo Router
- TypeScript
- Fastify
- Prisma
- PostgreSQL
- Zod
- TanStack Query
- Node.js
- Docker
- Maestro