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.