Spliddy

Die App “Spliddy” ist während meines Auslandssemesters in Turku, Finnland, entstanden. Ziel war es, eine App zu entwickeln, mit der Ausgaben erfasst und zwischen mir und meinem WG-Mitbewohner aufgeteilt werden können. Da wir einen gemeinsamen Einkaufszettel hatten, wollten wir eine einfache Möglichkeit haben, die Einkaufszettel einzuscannen und die Ausgaben automatisch zu erfassen und zwischen uns aufzuteilen.

Backend

Backend-seitig habe ich mich für NestJS entschieden, da dieses Framework eine native Unterstützung für OpenAPI hat und ich durch mein Studium bereits mit diesem Framework vertraut war. Als Datenbank ORM habe ich mich für Prisma entschieden. Für die automatische Auswertung und Übersetzung der Kassenzettel habe ich die Gemini-API benutzt, da es dort ein Free Tier gibt, das für dieses Projekt komplett ausreichend war.

Die Herausforderung bei diesem Projekt war vor allem die intelligente Entwicklung der Logik zum Aufteilen der Ausgaben zwischen den Gruppenmitgliedern.

Frontend

Als Frontend habe ich mich für die Entwicklung einer cross-platform App mit React Native entschieden. Um einige nützliche Bibliotheken nutzen zu können, habe ich hierfür Expo verwendet. Da in diesem Projekt vor allem die Funktionalität im Vordergrund stand, habe ich mich für die Komponenten-Bibliothek React Native Reusables entschieden.

Es gibt 4 Hauptseiten in der App:

• Startseite: Hier werden die Gruppen angezeigt, in denen der Nutzer Mitglied ist. Es gibt außerdem die Möglichkeit eine neue Gruppe zu erstellen.
• Ausgabenübersicht: Hier werden die Ausgaben der jeweiligen Gruppe angezeigt. Es gibt die Möglichkeit Ausgaben und Transaktionen zwischen den Gruppenmitgliedern hinzuzufügen.
• Kassenzettelscan: Hier können Kassenzettel eingescannt werden
• Ausgabenerfassung: Hier können Ausgaben manuell angelegt werden. Die Kassenzettel-Scan Seite leitet nach dem Scan auf diese Seite weiter.

Da das Backend eine OpenAPI Spezifikation bereitstellt, konnte die API-Client Library automatisch generiert werden. Hierfür habe ich das Package Orval verwendet, das für unterschiedliche HTTP-Client Libraries passende Generatoren bereitstellt. In diesem Projekt habe ich mich für SWR entschieden, da dieses Package bereits Caching, Revalidierung und Loading-States mitbringt.