Fase 3 - Frontend

# Usar template oficial de Supabase
npx create-next-app -e with-supabase nombre-proyecto

# O instalación manual
npx create-next-app@latest nombre-proyecto
cd nombre-proyecto
npm install @supabase/supabase-js @supabase/auth-helpers-nextjs

src/
├── app/                    # App Router de Next.js
│   ├── (auth)/            # Rutas de autenticación
│   ├── (dashboard)/       # Rutas protegidas
│   └── api/               # API Routes
├── components/
│   ├── ui/                # Componentes base (buttons, inputs, etc.)
│   ├── features/          # Componentes por funcionalidad
│   └── layouts/           # Layouts reutilizables
├── lib/
│   ├── supabase/          # Cliente y utilidades de Supabase
│   ├── utils/             # Funciones auxiliares
│   └── hooks/             # Custom React hooks
├── types/
│   └── supabase.ts        # Tipos generados desde DB
└── styles/
    └── globals.css        # Estilos globales

# .env.local
NEXT_PUBLIC_SUPABASE_URL=tu_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=tu_anon_key
SUPABASE_SERVICE_ROLE_KEY=tu_service_role_key

# Otras variables
NEXT_PUBLIC_APP_URL=http://localhost:3000
NODE_ENV=development

// lib/supabase/client.ts
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { Database } from '@/types/supabase'

export const createClient = () => createClientComponentClient<Database>()

# Generar tipos desde tu schema de Supabase
npx supabase gen types typescript --project-id "tu-project-id" > types/supabase.ts

git init
git add .
git commit -m "Initial commit: Next.js + Supabase setup"

# Dependencies
node_modules/
.pnp
.pnp.js

# Environment
.env*.local
.env.production

# Next.js
.next/
out/
build/
dist/

# Testing
coverage/

# Misc
.DS_Store
*.log

gh repo create nombre-proyecto --private --source=. --remote=origin
git branch -M main
git push -u origin main