Proyecto · React + TypeScript

Presupuesto

Control de gastos para negocios pequeños que, a mitad de mes, ya te dice si vas pasado del presupuesto.

El demo corre entero en tu navegador. Sin registro, sin instalar nada.

Pantalla de Presupuesto: el resumen del mes, con el gasto total y cada categoría marcada en verde, amarillo o rojo según el presupuesto.

Qué resuelve

La mayoría de los negocios pequeños revisan sus gastos al cierre del mes, cuando ya no hay nada que hacer. Presupuesto muestra, en cada momento, cuánto llevas gastado contra tu presupuesto mensual por categoría, y marca en amarillo lo que se acerca al límite y en rojo lo que ya se pasó.

En presupuesto Cerca del límite Excedido

Lo que lo hace distinto

White-label en dos archivos

El nombre del negocio, los colores, las categorías, los presupuestos y los datos de ejemplo viven en dos archivos de configuración. Nada está escrito a mano en el resto del código.

Dos modos, un mismo código

Modo demo en localStorage para mostrar y para portafolio. Modo real con Supabase (Postgres, Auth, RLS) cambiando una variable de entorno.

Arquitectura por capas

Dominio puro y testeado, aplicación, infraestructura detrás de puertos, y UI. Cambiar de localStorage a Supabase no toca la lógica de negocio.

Probado y accesible

139 tests unitarios y 4 end-to-end. Contraste WCAG AA, navegación por teclado, modo claro y oscuro, y respeto por reduced-motion.

Stack

React 19 TypeScript (strict) Vite React Router 7 Tailwind CSS 4 Vitest Playwright Supabase

Cómo probarlo

Ábrelo en vivo, o clónalo y córrelo en tu máquina:

git clone https://github.com/diego-salomon/presupuesto.git
cd presupuesto
pnpm install
pnpm dev            # demo en localhost:5173