Sistema de gestión integral para lavandería con control de lavadoras
Stack: Claude Code · React 19 · Tailwind · Node.js + Express 5 · PostgreSQL · JWT · IoT (eWeLink/Sonoff) · Netlify · Fly.io · Supabase
Estado: desplegado en producción, puesta en marcha lavanderia-el-sol-demo.vercel.appReconstruí desde cero el sistema de Lavandería El Sol: clientes, notas, máquinas, inventario, caja, reportes y multisucursal. La app enciende y apaga las lavadoras a través de relés Sonoff, de modo que una máquina solo recibe corriente cuando la nota está cobrada.
Contexto
Lavandería El Sol operaba con un sistema del que no tenía el código fuente, sin posibilidad de corregir errores, adaptar procesos ni crecer. Debido a estas limitaciones, se decidió reconstruir el sistema desde cero manteniendo las funcionalidades críticas del negocio.
El proyecto se desarrolló de forma integral, desde la investigación del negocio y análisis del sistema anterior. La definición de wireframes, hasta el diseño de la interfaz en alta fidelidad, el prototipado en Figma y el desarrollo del software.
Objetivo
Modernizar el sistema, mejorar la arquitectura, permitir futuras mejoras y mantener las funciones clave del negocio.
Mi rol en el proyecto
- • Levantamiento de requerimientos
- • Análisis del sistema existente
- • Diseño del modelo de datos y de la arquitectura: PostgreSQL, API REST, roles, multisucursal y la capa de dispositivos.
- • Desarrollo completo de backend (Node.js/Express) y frontend (React)
- • Desarrollo de arquitectura UX/UI
- • Integración con hardware: alta de la aplicación ante el fabricante, OAuth, enlace de los relés y pruebas contra las máquinas físicas.
- • Despliegue y operación: pipeline a producción, migraciones automatizadas.
- • Pruebas automatizadas de backend y frontend, y auditoría de seguridad.
- • Documentación del proyecto.
Diseñar antes de programar
Después de realizar el análisis y requerimientos del producto
El proceso:
-
1. Investigación — Entrevisté a la dueña y analicé el sistema anterior para separar lo que de verdad les servía de lo que sufrían todos los días.
-
2. Wireframes — Resolví estructura, jerarquía y flujos en baja fidelidad, sin color ni estilo, para discutir qué va primero en la pantalla sin que la conversación se fuera al color de los botones.
-
3. Interfaz en alta fidelidad — Definí paleta, tipografía, iconografía y las pantallas terminadas.
-
4. Librería de componentes — Armé en Figma los componentes con sus variantes y los estilos compartidos de color y texto.
-
5. Prototipo navegable — Enlacé las pantallas y recorrí los flujos completos —recibir una nota, cobrarla, asignar máquina, cerrar caja— para encontrar los pasos de más antes de que costaran código.
-
6. Validación con el cliente — Les mostré el prototipo y ajusté antes de programar.
Las decisiones de diseño, y por qué:
-
Móvil primero — El trabajo ocurre de pie, con el teléfono. Diseñé primero la vista móvil —menú inferior al alcance del pulgar, botón de acción flotante— y en paralelo la de escritorio para las pantallas de administración, donde el dueño sí está sentado revisando ventas. En el escritorio la navegación se convierte en una barra lateral que muestra los accesos que caben y manda el resto al menú, en vez de encoger todo hasta que nada se lee.
-
El color dice el estado — Verde es "terminó, atiéndeme"; ámbar es "ojo, esto es una simulación o un aviso"; rojo es dinero o peligro. Un empleado debe saber qué máquina atender desde el otro lado del mostrador, sin leer una palabra. Por eso cada color de estado tiene su tono claro de fondo: la tarjeta entera cambia, no solo una etiqueta.
-
Tipografía por función — Los tamaños de texto no se eligen uno por uno: están definidos por su papel —el número grande de un KPI, el monto de una venta, el reloj de una máquina, el título de una tarjeta— y eso hace que dos pantallas hechas con meses de diferencia se vean igual de firmes.
-
Una pantalla, una tarea — Crear una nota, cobrar, asignar máquina y cerrar caja son momentos distintos con prisas distintas. Nada de un formulario gigante que lo hace todo: los pasos delicados (cobro, corte de caja, quitar una carga) ocurren en su propia vista o en un modal que obliga a confirmar.
-
Feedback inmediato para cada acción — La app confirma con movimiento: la palomita se dibuja, el error sacude el campo, los avisos entran en lugar de aparecer de golpe. Cuando alguien cobra o arranca una lavadora tiene que saber en el acto que sí pasó, sin quedarse mirando la pantalla con la duda.
-
Validación con el cliente — Les mostré el prototipo y ajusté antes de programar.
Características del sistema
- •
Notas de servicio — dos servicios (autoservicio y por encargo) con folios legibles para mostrador, modelo por cargas (cada carga con su lavadora, secadora, prendas y productos), ciclo de vida con transiciones validadas en el backend e historial auditable de cada cambio.
- •
Ticket para el cliente — recibo con formato de ticket de caja que se manda por WhatsApp como imagen: se rasteriza el nodo del recibo y se entrega por la hoja de compartir del teléfono.
- •
Máquinas y salidas — catálogo de lavadoras/secadoras por tipo y tamaño, temporizadores por tipo de carga, asignación de máquina en el momento de la salida y métricas de uso e ingreso por máquina.
- •
Control de máquinas por IoT — la app enciende la lavadora al arrancar una carga cobrada y la apaga al terminarla, vía relés Sonoff.
- •
Usuarios y roles — JWT con jerarquía de 3 niveles, sesión única por cuenta, check-in por primer acceso del día y permisos validados en el backend, no solo ocultos en la interfaz.
- •
Caja — apertura, movimientos, corte con "esperado vs. contado" e historial, con cierre automático a medianoche y cada cobro atado a su sesión de caja. Una sola caja abierta por sucursal, garantizado a nivel base de datos.
- •
Inventario — productos a granel y de marca (con venta por botella o por tapa), bolsas por rollo, insumos, stock mínimo con alertas, historial de movimientos y reporte diario de cierre. El stock se reserva al agregarse a una nota, se descuenta al cobrar y se libera al cancelar.
- •
Ventas y reportes — ingresos por periodo atribuidos al día real del cobro, desglose por concepto y por forma de cobro, gráficas, desempeño por empleado y exportación a PDF y CSV.
- •
Cierre del día — trabajo automático que a la hora local configurada libera máquinas olvidadas, normaliza notas y cierra sesiones.
- •
Multisucursal — cada empleado opera su sucursal; los administradores cambian desde el encabezado.
- •
App instalable (PWA) — se instala en Android e iPhone desde el navegador.
Retos técnicos
- • Diseñar una arquitectura que funcione sin internet
- • Integrar control físico de lavadoras mediante IoT
- • Asegurar sincronización de datos entre sistema local y nube
Tecnologías
AI
- • Claude Code
Frontend
- • React 19
- • Vite 7
- • Tailwind, CSS 3
- • Recharts
- • Progressive Web App (PWA)
Backend
- • Node.js
- • Express 5
- • API REST
- • JWT + bcrypt
- • Helmet
Base de datos
- • PostgreSQL
- • Triggers
- • Índices únicos parciales
Integraciones
- • IoT con dispositivos Sonoff (Relés vía nube eWeLink)
- • OAuth 2.0
Infraestructura
- • Netlify
- • Fly.io
- • Supabase (PostgreSQL gestionado con pooler de sesión)
- • Git (despliegue continuo)
Calidad
- • Vitest (backend y frontend)
- • Testing Library
- • Supertest
- • ESLint
Impacto
El nuevo sistema permite que el negocio:
- •
El negocio deja de depender de un sistema que no podía modificar: cada proceso del mostrador (recibir, cobrar, entregar, cortar caja) corre sobre software hecho a su medida y modificable.
- •
Una lavadora solo recibe corriente cuando la nota está cobrada: la regla del mostrador que antes dependía de que nadie se distrajera, ahora la impone el sistema.
- •
El corte de caja pasó de cuadrarse a mano a calcularse automáticamente, con "esperado vs. contado", historial de diferencias y separación entre efectivo y cobros fuera del cajón.
- •
El inventario deja de descuadrarse por ventas simultáneas gracias al sistema de reservas transaccional.
- •
Los administradores ven ventas, desempeño por empleado y uso por máquina desde el celular, en cualquiera de sus sucursales.
Built with care & love ❤️ 2026