WalletAlert

Contexto

Proyecto de ingeniería de software enfocado en un problema común entre estudiantes: los gastos pequeños se acumulan rápido, pero muchas herramientas de presupuesto se sienten más pesadas que el problema que intentan resolver.

Problema

Los estudiantes necesitan definir presupuestos, categorizar gastos y detectar excesos con anticipación, pero llevar el control en hojas de cálculo o apps genéricas genera demasiada fricción para el uso diario.

Solución

WalletAlert combina un frontend en React + Vite, una API en Express, persistencia con MongoDB, gráficas con Recharts y autenticación con Auth0 para ofrecer registro rápido de gastos, monitoreo de presupuesto y visibilidad clara en un solo producto.

Decisiones clave

• -Se usó optimistic UI para que registrar un gasto se sintiera inmediato y no bloqueado por viajes al servidor.
• -El alcance se centró en presupuestos semanales y por categoría, que se ajustan mejor a cómo suelen pensar sus gastos muchos estudiantes.
• -Se añadió un fallback en memoria para desarrollo, de modo que la API siguiera siendo usable incluso sin MongoDB configurado.
• -Se documentaron flujos de ejecución local y despliegue en Render para volver el proyecto más fácil de compartir y demostrar.

Capturas

Características clave

• -Presupuestos semanales y por categoría
• -Registro, categorización y edición rápida de gastos
• -Desglose del gasto y gráficas con Recharts
• -Alertas preventivas antes de exceder el presupuesto
• -Autenticación con Auth0 y rutas protegidas
• -Modales accesibles y atajos de teclado
• -Setup local y flujo de despliegue listo para Render

Resultados

• -Convirtió el presupuesto en una interacción ligera y frecuente, en lugar de una tarea manual de fin de mes.
• -Conectó UX de producto, autenticación, persistencia, testing y despliegue en una sola entrega full-stack.
• -Fortaleció el caso destacado al combinar pulido visual con documentación de arquitectura y diagramas UML.

Stack

Enlaces