Projekt - Fremdwährungs-Kurs Rechner
Eine Full-Stack App, die es Benutzern ermöglicht aktuelle Währungskurse im Blick zu behalten
Wie die App funktioniert
Mithilfe dieser Anwendung können 55 verschiedene Währungskurse miteinander verglichen werden. Benutzer können einen Geldbetrag eingeben, den sie senden möchten, und sehen, wie dieser in Echtzeit umgewandelt wird. Sie können die Optionen „Senden” und „Empfangen” auswählen. Währungen aus einem Picker mit Suchfunktion auswählen. Außerdem können die „Senden”- und „Empfangen”-Währungen über eine Schaltfläche getauscht werden. Das aktive Paar kann als Favorit hinzugefügt werden und alle Umrechnungen lassen sich im Log abspeichern.
Zudem sehen die Nutzer einen Liveticker mit verschiedenen Währungspaaren und deren aktuellem Kurs sowie der prozentualen Veränderung in den letzten 24 Stunden. Darüber hinaus wird ein Liniendiagramm mit dem Kurs des aktiven Paares angezeigt.
Benutzern wird ein Log mit den von ihnen durchgeführten Umrechnungen angezeigt. Logs können als CSV-Datei exportiert werden. Favoriten und Logs werden in einer Datenbank gespeichert. Deshalb hat man die Möglichkeit, einen Account anzulegen oder mit einem Gästeaccount fortzufahren. Gästeaccounts können später mit einem bestehenden Google-Account verlinkt werden.
Genutzte Technologien
Mobile-first
Next.js
React
TailwindCSS
Supabase
Accessibility
Was ich gelernt habe
Dies war das erste große Projekt, das ich mit dem Next.js App Router umgesetzt habe. Ich habe gelernt, wie man server- und clientseitiges Routing implementiert und wie ein Proxy funktioniert. Zusätzlich habe ich einige neue Tailwind-Klassen kennengelernt und erfahren, wie man Supabase mit serverseitigem Routing verwendet.
In diesem Projekt habe ich außerdem die Authentifizierung mit Supabase implementiert, inklusive OAuth. Darüber hinaus konnte ich meine SQL-Kenntnisse erweitern, indem ich Trigger-Funktionen für meine Datenbank schrieb und RLS-Richtlinien anwandte.
Weiter- Entwicklung
In Zukunft möchte ich die Barrierefreiheit meiner Projekte verbessern. Vor allem, da dieses Projekt ein Liniendiagramm enthält und ich denke, dass in diesem Bereich das meiste Verbesserungspotenzial steckt. Außerdem möchte ich Tests für meine Komponenten schreiben und die Projektstruktur optimieren.