Grana V3

Aplicación de finanzas personales.

Primeros pasos

1. Instalar pnpm

Si no tenés pnpm instalado todavía, elegí una de estas opciones:

• Rápido (recomendado si tenés Node ≥ 16.13):

  corepack enable pnpm
  

• Canónico: seguir las instrucciones de pnpm.io/installation.

Verificá que quedó disponible:

pnpm --version

2. Instalar dependencias

pnpm install

Si ves un warning tipo [ERR_PNPM_IGNORED_BUILDS] mencionando paquetes como @parcel/watcher o @swc/core, no es un error: pnpm pide tu autorización explícita para correr los build scripts de esas dependencias (es una protección contra paquetes maliciosos). En este repo ya dejamos preaprobados los paquetes seguros en la sección pnpm.onlyBuiltDependencies de package.json, así que normalmente no debería aparecer. Si igual aparece (por ejemplo después de agregar una dependencia nueva), corré:

pnpm approve-builds

Te va a abrir un menú interactivo: con la barra espaciadora seleccionás los paquetes a aprobar y con Enter confirmás. Para los paquetes que ya están en el proyecto (@parcel/watcher, @swc/core) es seguro aprobarlos.

3. Configurar variables de entorno

Copia el archivo de ejemplo y completa tus credenciales de Supabase:

cp apps/web/.env.example apps/web/.env

Next.js carga el .env desde el cwd de la app, por eso vive en apps/web/, no en la raíz del repo.

Variable	Dónde encontrarla
NEXT_PUBLIC_SUPABASE_URL	Panel de Supabase → Project Settings → API → Project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY	Panel de Supabase → Project Settings → API → Publishable key

4. Configuración inicial de Supabase

Antes de levantar la app por primera vez, en el panel de Supabase:

4.1 Email provider

Authentication → Providers → Email

• ✅ Habilitar el provider Email.
• ✅ Activar Confirm email (requiere confirmación antes de poder iniciar sesión).
• ✅ Activar Secure password change (recomendado).

4.2 URLs de redirect

Authentication → URL Configuration

• Site URL: http://localhost:3000 en desarrollo, tu dominio en producción.
• Redirect URLs: agregar
  • http://localhost:3000/auth/callback
  • https://<tu-dominio>/auth/callback (cuando despliegues)

4.3 Templates de email

Authentication → Email Templates

Los templates viven versionados en el repo bajo supabase/templates/. El repo es la source of truth — el dashboard de Supabase es un mirror manual: mantenerlo al día es un paso que hace una persona, cada vez. Los asuntos de los mails, en cambio, hoy viven sólo en el dashboard: no están versionados acá.

Para cada uno de estos dos templates, abrí el archivo del repo, copiá el contenido completo del body y pegalo en el campo correspondiente del dashboard:

Template del dashboard	Archivo en el repo
Confirm signup	supabase/templates/confirm-signup.html
Reset password	supabase/templates/reset-password.html

Como doble check, los enlaces dentro de cada template deben respetar estas formas exactas (el callback de la app las parsea con esa estructura):

confirm-signup  → {{ .SiteURL }}/auth/callback?token_hash={{ .TokenHash }}&type=signup
reset-password  → {{ .SiteURL }}/auth/callback?code={{ .Token }}&next=/reset-password

Si el dashboard y el repo divergen alguna vez, sobrescribí el dashboard con el contenido del repo, nunca al revés. Los subjects (asuntos) por ahora siguen viviendo solo en el dashboard.

4.4 Schema de base de datos

Ejecutar en SQL Editor:

# El archivo está en supabase/migrations/0001_profiles.sql

Copiar y pegar el contenido del archivo; correrlo una vez. Crea la tabla public.profiles, su RLS y el trigger on_auth_user_created que la mantiene sincronizada con auth.users.

5. Ejecutar la aplicación

pnpm dev

La app estará disponible en http://localhost:3000.

6. (Opcional) Instalar el CLI de OpenSpec

El repo está configurado para usar OpenSpec como flujo de spec-driven development. Los skills y slash commands ya vienen versionados en .claude/ (Claude Code) y .agents/ (Codex), pero el CLI se instala aparte:

pnpm add -g @fission-ai/openspec

Una vez instalado, dentro de Claude Code podés usar:

• /grana-lightweight-explore — pensar / refinar una idea antes de proponerla: corto y sin escribir nada
• /grana-deep-explore — el /opsx:explore original de OpenSpec, palabra por palabra: largo, con diagramas, y puede escribir artefactos de OpenSpec si le decís que sí
• /opsx:propose "<idea>" — crear una nueva propuesta de cambio
• /opsx:apply — implementar las tasks de un cambio
• /opsx:update — revisar los artefactos de un cambio ya propuesto
• /opsx:sync — bajar las deltas del cambio a las specs maestras
• /opsx:archive — archivar un cambio ya completado

Las propuestas viven en openspec/changes/ y las specs en openspec/specs/.

Scripts disponibles

Los comandos sin sufijo apuntan a apps/web. Para mobile usá los sufijos :mobile o pnpm --filter mobile <script>.

This is the beginning of the README. Read the rest at the original. Read the full README ↗