He iniciado este proyecto para aprender React de forma práctica – y no solo seguir tutoriales. Quería implementar un escenario de frontend realista que incluyera requisitos típicos como autenticación de usuarios, gestión de datos, interacciones de usuario y componentes de IU dinámicos.
En lugar de crear un backend propio, decidí deliberadamente usar Supabase – una plataforma Backend-as-a-Service que resulta ideal para fines de aprendizaje y prototipado. Así pude concentrarme por completo en el ecosistema de React, incluyendo el enrutamiento, el estado, la estructura de componentes y la interfaz responsiva.
Código fuente en GitHub: https://github.com/netperformance/shopping
La aplicación ofrece una lista de compras digital sencilla pero funcional, en la que:
Se pueden buscar productos por categoría
Se pueden añadir productos propios
La lista de compras se mantiene persistente (por usuario)
El usuario puede eliminar su cuenta y todos sus datos de forma independiente
Se admite inicio de sesión con Google
La interfaz es completamente responsive y se basa en el shadcn/ui-Toolkit (Radix + TailwindCSS).
Resumen de las tecnologías más importantes utilizadas
React (Vite, TypeScript) – para un desarrollo frontend rápido y moderno
Supabase – Auth, base de datos (PostgreSQL), API
shadcn/ui + Tailwind CSS – componentes modernos con fácil personalización
Lucide Icons – para las acciones de la interfaz de usuario
Supabase RLS (Row Level Security) – para la seguridad de datos por usuario
Esta aplicación no está pensada para uso en producción porque
no hay funcionalidad offline
no se han implementado características de seguridad como limitación de tasa, CAPTCHA o manejo de errores a nivel de servidor
no se puede garantizar un almacenamiento de datos conforme al RGPD
no se ha comprobado la escalabilidad ni la tolerancia a fallos
no hay almacenamiento de los productos en la base de datos
etc.