Crea un dashboard (panel visual donde se muestra información resumida, como el tablero de un carro pero con datos) sobre un tema que te apasione: fitness, finanzas, productividad, gaming, etc.
Debe tener al menos 3 tarjetas con datos, un gráfico o visualización, y navegación lateral o superior.
Los datos pueden ser inventados por ti, no necesitas conectar bases de datos reales. Simplemente escribe los números o textos que quieras mostrar directamente en el diseño.
FinanceOS Pro — El tablero 360° para el adicto al control financiero
Un dashboard de finanzas personales completo con contexto colombiano: patrimonio, gastos, inversiones, presupuesto, metas y score crediticio — todo en una sola pantalla.
Construido con Next.js 16, React 19, Tailwind y Recharts. Lo que lo hace diferente: no hay pantalla vacía. Cada sección tiene datos, gráficas reales y lógica funcional — transacciones en vivo con React Context, Open Banking simulado (vincular bancos, ver movimientos, alertas), panel de IA con insights personalizados, ticker del mercado colombiano (COLCAP, TRM, ECOPETROL) y score DataCrédito con gauge SVG custom.
Todo para el cacharrero y el que le guta lo grafico + el control de su vida
Para el que no le gusta que la plata lo sorprenda.
🔗
Noooo, tocayo la rompiste. Somos colombianos Yo soy casi hiper adicto. Muy, muy buena
📊 SILK ROAD FESTIVAL - BACKSTAGE DASHBOARD (Naruto vs Wukong Analytics)
Mi segundo reto es el panel de control interno del festival que creé en el Reto 1. Ahora puedo ver, como organizador, cómo le está yendo a mi evento: ¿Quién es más popular? ¿De dónde vienen los fans? ¿Cuánto dinero se está generando?
Es como ser el dueño de Silk Road 2.0 y tener acceso a los datos secretos. 📈
🤔 ¿Por qué lo hice?
Porque quería demostrar que puedo construir un universo completo. El Reto 1 fue el festival (la cara pública). El Reto 2 es el backstage (los datos reales). Juntos cuentan una historia.
JavaScript puro (gráficos con Canvas, sin librerías)
LocalStorage para guardar filtros
Tailwind CSS + efectos glassmorphism
Diseño responsive: menú hamburguesa en móvil, barra lateral en desktop
Animaciones suaves y tooltips interactivos
¿Por qué conformarte con entender tu música solo una vez al año?
Si eres melómano como yo, los resumenes de tus apps de música se siente como un trailer de 30 segundos de una película que dura 365 días. Quería algo que viviera conmigo todo el tiempo. Así nace Music DNA Dashboard — un dashboard personal que convierte tus datos de escucha en una experiencia visual que se siente como la música misma.
No quería otro grid de cards con números planos. Quería que los datos se sintieran como un álbum que abres por primera vez.
Los top artists entran deslizándose desde los lados y se voltean para revelar minutos escuchados — como un disco de vinilo girando. Las estadísticas del sidebar son flip cards 3D que esconden datos contextuales detrás de cada número. El genre breakdown muestra porcentajes de 72px con glow que pulsa como un beat. Un radar de Sound DNA morfea desde el centro. Las barras de actividad crecen al hacer scroll. La línea de tendencia mensual se dibuja como un trazo de tinta. Y hay un reproductor con vinilo giratorio que toca tu top song.
Todo anima solo cuando lo ves — ScrollTrigger controla cada sección para que la primera impresión siempre sea cinematográfica.
El stack fue deliberado: Astro 6 estático, GSAP con ScrollTrigger, CSS vanilla con glass morphism, tipografía Syne + Outfit, y un fondo vivo con ruido SVG y orbes de color flotantes. Sin frameworks de UI. Sin templates. Sin chart libraries. Cada visualización — el radar, las barras, la línea de tendencia — fue construida a mano en SVG y CSS.
La filosofía fue la misma que en el reto anterior: vibe coding con intención. Cada prompt fue una decisión de diseño: "los números tienen que ser imposibles de ignorar", "que el artist flip se sienta como descubrir algo", "el reproductor necesita un vinilo real". El AI no diseñó esto — yo dirigí cada detalle, el AI lo ejecutó.
Lo que confirma este segundo reto: la diferencia entre un dashboard genérico y uno que se siente vivo no está en los datos, está en cómo decides presentarlos.
Link:
Desarrollé este proyecto desde una perspectiva mucho más cercana a la realidad de un negocio.
Quise ir más allá de un dashboard básico de ventas o productos más vendidos, y planteé un enfoque multidashboard que integrara operaciones, marketing y FinOps, porque en empresas de mayor escala esas dimensiones están completamente conectadas.
Lo hace único justamente esa visión más completa y estratégica, además de estar inspirada en problemas que he visto de cerca en mi trabajo.
Página:
Super
😎
Reto 2 completado — Dashboard de Fitness
Para este reto construí FORMA, un dashboard personal de fitness con estética minimalista premium en light mode — la idea era que se sintiera como si Apple hubiera diseñado una app de gym.
El panel incluye 6 tarjetas de métricas (racha de entrenamiento, calorías, tiempo, peso, hidratación y próxima sesión), un gráfico semanal de calorías con toggle entre métricas, historial de entrenamientos recientes y navegación lateral que en móvil se convierte en bottom bar.
Lo construí con v0 de Vercel y el resultado fue exactamente lo que tenía en mente — lo que más me sorprendió fue qué tan bien quedaron las tarjetas de métricas: números grandes, jerarquía clara, datos que de verdad se leen de un vistazo.
El detalle que le da alma: la app no se siente como un tablero frío de datos — tiene pequeños momentos de personalidad escondidos para quien los encuentra. 👀
FORMA - Tu progreso, tu fuerza
🚀 LifeOS — El panel de control de tu mejor versión
No quise hacer solo un dashboard “bonito”. Quise construir una experiencia que se sienta viva, conectada y útil de verdad para mejorar hábitos, foco, salud y metas.
🌙 ¿Qué hice y por qué?
Construí un dashboard personal con estética Premium Dark y enfoque en evolución integral: no son módulos aislados, es un sistema donde cada acción impacta todo el ecosistema.
La idea fue simple: que al abrir la app entiendas en segundos cómo vas hoy y qué área necesita atención.
⚙️ Lo que lo hace único (más allá de lo visual):
- 🔗 Conectividad real entre módulos: Resumen, Foco, Salud, Hábitos, Metas y Análisis se alimentan entre sí.
- 🧠 Datos con narrativa: no son números sueltos; cada vista cuenta parte de la misma historia personal.
- 🎯 Interactividad real: marcar hábitos, completar sesiones de foco y avanzar metas cambia métricas e insights.
- 💾 Persistencia sin backend: todo vive en el navegador con almacenamiento local para una experiencia rápida y funcional.
- 📊 Visualizaciones con propósito: evolución del sistema, balance por áreas, correlaciones e insights accionables.
- 🧩 Iteración fuerte de producto: no salió de un intento; hubo varias pasadas de auditoría, mejora visual, coherencia de datos y pulido de UX.
- 🔥 Factor WOW: animaciones suaves, feedback de acciones, gamificación y sensación de app “viva”, no maqueta estática.
- 🏆 Mi objetivo fue construir algo que no solo se vea premium, sino que también demuestre criterio de producto: interacción, coherencia, utilidad y emoción en una sola experiencia.
🔗 Demo pública:
Si te gusta la propuesta, ¡tu voto me impulsa muchísimo! 🙌💙
Les presento LifeStatus. ¿Cuál es el estado de mi vida en datos? FF Finanzas y Fitness. Para este proyecto fui mas allá. Plus Ultra y conecté mis datos de Fitness con HCGateway self hosted. Una forma de poder acceder programaticamente a tus estadisticas y para mis finanzas usé la API de Wallet una aplicación que en su momento compre la opción de por vida.
De esta forma tengo un tablero y datos reales de mi estado en esas dos áreas. Lo mejor de todo ahora puedo personalizar aun mas mis agentes. Ya sea mi OpenClaw para que me recomiende opciones de rutinas según mi progreso o recomendaciones economicas según el estado actual de mi economia.
Puedes verlo en
El repo lo tienen público
SALES CRM DASHBOARD (Dashboard CRM de Ventas)
Demo:
¿Qué hice?
He diseñado y desarrollado un Dashboard de CRM de Ventas moderno y funcional, utilizando tecnologías de última generación como React, Next.js y Tailwind CSS. El sistema integra visualización de datos mediante gráficos interactivos, gestión de funnel de ventas (pipelines) y un panel de control centralizado que permite monitorear métricas clave (KPIs), como ingresos totales, tasas de conversión y actividad de los clientes.
¿Por qué lo hice?
Abordar la complejidad que enfrentan los equipos de ventas al intentar interpretar datos dispersos. Busqué crear una herramienta que no solo fuera estéticamente limpia, sino que priorizara la usabilidad y la toma de decisiones basada en datos.
¿Qué lo hace único? Lo que diferencia a este proyecto es el equilibrio perfecto entre rendimiento y diseño intuitivo:
Modo oscuro / claro
Interactividad Avanzada
Enfoque en la Experiencia de Usuario (UX)
Visualizaciones clave para toma de decisiones
Variedad de tipos de gráficas mostrando la más adecuada para el reporte.
NEON ROBOTICS
Proyecto: Neon Robotics Dashboard 🤖
Dashboard cyberpunk para monitorear flota de robots de delivery. Muestra entregas en tiempo real, robots activos, gráfico de demanda vs capacidad, y tracking simulado en mapa.
Lo unique: IDs de robots inspirados en IA de películas (TARS, Eva, Wall-E) y diagnóstico rápido al hacer clic en cualquier robot.
¿Qué hice?
Creé un dashboard interactivo para gestionar una flota de robots de delivery en una ciudad futurista. Simula el centro de control de una empresa llamada "Neon Robotics", donde se monitorea en tiempo real el estado de las entregas y los robots autónomos.
¿Por qué?
Me apasiona la robótica y las interfaces de usuario con estética cyberpunk. Quise combinar ambos mundos para visualizar cómo sería gestionar una operación logística del futuro, donde máquinas inteligentes trabajan coordinadamente para entregar productos.
💪 FITTRACK PRO — Fitness Dashboard
Diseñé FitTrack Pro, un dashboard de fitness pensado como si fuera una app real. Tiene navegación por módulos (Dashboard, Workouts, Progress, Nutrition y Settings) y muestra métricas clave como calorías, entrenamientos, peso y ritmo cardíaco, junto con un gráfico de progreso.
🔥 Destacado:
Tarjetas con métricas claras y fáciles de entender
Gráfico de progreso (peso en el tiempo)
Sidebar con diferentes vistas
Insight de rendimiento
Diseño responsive y moderno
🧠 ¿Qué lo hace diferente?
Más que enfocarme en funcionalidades, me centré en cómo debería estar organizada una app de fitness real. La idea fue darle sentido a la navegación y a la información, no solo hacer pantallas sueltas.
🔥 Los invito a verlo:
👉 💪 FITTRACK PRO
👉 Repositorio de Github
👉 Mis notas 💚
FitTrack Pro - Tu Entrenador Personal Inteligente
"Entrena, Visualiza, mide y domina cada músculo."
Qué es:
Una aplicación web de fitness premium diseñada para mujeres y hombres que quieren llevar un control visual y detallado de sus entrenamientos. Incluye visualización anatómica interactiva con iluminación de músculos en tiempo real, registro de ejercicios por día, seguimiento de medidas corporales, control nutricional personalizado y sistema de alertas inteligentes.
Porqué?
Las apps de fitness tradicionales muestran listas aburridas de ejercicios sin contexto visual. FitTrack Pro resuelve esto mostrando exactamente qué músculos estás trabajando mediante siluetas anatómicas que se iluminan en rojo neón, creando una conexión mente-músculo desde la pantalla. Además, adapta la experiencia visual según el género del usuario con acentos de color personalizados.
Que tiene, que no tienen las demás ;)
1.Visualización anatómica dual - Siluetas SVG estilizadas (frontal y posterior) que destacan los grupos musculares trabajados con efectos de glow en rojo neón
2. Nutrición contextual- Sugerencias alimenticias que cambian según el día de entrenamiento y los músculos específicos que trabajas (ej: "Omega-3 para espalda", "Proteína para glúteos")
3.Tema adaptativo por género - Interfaz elegante con acentos rosa neón o azul neón que personaliza toda la experiencia
4.Dashboard unificado - Métricas, progreso, rutinas y alertas en una sola vista limpia y moderna
Proyecto: AI Knowledge Console
Construí AI Knowledge Console, un dashboard experimental para visualizar el progreso de aprendizaje en inteligencia artificial.
El panel muestra métricas como:
papers y artículos leídos
prompts diseñados
conceptos dominados
horas de deep work
Además incluye una visualización del crecimiento del conocimiento durante las últimas 12 semanas.
Lo interesante del proyecto
Quise explorar cómo los mismos datos pueden cambiar completamente de significado dependiendo de su diseño visual.
Por eso el dashboard incluye tres modos de visualización totalmente distintos.
Tufte Mode
Un diseño académico inspirado en Edward Tufte, con alto ratio datos-tinta, sin elementos decorativos y visualización minimalista.
Swiss Grid Mode
Un enfoque brutalista basado en el Estilo Tipográfico Internacional: grids estrictos, tipografía masiva y alto contraste.
Agent Mode
Una vista estilo terminal donde los datos se representan como JSON, con barras de progreso ASCII y sparklines de texto, como si el dashboard estuviera siendo leído por una IA o mi agente personal
Qué lo hace único
Este proyecto no cambia solo colores como un dark mode.
Cada modo transforma completamente:
el sistema tipográfico
la estructura del layout
el tipo de gráfico utilizado
la forma en que se representan los datos
Es un único dashboard con tres filosofías de visualización de información completamente distintas.
Genial consola para medir el progreso en IAs.
UniPedidos: El "Uber Eats" del campus universitario 🛵🎓
¿Alguna vez has intentado coordinar la entrega de un almuerzo o unos apuntes en pleno cambio de clases entre pabellones? Es un caos total.
¿Qué es UniPedidos? Es una app de delivery hiperlocal diseñada exclusivamente para dominar la logística dentro de un campus universitario.
¿Qué hice? Para este reto, construí el Dashboard de Operaciones, el centro de mando en tiempo real que usaría el equipo de logística para que nada se pierda.
¿Por qué? Porque detrás de cada entrega rápida en la universidad, se necesita un sistema que lea los picos de demanda a la misma velocidad que un estudiante corriendo a su examen final.
¿Qué lo hace único? Olvídate de los paneles aburridos. Implementé un diseño Glassmorphism en Dark Mode puro. Integra gráficos dinámicos (usando Recharts) para medir el volumen de pedidos vs. repartidores activos, y micro-interacciones (como el pulso verde en vivo) que te hacen sentir en el control de una misión espacial.
¡Todo creado a puro Vibe Coding! Apoyen con su 💚 y hagamos deploy de este proyecto directamente en la PlatziConf. 👇
UniPedidos - Dashboard de Operaciones
Por cierto, 🧡UniPedidos si existe, tiene operaciones en la PUCP (Lima, Perú), pero falta un dashboard para llevar el control.
Esta será un buen punto de partida para cambiar el excel.
Aqui les dejo para que revisen por si les interesa saber más: Inicio - UniPedidos
Buenos días, creé un Gaming Analytics Dashboard 🎮 con una estética futurista inspirada en interfaces de videojuegos. El proyecto muestra estadísticas de rendimiento de un jugador mediante tarjetas de datos, gráficos interactivos y varias secciones como biblioteca de juegos, performance, leaderboard y settings.
El dashboard incluye animaciones , gráficos dinámicos 📊, microinteracciones, efectos de glow ✨ y tarjetas de juegos con portada
Quise explorar cómo un dashboard tradicional puede convertirse en una experiencia más inmersiva combinando diseño, animación e interfaz gamer 🕹️.
🔗 Puedes ver y probar el proyecto aquí:
DevTracker es un dashboard web diseñado para visualizar el progreso de aprendizaje de un desarrollador como si fuera el sistema de estadísticas de un videojuego RPG.
Aprender a programar suele ser difícil de medir: estudiamos cursos, resolvemos ejercicios y construimos proyectos, pero muchas veces no vemos claramente cuánto estamos avanzando. DevTracker transforma ese proceso en métricas visuales que permiten entender en segundos cómo está evolucionando un desarrollador.
El dashboard incluye:
4 tarjetas KPI con métricas clave como horas de programación, problemas resueltos, tecnologías aprendidas y racha de días consecutivos programando.
Un gráfico de radar que muestra el nivel de habilidad en seis áreas técnicas: HTML, CSS, JavaScript, Backend, Bases de Datos y Algoritmos.
Un gráfico de barras que visualiza las horas de programación durante la semana para analizar consistencia y hábitos de estudio.
Navegación lateral colapsable con secciones para dashboard, proyectos, habilidades, tecnologías y estadísticas.
Sistema de niveles con XP que gamifica el aprendizaje y muestra el progreso hacia el siguiente nivel.
Lista de proyectos personales con estados como completado, en progreso y planificado.
Panel de insights automáticos que ofrece recomendaciones basadas en la actividad reciente.
La idea es simple: si los videojuegos tienen estadísticas para mostrar el progreso del jugador, DevTracker hace lo mismo para el aprendizaje de programación.
Esta super chevere esa malla 😮
Muy util y hasta como necesario, realmente muy bueno.
Beauty Salon
Plataforma SaaS para salones de belleza unisex que centraliza la gestión de citas, servicios y empleados en un solo lugar. Permite a los clientes reservar en línea 24/7, y a los dueños del salón administrar su agenda, catálogo de servicios y equipo de trabajo desde un panel intuitivo, reduciendo los tiempos muertos y mejorando la experiencia del cliente.
MI VIDA LECTORA
Un Dashboard de compañía y no de presión, para que forme parte de la rutina diaria de lectura, que sea el impulso a la motivación. Ver con tus propios ojos que estás avanzando, por lento que sea, se siente bien y aumenta las ganas de continuar.
Los libros nos dan numerosas oportunidades de vivir diferentes experiencias a través de sus historias, para mi la cantidad de libros que podemos leer durante nuestra vida me parece limitada, escoger cada lectura me parece un regalo y una oportunidad de vivir una vida nueva.
📖Registra cada sesión de lectura en 3 clics
🔥Mantén tu racha de días consecutivos
📚Visualiza tu biblioteca y califica tus libros
💬Guarda las frases que te marcaron
🕸️Monitorea el equilibrio entre géneros
⏳Calcula cuántos libros puedes leer en tu vida
LANDING + DASHBOARD :
Para este reto cree AVANZA dashboard personal sobre el avance a cursos tomados, con tarjetas sobre progreso, avance contra la meta, recomendaciones a cursos similares y un panel lateral que muestra los completados y pendientes.
¡Nice! Estos dashboard me encantan.
gracias
Quise diseñar algo que se sintiera como un producto real: una interfaz capaz de resumir el estado de una ciudad compleja como CDMX de forma clara, útil y visualmente fuerte.
La idea nace de algo muy cotidiano para quienes vivimos aquí: la ciudad cambia de ritmo todo el tiempo. Tráfico, aire, ruido, eventos, saturación por zonas, horas pico… todo afecta cómo te mueves, qué decides y hasta cómo vives el día.
Por eso construí Urban Pulse, un smart city dashboard conceptual que concentra ese pulso urbano en una sola experiencia.
¿Qué busqué hacer diferente?
No me interesaba solo cumplir con “3 tarjetas y un gráfico”.
Quise darle lógica real de producto:
Navegación funcional por secciones: Overview, Mobility, Environment, Events y Districts.
Filtros de tiempo útiles: Today, This Week y Weekend cambian los datos, insights y visualizaciones.
Información con contexto: no son métricas aisladas; cada vista responde una pregunta distinta sobre la ciudad.
Enfoque por distritos: porque una ciudad no se entiende como bloque único; se entiende por zonas, presiones y contrastes.
Diseño premium y claro: quise que se sintiera más como una plataforma real de inteligencia urbana que como una tarea escolar.
Lo que más me interesaba
Construir una experiencia que no solo “se vea bien”, sino que sugiera un caso de uso real:
entender el mejor momento para moverte
detectar zonas con mayor presión urbana
comparar distritos
visualizar cómo cambian movilidad, ambiente y actividad según el momento
Lo que incorpora
KPIs urbanos
actividad de ciudad por hora
congestión por distrito
inteligencia urbana resumida
district spotlight con condiciones clave por zona
vistas separadas para movilidad, ambiente, eventos y distritos
Más allá del reto, me gustó pensar este proyecto como una intersección entre diseño, data storytelling y producto digital aplicado a una necesidad muy real de nuestras ciudades.
Demo pública:
Si te gusta la propuesta, tu apoyo me ayuda muchísimo.
🏅 RunningTracker Pro: Dashboard de Preparación - Media Maratón Quindío 2026
Decidí usar el Reto 2 para construir algo que yo mismo necesito: un centro de comando personal para la preparación de carreras deportivas.
No quería una simple tabla de datos en blanco y negro. Quería la precisión de Garmin Connect combinada con la estética inmersiva de Apple Fitness, pero con identidad local. Toda la UI está bañada en la paleta de la MMQ (verde lima, esmeralda oscuro, cyan y detalles naranjas inspirados en las medallas del evento).
🛠️ ¿Qué construí? (Features Destacadas):
KPIs en Tiempo Real: 4 métricas clave (Volumen, Pace, VO2 Max y Carga) con indicadores de tendencia vs la semana anterior y números con espaciado font-mono para lectura rápida.
Interactividad "Cross-Filtering": El gráfico central de Recharts ("Tiempo en Zonas Cardíacas") no es estático. Es el "control remoto" del dashboard. Si haces clic en un día específico (ej. el sábado), todas las tarjetas superiores se actualizan para mostrar solo los datos de ese día.
Simulación de API (Asincronía): El botón "Sincronizar Reloj" tiene un estado de carga interactivo (setTimeout + spinners) que simula la importación de datos y dispara un Toast de confirmación mientras actualiza los KPIs en tiempo real.
Drill-down de Laps (Modal): Al hacer clic en el botón de la sesión dominical, se abre un Dialog grande (shadcn) con una tabla de Laps por kilómetro y un gráfico secundario, demostrando profundidad en la estructura de datos.
🧠 Mi AI Workflow:
Concepto y Arquitectura: Use el contexto de la carrera y métricas deportivas reales para definir las tarjetas usando NotebookLM.
Prompting Estructurado: Con Perplexity y Gemini 3.1 pro diseñé la arquitectura de componentes bajo el framework oficial de Vercel (Surface, Context, Constraints) para evitar iteraciones fallidas.
Generación de UI: v0 (Vercel) para construir todo en Next.js + Tailwind + shadcn/ui.🏅 Pueden ver el dasboard acá:
