Reto 2: Dashboard personal

Clase 3 de 14 • The Vibecoders League: retos

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.

Curso recomendado: Creación de Páginas Web con v0

Beneficio exclusivo:

Por ser estudiante Platzi, si terminas el curso de v0 y nos envías tu certificado a team@platzi.com, recibirás 12 meses de v0 Premium gratis.

¿Cómo compartir mi proyecto?

Publica tu proyecto en la sección de comentarios de esta clase.
Incluye una breve descripción de qué hiciste, por qué y qué lo hace único.
Agrega un link público a tu proyecto para que Platzi y la comunidad puedan verlo y probarlo.
Comparte tu proyecto en redes sociales, con amigos y familia. ¡Cualquier persona puede votar, no necesita suscripción!

Comentarios

Carlos Hernández

student••

🚀 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! 🙌💙

Javier ivan Patiño Castrillon

student•

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.

🔗

Valentina Arenas Lozano

student••

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:

Angélica Guevara

student•

Super

Gabriel Adrian Rojas

student•

📊 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

Gerardo Rojas

student••

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

Gerardo Rojas

student•

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

Juan Camilo Silva Muñoz

student••

🏅 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á:

Estarly Jesus Amaya Torrado

student•

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í:

Mauricio Giovanni Guerrero Contreras

student•

Proyecto: Autolog - Dashboard para Registro de mantenimiento o reparaciones en vehículos.

Lo que hice fue diseñar un dashboard para un Auto Service Repair Logbook, pensado como una aplicación moderna para llevar el control del mantenimiento de vehículos. La idea era que funcionara como un panel central donde se pudiera ver rápidamente la información más importante de cada vehículo, de una forma clara y visual.

Dentro del dashboard incluí tarjetas con métricas clave como servicios completados, mantenimientos pendientes, costos del año y la última fecha de servicio. También agregué visualizaciones de datos para mostrar tendencias, por ejemplo cómo han cambiado los costos de mantenimiento en los últimos meses. Además, incorporé navegación lateral para que la experiencia se sienta similar a la de una plataforma SaaS real.

Algo importante que quise incluir fue la posibilidad de cambiar entre diferentes vehículos, de modo que el panel actualice la información dependiendo del carro seleccionado. También agregué la opción de cambiar el idioma entre español e inglés, dejando el español como idioma por defecto para que el dashboard sea más flexible y accesible para distintos usuarios.

Lo que hace único a este dashboard es que combina una experiencia visual clara con características que normalmente se ven en productos SaaS reales, como navegación estructurada, métricas resumidas y visualización de datos. Todo esto está pensado para que la información del mantenimiento de vehículos sea fácil de entender y rápida de consultar.

Aquí está el enlace:

Arturo garcia soto

student•

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.

Kevin Gualteros

student•

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.

Jennifer Lisandra García Orellana

student•

🚀 FinanceHub – Dashboard inteligente para controlar tu patrimonio

Decidí crear FinanceHub, un dashboard financiero diseñado para visualizar de forma clara la evolución del patrimonio personal. La idea nació de una pregunta simple: ¿y si pudiéramos ver nuestras finanzas como lo hacen las fintech profesionales?

🔹 ¿Qué hace este proyecto? Permite visualizar el crecimiento del patrimonio, analizar tendencias mensuales y entender de forma rápida cómo evolucionan tus finanzas en el tiempo.

🔹 ¿Por qué lo hice? Muchas herramientas financieras son complejas o poco visuales. Quise crear una interfaz simple, moderna y elegante que permita comprender los datos en segundos.

🔹 ¿Qué lo hace único?

Diseño inspirado en dashboards fintech modernos.
Visualización clara del crecimiento financiero anual.
Interfaz oscura optimizada para lectura de datos.
Experiencia minimalista enfocada en la toma de decisiones.

👉 Puedes probar el proyecto aquí:

Si te gusta la idea o tienes sugerencias para mejorar el dashboard, agradecería mucho tu feedback y un 👍. ¡Tu opinión me ayudará a seguir mejorándolo!

Sebastián Parra

student••

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

Daynne Leon

student•

Creé un dashboard llamado Sweet & Bite Dashboard, pensado para un pequeño negocio de postres y snacks. El panel muestra información importante del negocio como ventas del día, pedidos realizados, clientes atendidos y el producto más vendido. También incluye un gráfico de ventas semanales, una sección de productos populares y un resumen del inventario.

Elegí este tema porque me interesa el mundo de la gastronomía y los negocios de comida. La idea del dashboard es ayudar al dueño del negocio a ver rápidamente cómo va su tienda y tomar decisiones más fácilmente.

Lo que hace único este dashboard es que está enfocado en un negocio de repostería, mostrando datos reales que un emprendedor de comida podría necesitar, como ventas, productos más vendidos e ingredientes disponibles, todo en un diseño simple y visual.

Deisy Dayana Zambrano Soto

student••

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

Andres David Martinez Torres

student•

SENTINEL_OS

¿Y si pudieras ver tu crecimiento profesional como si fuera el tablero de una nave espacial?" 🌌

Cuerpo: A veces, entre el trabajo y la universidad, es fácil perder de vista cuánto hemos avanzado. Por eso diseñé Sentinel OS.

Quería algo que no solo me dijera qué tareas tengo pendientes, sino que visualizara mi evolución en áreas críticas como las redes, el código y la ciberseguridad. Ver cómo ese gráfico de radar se expande con cada tarea completada es la dopamina necesaria para seguir estudiando a las 9 de la noche.

