Expense Tracker — Control de Gastos

Expense Tracker es una aplicación web desarrollada con React, TailwindCSS y Zustand, diseñada para gestionar y visualizar ingresos y gastos de manera intuitiva. Este proyecto demuestra dominio en manejo de estado global, visualización de datos con Recharts y persistencia con localStorage.

Crear una herramienta interactiva que permita registrar transacciones, calcular balances totales y mostrar información financiera mediante gráficos dinámicos. Se busca aplicar un flujo de datos centralizado y una interfaz moderna adaptable a dispositivos móviles.

• React + Vite — estructura de componentes funcionales y hooks.
• TailwindCSS v3 — diseño minimalista y responsivo.
• Zustand — manejo de estado global con persistencia.
• Recharts — generación de gráficos dinámicos (pie y barras).
• Lucide Icons — íconos SVG importados como componentes React.
• localStorage — almacenamiento automático de las transacciones.

src/
├── components/
│   ├── SummaryChart.jsx
│   ├── StatsChart.jsx
│   ├── TransactionForm.jsx
│   ├── TransactionList.jsx
│   └── Header.jsx
├── store/
│   └── transactions.js
├── App.jsx
└── main.jsx

• Agregar ingresos y gastos con descripción y tipo de transacción.
• Visualizar balance total en tiempo real.
• Mostrar gráficos circulares por categoría y de barras comparativas.
• Eliminar transacciones individuales con persistencia automática.
• Diseño adaptativo para escritorio y dispositivos móviles.

Se priorizó una interfaz clara y minimalista, basada en tarjetas blancas con bordes redondeados, tipografía Figtree, íconos Lucide y acentos en negro y grises neutros. El diseño es completamente responsive, mostrando las tarjetas en dos columnas en escritorio y una disposición vertical en móvil.

Este proyecto consolida el uso de Zustand para la gestión global del estado y el entendimiento del ciclo de vida de React. Se aplicaron principios de diseño limpio y modular, así como buenas prácticas para visualización de datos y persistencia local. Representa una muestra sólida de dominio en frontend moderno con React.