Flux-o
Una app completa de finanzas personales, sin distracciones ni funciones de pago.
Alcance del proyecto
Diseño y desarrollo
Plataforma
Móvil y web
Equipo
Proyecto individual
Duración
4 semanas
La oportunidad
La idea de Flux-o surgió de una frustración personal con las apps de finanzas actuales: las herramientas que usamos para gestionar nuestro dinero suelen ser demasiado complejas o frustrantes.
Muros de pago y límites de uso
Las funciones esenciales suelen esconderse tras suscripciones de pago o límites de uso por periodo.
Modelos mentales rígidos
Casi todas las apps de finanzas obligan al usuario a seguir el mes natural
(del día 1 al 30/31).
Fricción excesiva
La mayoría de las apps exigen varios clics y pantallas solo para hacer una tarea sencilla, lo que desincentiva los hábitos a largo plazo.
La visión
Flux-o se diseñó para eliminar estas barreras: una herramienta que reduce la fricción al registrar gastos y presenta los datos financieros en una interfaz elegante.
Pulso financiero al instante
Una página de inicio sencilla y con alta densidad de información, que muestra el gasto total del periodo y la actividad reciente.
Registro sin fricción
Una única hoja que se desliza desde abajo para registrar gastos en segundos.
Estética premium y emotiva
Degradados vibrantes que convierten el control de gastos en un ritual interactivo y satisfactorio.
Público objetivo
Personas que quieren transparencia financiera inmediata y sin fricción, sin molestos muros de pago.
Alcance del MVP
Diseño responsive
Los elementos quedan al alcance del pulgar. Las principales hojas de interacción se deslizan desde abajo y la barra de navegación se convierte en un dock flotante en la parte inferior, para poder usar la app con una sola mano.
El layout se amplía de forma dinámica. El dock flotante se transforma en una barra lateral de navegación a la izquierda, y los gráficos centrales se colocan junto a las transacciones recientes, aprovechando todo el espacio horizontal.
- Vite + React + TypeScript
El stack principal de frontend se eligió por su recarga rápida en desarrollo, su renderizado ágil y su tipado completo.
- TailwindCSS & Shadcn/UI
Estilos utility-first y una base flexible para animaciones personalizadas, garantizando la coherencia sin sobrecargar el proyecto con archivos CSS.
- Supabase (Auth, Postgres, and Storage)
Infraestructura de backend estándar para credenciales seguras, consultas de alto rendimiento y almacenamiento directo de recibos.
Los resultados
Dashboard adaptable
Muestra las métricas del ciclo salarial activo, el indicador Weekly Pulse y un gráfico de área interactivo en Recharts con degradados personalizados.
Categorías totalmente personalizables
El usuario puede ampliar sus categorías con etiquetas personalizadas, eligiendo entre iconos de Phosphor de alta calidad y colores seleccionados.
Análisis detallado del gasto
La página Insights ofrece gráficos de comparación semanal, barras de gasto por categoría con colores personalizados e indicadores instantáneos de la «Semana pico» y el «Día de mayor gasto».
Ajustes flexibles
Permite ajustar los objetivos de presupuesto, cambiar la moneda principal, activar avisos de presupuesto superado y redefinir los periodos activos (incluida la selección de rangos de fechas personalizados).
Otros casos
EDGE Empower® Pay Tool
Rediseño de una herramienta de Excel como plataforma B2B en el navegador: análisis de brecha salarial y equidad más completos
→ El tiempo de procesamiento de los análisis se redujo más de un 90%.
Giro
Una plataforma que apoya a los inmigrantes con orientación, ayuda y comunidad
→ El 78% de los encuestados usaría con frecuencia el marketplace de la app para productos y servicios.
