I started this project to learn React in a practical way – and not just follow tutorials. I wanted to implement a realistic frontend scenario that includes typical requirements like user authentication, data management, user interactions, and dynamic UI components.
Instead of building my own backend, I consciously chose Supabase – a backend-as-a-service platform that is ideal for learning and prototyping purposes. This allowed me to fully focus on the React ecosystem, including routing, state, component structure, and responsive UI.
GitHub source code: https://github.com/netperformance/shopping
The application provides a simple, but functional digital shopping list, where:
Products can be searched by category
Own products can be added
The shopping list persists (per user)
The user can delete their account and all data independently
Google login is supported
The interface is completely responsive and is based on the shadcn/ui-Toolkit (Radix + TailwindCSS).
An overview of the most important technologies used
React (Vite, TypeScript) – for fast, modern frontend development
Supabase – Auth, database (PostgreSQL), API
shadcn/ui + Tailwind CSS – modern components with easy customizability
Lucide Icons – for UI actions
Supabase RLS (Row Level Security) – for per-user data security
This application is not intended for production use because
no offline functionality is available
no security features such as rate limiting, CAPTCHA, or server-level error handling have been implemented
no GDPR-compliant data storage can be guaranteed
no scaling or fault tolerance has been tested
no storage of products within the database
etc.