JavaScript de Cero a Experto / Proyectos + retos

Proyecto: Mi Bolsillo definitivo (CRUD + localStorage)

Proyecto180 min150 XP

Llegó el día. "Mi Bolsillo" ha crecido contigo desde el módulo 5 —objetos, render, eventos, persistencia— y hoy alcanza su forma final: una app de gastos COMPLETA. Agregar, editar, borrar, filtrar, total en vivo, y todo sobrevive a la recarga. Es tu primer proyecto de portafolio, y junta la mitad del curso en una sola pieza.

Reto

Mi Bolsillo definitivo

Difícil180 min150 XP(×2 sin mirar la solución)

Qué debes construir

Una app de gastos con CRUD completo y persistencia. La estructura, según el método de las cinco preguntas:

Fuente de verdad: un array gastos, cada uno { id, nombre, valor, categoria }.
Operaciones: agregar, editar (actualizar uno existente), borrar.
Render: una función render() que pinta la lista, el total y el desglose por categoría desde el array.
Eventos: el formulario agrega/edita; los botones de cada fila editan o borran; un select filtra por categoría.
Persistencia: cada cambio se guarda en localStorage; al cargar, se restaura.

Requisitos concretos:

Agregar: el formulario toma nombre, valor (número) y categoría; valida (nombre no vacío, valor > 0) y muestra un mensaje si algo falla —sin agregar basura.
Editar: al pulsar "Editar" en una fila, el formulario se rellena con ese gasto y el botón pasa a "Guardar cambios"; al enviar, ACTUALIZA ese gasto en vez de crear uno nuevo.
Borrar: cada fila tiene su botón; usa delegación de eventos (módulo 8).
Filtrar: un select "todas / comida / transporte / ocio" que muestra solo esa categoría, sin perder los demás datos.
Total y desglose: el total general (formateado en pesos con Intl) y el subtotal por categoría, ambos en vivo.
Persistencia: recarga el preview y todo sigue ahí.

Reglas

El array gastos es la ÚNICA fuente de verdad; el DOM solo lo refleja. Todo cambio pasa por: mutar el array → guardar → render().
Datos de usuario al DOM con textContent o createElement, NUNCA innerHTML (la regla XSS del módulo 7).
Usa el guard iniciar() con DOMContentLoaded (módulo 7).
Separa la lógica pura (calcularTotal, porCategoria) del render y los eventos.

180:00

Cuando estés listo, arranca el reloj.

Las decisiones de arquitectura que este proyecto consolida:

Estado central, DOM espejo. Nunca lees el estado desde el DOM ni editas el DOM "a mano" tras un cambio: mutas gastos, guardas, y render() redibuja TODO desde cero. Parece derrochador; es lo que hace la app predecible y sin bugs de sincronización —y es exactamente el modelo mental de React que te espera.
Una sola puerta para el cambio. Agregar, editar y borrar terminan los tres en el mismo trío mutar → guardar → render. Con un solo camino, la persistencia nunca se desincroniza: es imposible cambiar los datos y olvidar guardarlos.
Lógica pura, aparte y testeable. calcularTotal y porCategoria no tocan el DOM: son funciones puras que podrías testear con el módulo 16 tal cual. Esa separación es la que te deja crecer la app sin miedo.

Autoevaluación de proyecto: agrega tres gastos, edita uno, borra otro, filtra por categoría, y RECARGA el preview —¿sigue todo? ¿El total refleja siempre el array real, incluso mientras filtras? ¿Puedes seguir el rastro de un cambio: clic → mutar gastos → guardar → render, sin que nadie edite el DOM por fuera? Si es así, no solo hiciste una app: interiorizaste el patrón estado-render-eventos que vas a usar el resto de tu carrera, con o sin framework. Guárdala: es tu primer proyecto de portafolio.

Qué sigue

Dominaste el estado local y la persistencia. El siguiente proyecto sale a internet: un buscador que consume una API real, con búsqueda mientras escribes, estados de carga y paginación —los patrones de toda app que muestra datos de un servidor. Y usarás por primera vez el debounce que construirás en los retos.