● Proyecto destacado · Frontend · PWA

KAVANA Calculadora — eficiencia de producción que funciona donde la fábrica no tiene señal

Durante 8 años trabajé en producción. Sé lo que pasa cuando el ordenador de la línea no tiene red: el parte de eficiencia se apunta en un papel, y el papel se pierde. Esta PWA hace el cálculo en el dispositivo, sin servidor, sin conexión, sin excusas.

Tecnologías: Vanilla JavaScript (ES Modules), localStorage, Service Worker, PWA.

34
Tests (node --test)
0
Dependencias de runtime
9
ADRs documentados
100%
Offline (Service Worker)
El origen

Por qué construí esto

En fábrica, la eficiencia de un turno se calcula al final de la jornada: piezas producidas frente a tiempo disponible. Con varias líneas, modelos distintos y medidas en metros o piezas, el cálculo manual es lento y propenso a errores. Y el software que lo resuelve suele asumir que en planta hay internet, que no siempre lo hay.

Esta aplicación nace de esa realidad: un operario con una tablet industrial, sin red, debe poder anotar producción, ver la eficiencia al instante y guardar el histórico. Todo en el dispositivo, sin backend que dependa de la conexión.

Lo que demuestra

Capacidades técnicas visibles en este proyecto

📱

PWA offline-first real

Service Worker con caché de todos los assets (v17). Instalable en el dispositivo, funciona sin conexión, carga en menos de 500ms.

Zero dependencias

Vanilla JavaScript con ES Modules nativos. Sin framework, sin bundler, sin build step: el código que ves es el código que se ejecuta.

🧮

Motor de cálculo puro

Eficiencia por tiempo teórico vs turno real, soporte de piezas/hora y metros/hora, desglose de producción y Meta 100% con reparto greedy.

💾

Persistencia localStorage

Plantillas de línea, sesiones de producción e histórico completos en el dispositivo, con export/import JSON para migrar entre equipos.

📊

Exportación Excel

Genera .xlsx del histórico acumulado con SheetJS, integrable con la oficina de producción sin fricción.

🎨

Temas por línea

6 paletas de color para identificar líneas de producción de un vistazo, con anti-FOUC para que el tema se aplique antes de pintar.

Criterio aplicado, no solo código

Decisiones de arquitectura que responden a restricciones reales

🔄 Vanilla JS en vez de React

Una SPA de lógica acotada no necesita un framework de 100KB. ES Modules nativos dan estructura sin build step. ADR-002. ADR →

💾 localStorage en vez de IndexedDB

Primero fue Dexie/IndexedDB, pero para datos pequeños y uso individual la complejidad no se justificaba. Se migró a localStorage: síncrono, simple, universal. ADR-008. ADR →

🧩 CustomEvent bus en vez de estado global

Los módulos UI se comunican con eventos nativos del navegador, sin librería de estado. Desacoplamiento sin dependencias. ADR-005.

📐 Meta 100% con reparto greedy

El objetivo para llegar al 100% se reparte entre los modelos activos con un algoritmo greedy, desglosado en PALETS + FILAS + PAQUETES. ADR-009.

El flujo completo

Cómo funciona un turno de producción

Operario (tablet industrial, sin red) │ configura la línea con su plantilla ▼ Calculadora (motor puro en el dispositivo) │ eficiencia en tiempo real · piezas o metros por hora ▼ localStorage (en el propio dispositivo) │ sesión guardada al instante, sin esperar a nadie ▼ Historial + Export acumulado del turno · Excel para la oficina · backup JSON
Demo en vivo

Pruébala ahora

📱 La app

PWA instalable en el móvil o la tablet. Funciona offline: los datos se guardan en el dispositivo y no dependen de ningún servidor.

Abrir la app →

💻 Código + decisiones

Repo público con 34 tests, 9 ADRs y la documentación técnica. Sin build step: clonar y abrir index.html.

Ver en GitHub →

¿Quieres ver más?

Este es uno de los tres proyectos del portfolio. Cada uno con su problema real, sus decisiones documentadas y su código verificado.