← Blog · · react · supabase · stack
Munto un projecte React + Supabase en menys d'una hora: pas a pas
L'stack que faig servir per validar idees ràpid: auth, DB, RLS, storage i deploy en menys del que tardes a dinar. Reproduïble.
React + Supabase és l’equivalent modern a “Rails en 15 minuts”. Però la majoria de tutorials et deixen a mitges: vale, ja tens la home, i l’auth? i les polítiques de seguretat? i el deploy?
T’ensenyo el flux exacte que segueixo quan un client em diu “vull validar una idea ja”.
El que tindràs en 60 minuts
- Projecte Next.js 16 (App Router) o Astro 5 amb React islands
- Supabase: auth amb magic link, base de dades amb RLS ben feta, storage per imatges
- shadcn/ui instal·lat i configurat amb el teu tema
- Desplegament a Vercel amb preview per PR
.env.exampledocumentat per als següents
Minut 0-5: scaffold
npx create-next-app@latest el-meu-mvp --typescript --tailwind --app. Immediatament: npx shadcn@latest init, tries el preset i ja tens Button, Input, Card llestos.
Minut 5-20: Supabase
Crear projecte a supabase.com (et porta 2 minuts). Copiar URL i anon key al .env.local. Instal·lar @supabase/ssr i @supabase/supabase-js.
Crear les taules necessàries al SQL Editor. Important: activar Row Level Security des del primer minut i escriure les polítiques. No ho deixis “per després” perquè t’obre l’API sencera a internet.
Minut 20-35: Auth
Magic link és el camí ràpid i segur. A Supabase Auth → Settings, defineixes la teva site URL i els redirect URLs.
Al client: un formulari que crida a supabase.auth.signInWithOtp({ email }). Al callback /auth/callback/route.ts intercanvies el codi per una sessió. Llest.
Minut 35-45: la primera feature
Aquí és on el client veu màgia. Una taula amb CRUD: form per crear, llista per llegir, botó per esborrar. Server Components per llegir, Server Actions per mutar. Total: ~80 línies si vas al gra.
Minut 45-55: storage
El client vol pujar imatges? Crea un bucket a Supabase Storage, política RLS de “l’amo pot llegir i escriure”, i supabase.storage.from('bucket').upload() des d’un client component amb <input type="file">.
Minut 55-60: deploy
Connectar el repo a Vercel, copiar les env vars de Supabase, click. Cada push a main desplega. Cada PR genera un preview amb la seva pròpia URL.
I ara què
Tens un MVP funcionant amb auth, dades, storage i desplegament. El que segueix és iterar amb dades reals: ensenyar-ho al client, veure què passa, i ajustar.
Vols muntar el teu MVP així? Parlem-ne en 30 minuts.