CursosEmpresasBlogLiveConfPrecios
The Vibecoders League: retos

Reto 2: Dashboard personal

The Vibecoders League: retos

Contenido del curso

Retos Diarios

  • 1
    Cómo funciona The Vibecoders League

    Cómo funciona The Vibecoders League

    01:58 min
  • 2
    Reto 1: Landing page para un festival

    Reto 1: Landing page para un festival

    00:02 min
  • 3
    Reto 2: Dashboard personal

    Reto 2: Dashboard personal

    Viendo ahora
  • 4
    Reto 3: Automatiza una tarea real de tu día a día

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

    00:02 min
  • 5
    Reto 4: Asistente de notificaciones inteligente

    Reto 4: Asistente de notificaciones inteligente

    00:02 min
  • 6
    Reto 5: Integra dos mundos para resolver un problema común

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

    00:02 min
  • 7
    Reto 6: Explica un concepto complejo

    Reto 6: Explica un concepto complejo

    00:02 min
  • 8
    Reto 7: Serie de imágenes con narrativa

    Reto 7: Serie de imágenes con narrativa

    00:02 min
  • 9
    Reto 8: Photoshoot profesional con IA

    Reto 8: Photoshoot profesional con IA

    00:02 min
  • 10
    Reto 9: Trailer cinematográfico

    Reto 9: Trailer cinematográfico

    00:02 min
  • 11
    Reto 10: Agente de atención al cliente

    Reto 10: Agente de atención al cliente

    00:02 min
  • 12
    Reto 11: Agente interno para un equipo

    Reto 11: Agente interno para un equipo

    00:02 min
  • 13
    Reto 12: Un prompt, tres resultados

    Reto 12: Un prompt, tres resultados

    00:02 min
  • 14
    Reto 13: Prompt de sistema para un caso real

    Reto 13: Prompt de sistema para un caso real

    00:02 min

Reto 2: Dashboard personal

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

      Reto 2: Dashboard personal 

      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?

      1. Publica tu proyecto en la sección de comentarios de esta clase.

      2. Incluye una breve descripción de qué hiciste, por qué y qué lo hace único.

      3. Agrega un link público a tu proyecto para que Platzi y la comunidad puedan verlo y probarlo.

      4. Comparte tu proyecto en redes sociales, con amigos y familia. ¡Cualquier persona puede votar, no necesita suscripción!

      Comentarios79

      Javier ivan Patiño Castrillon

      Javier ivan Patiño Castrillon

      Estudiante
      Hace 4 meses
        L. Iván Carrasquel Ballesteros

        L. Iván Carrasquel Ballesteros

        Estudiante
        Hace 4 meses
      Gabriel Adrian Rojas

      Gabriel Adrian Rojas

      Estudiante
      Hace 4 meses
      Roberto Zuñiga

      Roberto Zuñiga

      Estudiante
      Hace 4 meses
      Valentina Arenas Lozano

      Valentina Arenas Lozano

      Estudiante
      Hace 4 meses
      •
      editado
        Angélica Guevara

        Angélica Guevara

        Estudiante
        Hace 4 meses
        Jimmy Andrey Rodriguez Osorio

        Jimmy Andrey Rodriguez Osorio

        Estudiante
        Hace 4 meses
      Sebastián Parra

      Sebastián Parra

      Estudiante
      Hace 4 meses
      •
      editado
      Carlos Hernández

      Carlos Hernández

      Estudiante
      Hace 4 meses
      •
      editado
      Marcos Ferreira

      Marcos Ferreira

      Estudiante
      Hace 4 meses
        Marcos Ferreira

        Marcos Ferreira

        Estudiante
        Hace 4 meses
      Diego Martinez

      Diego Martinez

      Estudiante
      Hace 4 meses
      •
      editado
      Juan Andres

      Juan Andres

      Estudiante
      Hace 4 meses
      Charles Castillo Rosas

      Charles Castillo Rosas

      Estudiante
      Hace 4 meses
      •
      editado
      Deisy Dayana Zambrano Soto

      Deisy Dayana Zambrano Soto

      Estudiante
      Hace 4 meses
      •
      editado
      Byron Agila

      Byron Agila

      Estudiante
      Hace 4 meses
      •
      editado
        L. Iván Carrasquel Ballesteros

        L. Iván Carrasquel Ballesteros

        Estudiante
        Hace 4 meses
      Gerardo Rojas

      Gerardo Rojas

      Estudiante
      Hace 4 meses
      •
      editado
        Gerardo Rojas

        Gerardo Rojas

        Estudiante
        Hace 4 meses
      Estarly Jesus Amaya Torrado

      Estarly Jesus Amaya Torrado

      Estudiante
      Hace 4 meses
      Kevin Gualteros

      Kevin Gualteros

      Estudiante
      Hace 4 meses
        Valentina Arenas Lozano

        Valentina Arenas Lozano

        Estudiante
        Hace 4 meses
        L. Iván Carrasquel Ballesteros

        L. Iván Carrasquel Ballesteros

        Estudiante
        Hace 4 meses
      valentina castrillon aguilar

      valentina castrillon aguilar

      Estudiante
      Hace 4 meses
      •
      editado
      Emily Aguilar

      Emily Aguilar

      Estudiante
      Hace 4 meses
      •
      editado
      Arturo garcia soto

      Arturo garcia soto

      Estudiante
      Hace 4 meses
        L. Iván Carrasquel Ballesteros

        L. Iván Carrasquel Ballesteros

        Estudiante
        Hace 4 meses
        Arturo garcia soto

        Arturo garcia soto

        Estudiante
        Hace 4 meses
      Jair Morales Olvera

      Jair Morales Olvera

      Estudiante
      Hace 4 meses
      Juan Camilo Silva Muñoz

      Juan Camilo Silva Muñoz

      Estudiante
      Hace 4 meses
      •
      editado

      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

      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.

      1. Tufte Mode

      Un diseño académico inspirado en Edward Tufte, con alto ratio datos-tinta, sin elementos decorativos y visualización minimalista.

      1. Swiss Grid Mode

      Un enfoque brutalista basado en el Estilo Tipográfico Internacional: grids estrictos, tipografía masiva y alto contraste.

      1. 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.

      dataset_lortbyron
      dataset_lortbyron
      dataset_lortbyron

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