Dashboard de ventas en Caracas con mapa 3D
Stack y Tecnologías
En una sola pantalla muestra cuánto vende cada parroquia, qué productos se mueven, cómo paga la gente y qué está pasando ahora mismo en cada punto de venta. El centro de todo es un mapa 3D de la ciudad: cada hexágono es una zona de unos 400 metros, y su altura y su color indican cuánto vendieron las bodegas que están ahí.
Soy Alberth Corrales, desarrollador full stack en Caracas. Diseñé y programé este proyecto como complemento visual de Bodega Control, la app de punto de venta para bodegas que estoy desarrollando. En este caso de estudio te cuento qué problema resuelve, cómo lo construí y qué decisiones tomé para que funcione igual de bien en un monitor grande que en un teléfono.
El reto: entender una red de bodegas de un vistazo
Una bodega sabe cuánto vendió hoy. Lo difícil es ver el panorama cuando son cientos de bodegas repartidas por toda la ciudad. ¿Dónde se vende más? ¿Qué zona creció esta semana? ¿Dónde se está acabando la harina? Una tabla con mil filas no responde esas preguntas rápido; un mapa sí.
Además, el comercio en Venezuela tiene particularidades que un dashboard genérico no recoge:
- Dos monedas. Se vende en dólares y en bolívares, así que todo el tablero cambia entre USD y Bs con un solo botón.
- Métodos de pago locales. Pago Móvil, efectivo en dólares, punto de venta y efectivo en bolívares. Si te interesa este tema, lo explico a fondo en pasarelas de pago en Venezuela.
- La quincena. Las ventas suben los días 15 y 30, cuando la gente cobra. El timeline del dashboard marca esas fechas para que el pico tenga explicación.
- Geografía real. Los cinco municipios del Distrito Metropolitano (Libertador, Chacao, Baruta, Sucre y El Hatillo) y 26 parroquias, con El Ávila al norte como referencia visual.
La solución: un mapa 3D de Caracas como protagonista
Dividí la ciudad en una rejilla de 1.366 hexágonos. Cada uno suma las ventas de las bodegas que caen dentro, y se eleva y cambia de color según cuánto vendió: de azul profundo (poca venta) a ámbar y coral (mucha venta). Así, Petare y Catia se ven de inmediato como las zonas de mayor movimiento, sin leer un solo número.
El mapa no es solo decorativo. Todo lo que pasa en él está conectado con el resto del tablero:
- Al pasar el cursor por una fila del ranking, su parroquia se ilumina en el mapa.
- Al tocar un municipio, el mapa atenúa el resto de la ciudad y el ranking muestra solo sus parroquias.
- Con el timeline recorres los últimos 30 días y las barras del mapa suben y bajan animadas, día por día.
- Hay cuatro vistas de cámara (general, cenital, oeste y este) para acercarse a cada zona.
- Los arcos animados salen de un centro de distribución en La Yaguara hacia las parroquias que más venden, como si mostraran las rutas de abastecimiento.
Qué muestra el dashboard
- Ventas de las últimas 24 horas, con su variación frente al mismo día de la semana anterior y su equivalente en la otra moneda.
- KPIs del día: tickets, ticket promedio, margen bruto y alertas de stock.
- Ranking por parroquia, con barra de proporción y variación semanal.
- Top 10 de productos, desde la harina de maíz hasta la mantequilla.
- Métodos de pago, en anillos que muestran el peso de cada uno en el monto total.
- Tendencia de 30 días comparada con el mismo período del año anterior. Al tocar un día, el mapa salta a esa fecha.
- Ventas por municipio y ritmo por hora, para saber cuándo se concentra la demanda.
- Actividad en vivo: ventas, stock bajo, pedidos a proveedores y cierres de caja a medida que ocurren.
Diseñado para escritorio, tablet y teléfono
En un monitor grande, el mapa ocupa todo el fondo y los paneles de datos flotan sobre él con efecto de vidrio. En tablet, el mapa pasa arriba y los paneles se reorganizan en dos columnas. En el teléfono todo queda en una sola columna, el menú lateral se convierte en un panel deslizable y el mapa se aligera para que el equipo no se caliente.
Antes de dar el proyecto por terminado lo revisé con capturas automáticas en tres tamaños de pantalla y corregí cada detalle que se rompía: un encabezado que se partía en dos líneas, nombres de parroquias que se cortaban o un encuadre que dejaba Petare detrás de un panel. También cuidé la accesibilidad: se puede navegar con el teclado, los botones tienen nombres que lee un lector de pantalla y las animaciones se reducen si el usuario lo tiene configurado en su sistema.
Tecnologías que usé
| Tecnología | Para qué |
|---|---|
| React 18 + TypeScript | Interfaz dividida en componentes reutilizables y tipados |
| Three.js con React Three Fiber | El mapa 3D: 1.366 hexágonos en una sola malla instanciada para que la animación sea fluida |
| Tailwind CSS | Sistema de diseño con tokens de color, tipografía y espaciado |
| GSAP | Entrada de la cámara, aparición de los paneles y números que se animan al cambiar |
| Recharts | Gráficos de tendencia |
| Vite | Compilación rápida y archivos optimizados para producción |
| Playwright | Capturas automáticas para revisar el diseño en varios tamaños de pantalla |
| Netlify | Alojamiento de la demo |
El mapa se carga por separado del resto de la página, así que los paneles aparecen enseguida mientras el 3D termina de prepararse. Las fuentes van incluidas en el proyecto, sin depender de servicios externos.
Estado del proyecto
La demo funciona con datos de demostración: las ventas, las bodegas y los eventos en vivo son simulados, aunque siguen patrones reales del comercio caraqueño, como los picos de quincena y de los sábados. Los contornos de los municipios también son aproximados. El código ya está preparado para recibir datos reales: el siguiente paso es conectarlo a la API del punto de venta de Bodega Control y a un GeoJSON oficial de parroquias.
¿Necesitas un dashboard para tu negocio?
Si tienes una cadena de tiendas, una distribuidora, una flota de reparto o cualquier operación repartida por la ciudad, un tablero como este te deja ver tu negocio completo en un minuto. Desarrollo dashboards y sistemas a medida desde Caracas, conectados a los datos que ya tienes; puedes ver todos mis servicios en diseño y desarrollo web en Caracas. Si quieres una idea de la inversión, revisa cuánto cuesta desarrollar una app en Venezuela y luego escríbeme para hablar de tu proyecto.