Ich habe dieses Projekt gestartet, um React praxisnah zu lernen – und nicht nur Tutorials zu verfolgen. Dabei wollte ich ein realistisches Frontend-Szenario umsetzen, das typische Anforderungen wie Benutzerauthentifizierung, Datenverwaltung, Benutzerinteraktionen und dynamische UI-Komponenten beinhaltet.
Anstatt ein eigenes Backend zu bauen, habe ich mich bewusst für Supabase entschieden – eine Backend-as-a-Service-Plattform, die sich ideal für Lern- und Prototyping-Zwecke eignet. Dadurch konnte ich mich voll auf das React-Ökosystem konzentrieren, inklusive Routing, Zustand, Komponentenstruktur und responsiver Oberfläche.
Github Sourcecode: https://github.com/netperformance/shopping
Die Anwendung bietet eine einfache, aber funktionale digitale Einkaufsliste, bei der:
- Produkte nach Kategorie durchsucht werden können
- Eigene Produkte hinzugefügt werden können
- Die Einkaufsliste persistiert bleibt (pro Benutzer)
- Der Benutzer sein Konto und alle Daten selbstständig löschen kann
- Google-Login unterstützt wird
Die Oberfläche ist dabei komplett responsive und basiert auf dem shadcn/ui-Toolkit (Radix + TailwindCSS).
Die wichtigsten eingesetzten Technologien im Überblick
- React (Vite, TypeScript) – für schnelles, modernes Frontend-Entwickeln
- Supabase – Auth, Datenbank (PostgreSQL), API
- shadcn/ui + Tailwind CSS – moderne Komponenten mit einfacher Anpassbarkeit
- Lucide Icons – für die UI-Aktionen
- Supabase RLS (Row Level Security) – für Datensicherheit pro Benutzer
Diese Anwendung ist nicht für den Echtbetrieb gedacht, weil
- keine Offline-Funktionalität vorhanden ist
- keine Sicherheits-Features wie Rate Limiting, CAPTCHA oder Fehlerhandling auf Serverebene implementiert wurden
- keine DSGVO-konforme Datenspeicherung garantiert werden kann
- keine Skalierung oder Ausfallsicherheit geprüft wurde
- keine Speicherung der Produkte innerhalb der Datenbank
- usw.