Este proyecto me permitió explorar la interactividad profunda en React y reafirmar mi marca personal en el sector tech.

Juan Pablo Muñoz

student•

GAME STATS ARCADE 2026 Es un centro de comando analítico con estética retro-futurista para la industria del gaming.

¿Qué es? Un dashboard de alta fidelidad que procesa datos complejos de ventas y usuarios bajo una capa visual de neones y bits.

¿Por qué? Para demostrar que el diseño de producto y el análisis de datos pueden tener alma, transformando métricas frías en una experiencia narrativa coherente.

¿Lo único? No es solo un skin decorativo: es un rompecabezas de información que oculta un secreto, y si no lo encuentras F en el chat

Byron Agila

student••

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.

Andres Rafael Tito

student•

Para este reto quise construir algo que uso en mi vida personal.

Hace un tiempo me di cuenta de que mis mejores rachas de hábitos siempre pasaron cuando había alguien más mirando.

No por presión, sino porque cuando compartes un compromiso con personas que te importan, de repente ya no quieres fallar solo por ti, quieres fallar menos por ellos también.

Diseñé un dashboard para trackear tres hábitos que estoy trabajando este año: gym, lectura y aprender inglés.

Pero lo que lo hace diferente es que no es solo mío.

Mis amigos Roger, Ricardo, Moises y Leonardo están adentro también. Cada uno tiquea sus días, y hay un ranking en vivo que se reordena solo cada vez que alguien completa un hábito.

El podio no es decorativo. Es la razón por la que uno abre la app el lunes por la mañana.

Creo que los mejores sistemas de hábitos no se construyen en soledad. Se construyen con un círculo de personas que están tratando de ser mejores al mismo tiempo que tú.

Pablo Hurtado

student•

Dashboard Logístico Inteligente: De Excel a Next.js 14

¿Qué hice?

Desarrollé un dashboard interactivo de alto rendimiento utilizando v0 de Vercel, Next.js y Tailwind CSS. Transformé un reporte operativo de ventas y logística (2025-2026) almacenado en Excel en una plataforma visual dinámica. El sistema centraliza KPIs críticos como ingresos totales ($5,427.90), márgenes de rentabilidad y métricas de carga operativa, desglosando el rendimiento por modalidad de transporte (Aéreo vs. Marítimo) y ranking de clientes.

¿Por qué lo hice?

En el ecosistema empresarial de Nicaragua, muchas PyMEs dependen de archivos de Excel aislados que dificultan la toma de decisiones rápida. Mi objetivo fue demostrar cómo la Inteligencia Artificial Generativa y las herramientas modernas de desarrollo web pueden cerrar la brecha entre la contabilidad tradicional y la agilidad digital. Quise crear una herramienta que no solo muestre datos, sino que cuente la historia financiera del negocio para optimizar los costos de envío y mejorar el flujo de caja.

¿Qué hace único a este proyecto?

Lo que diferencia a este proyecto es su enfoque interdisciplinario:

Precisión Contable: No son datos de relleno; el dashboard refleja cálculos reales de márgenes netos y pesos pagados, aplicando lógica financiera directamente al código.
Velocidad de Desarrollo: Utilicé un flujo de trabajo basado en IA (v0) para prototipar en minutos lo que antes tomaba días, manteniendo un estándar de diseño profesional (UI/UX) digno de una SaaS.
Escalabilidad: Está diseñado bajo una arquitectura que permite integrar APIs de sistemas existentes (como mi proyecto Cacao POS), transformando datos estáticos en una herramienta de Business Intelligence lista para la web.

Ramon Andres Gutierrez Pino

student•

Les comparto SkillMap Dashboard, un proyecto que imaginé como una herramienta ideal para estudiantes de Platzi. La idea es poder visualizar qué habilidades hemos trabajado, qué tan desarrolladas están y qué tan alineadas van con lo que hoy necesita el mercado.

Me motivó crear esto porque siento que muchas veces aprendemos bastante, pero no siempre tenemos una forma clara de medir nuestro progreso real en habilidades ni de entender qué debemos fortalecer para ser más competitivos.

McKinsey ha señalado que en un mercado laboral cada vez más digital y cambiante, desarrollar habilidades fundacionales se relaciona con una mayor probabilidad de empleo, mayores ingresos y mayor satisfacción laboral. También ha proyectado que la demanda por habilidades de alta calificación seguirá creciendo con fuerza en los próximos años.

Por eso quise diseñar un dashboard que conecte aprendizaje, progreso y empleabilidad de una forma visual, moderna y útil. Si les gustó el concepto y la ejecución, me ayudaría mucho su voto. 🙌

Reto 2: Dashboard personal

Retos Diarios

Cómo funciona The Vibecoders League

Reto 1: Landing page para un festival

Reto 2: Dashboard personal

Reto 3: Automatiza una tarea real de tu día a día

Reto 4: Asistente de notificaciones inteligente

Reto 5: Integra dos mundos para resolver un problema común

Reto 6: Explica un concepto complejo

Reto 7: Serie de imágenes con narrativa

Reto 8: Photoshoot profesional con IA

Reto 9: Trailer cinematográfico

Reto 10: Agente de atención al cliente

Reto 11: Agente interno para un equipo

Reto 12: Un prompt, tres resultados

Reto 13: Prompt de sistema para un caso real