App de Reto 21 Dias para Distribuidores Herbalife
Prototipo funcional de app web para que distribuidores Herbalife acompañen a sus clientes en el reto de 21 dias — con dashboard de progreso, hábitos, planes de producto y panel de coach.
El Reto
Los distribuidores Herbalife llevan a sus clientes en retos nutricionales de 21 dias, pero el seguimiento se hace por WhatsApp, fotos y libretas. No hay forma de visualizar progreso, registrar hábitos diarios ni ver si el cliente realmente esta cumpliendo el plan. El distribuidor pierde clientes por falta de continuidad — no de producto.
El reto fue construir un prototipo funcional (no solo mockup) que el distribuidor pudiera mostrar al cliente como demo: una app web con login, dashboard, registro de hábitos, planes de producto y vista de coach. Tenia que sentirse como una app real para validar la propuesta de valor antes de invertir en backend, base de datos y autenticacion productiva.
Restriccion tecnica clave: cero dependencia de servicios externos. El prototipo debia poder mostrarse en cualquier navegador (incluso sin internet), sin servidor encendido, sin login real. Y al mismo tiempo dejar la arquitectura lista para que cuando se decidiera el build productivo, solo hubiera que reemplazar la capa de datos.
La Solucion
Construimos una SPA en React 18 + Vite con Tailwind CSS 3 e iconos lucide-react. Toda la app vive en un solo arbol de componentes, con navegacion por estado (useState) en lugar de react-router — para que el prototipo abra rapido y no requiera URLs reales que distraigan al cliente en la demo.
El login es simulado: cualquier email + password ≥6 caracteres entra al dashboard. Los datos del usuario demo (peso actual, objetivo, dia del reto, hábitos pendientes) viven en constants/index.js — manipulables por el distribuidor antes de enseñar la app a un cliente concreto.
Dejamos la arquitectura preparada para upgrade: agregar React Router, intercambiar el login simulado por JWT contra un backend (Node o Flask), y conectar persistencia real (PostgreSQL). El componente ConstructionView marca explicitamente las secciones pendientes de implementar en la version productiva.
Features Clave
Dashboard de Progreso del Reto
Vista principal con peso actual, peso objetivo, dia del reto en curso, hábitos del dia y proximos hitos. El distribuidor ve de un vistazo en que dia va el cliente y que falta.
Hábitos Diarios Configurables
Lista de hábitos editables (vasos de agua, batido, ejercicio, suplementos). Cada cliente puede tener su propio set de hábitos. INITIAL_HABITS define el demo, listo para personalizarse.
3 Planes de Producto Herbalife
Plan Basico, Avanzado y Deportivo. Cada plan tiene sus productos, sus precios y sus instrucciones de uso. PRODUCT_PLANS en constants/index.js — un distribuidor puede ajustar precios antes de la demo.
Login Simulado para Demos en Vivo
Cualquier email + password ≥6 caracteres entra al dashboard. Sin servidor, sin BD, sin que el distribuidor tenga que crear cuentas demo. Ideal para cerrar ventas en persona.
Sidebar de Navegacion por Estado
Cambio de vista (Login / Register / Dashboard / Construction) via setView() — sin react-router. Reduce dependencias y hace que la demo cargue instantaneamente.
Arquitectura Lista para Build Productivo
Vistas separadas en src/views/, componentes UI reutilizables en src/components/ui/, datos demo aislados en constants/. Migracion a backend real (Flask/Node + PostgreSQL + JWT) sin reescribir la UI.
Como se Ve
Login con Imagen de Fondo
Pantalla de bienvenida con imagen de fondo de marca, formulario de email + password. Acepta cualquier credencial valida (≥6 chars) — perfecto para demos sin setup.
Dashboard Principal con Progreso
Cards con peso actual, objetivo, dia del reto. Lista de hábitos del dia con checkboxes. Sidebar lateral con accesos a planes, perfil, comunidad y construccion (placeholder).
Vista de Planes de Producto
3 cards (Basico / Avanzado / Deportivo) con productos, precios y descripcion. Permite al distribuidor mostrar el catalogo sin abrir un PDF aparte.
Construction View para Secciones Pendientes
Placeholder transparente con la seccion futura — comunidad, video coaching, recordatorios push. Marca explicitamente que sigue sin que parezca un bug.
Detalles Tecnicos
| Componente | Tecnologia |
|---|---|
| Framework | React 18 + Vite |
| Estilos | Tailwind CSS 3 |
| Iconos | lucide-react |
| Routing | Sin react-router — navegacion por useState |
| Auth | Simulada (frontend-only, sin backend) |
| Estado | useState lifted al App component |
| Datos demo | constants/index.js (PRODUCT_PLANS, INITIAL_HABITS) |
| Build | Vite (dev en localhost:5173, build estatico) |
Resultados
Prototipo / MVP
Tipo de proyecto
<1 seg
Tiempo de carga del demo
4 (Login, Register, Dashboard, Construction)
Vistas implementadas
Cero
Dependencias de servidor
Si — arquitectura preparada
Listo para upgrade productivo
Servicios relacionados
¿Tienes una idea de app pero quieres validarla antes de invertir en backend?
Te armamos un prototipo funcional en 1-2 semanas — sin servidor, sin BD, listo para enseñar a clientes y medir interes real.