Control Financiero

Finalizado

Progreso100%

Aplicacion web de finanzas personales: registro de ingresos y gastos, dashboard con KPIs mensuales, presupuesto y regla 50/30/20, objetivos de ahorro y exportacion de datos.

Next.jsTypeScriptFirebaseFirestoreTailwind CSSshadcn/uiReact Hook FormZodRecharts

GitHub →

01 — Details

Problema

Falta de visibilidad clara y centralizada sobre ingresos, gastos y cumplimiento de objetivos de ahorro mes a mes.

Solución

Un dashboard con KPIs, categorias jerarquicas de ingresos/gastos, seguimiento de presupuesto mensual contra la regla 50/30/20 y objetivos de ahorro, con exportacion a Excel.

Arquitectura

Next.js 16 App Router con rutas agrupadas (auth) y (dashboard), Server Components y proxy.ts para proteger rutas privadas. Backend real en Firebase (Auth + Firestore) en vez del Supabase planeado originalmente en el roadmap; sesion server-side vía firebase-admin con cookie httpOnly creada en /api/auth/session. Todos los datos del usuario viven bajo /users/{userId}/ en Firestore, con reglas de seguridad en firestore.rules. UI con shadcn/ui y Tailwind v4, formularios con react-hook-form + zod, graficas con recharts.

02 — Learnings

Aprendizajes

El stack planificado en el roadmap era Supabase, pero la implementacion real cambio a Firebase (Auth + Firestore) por el camino, documentado explicitamente como decision consciente en ROADMAP.md.

Próximos pasos

Fase 4 (Polish) pendiente segun el propio ROADMAP.md: graficas reales, modo oscuro, testing y optimizacion, ya que las fases 0 a 3 (fundaciones, MVP, presupuesto/50-30-20, objetivos y exportacion) estan marcadas como completas.