Scanapp
Escanea códigos EAN-13 con la cámara del móvil y arma pedidos contra NopCommerce.
SCANAPP· HERO · 16:9Herramienta mobile-first en Next.js 15 para almacén y ventas: escanea códigos EAN-13 con la cámara del dispositivo, resuelve productos contra NopCommerce y arma una cesta específica por cliente.
Proyecto colaborativo con un senior developer/colega. Mi contribución verificada cubre el scaffold inicial, auth con Supabase, shells de dashboard, escaneo de códigos, estado de scanner/pedido, lookup de productos en NopCommerce y selección de cliente. La colocación posterior de pedidos y la infraestructura de tests se añadieron después del handoff.
Qué estaba bloqueando el avance.
Los agentes de campo necesitaban una forma más rápida de crear pedidos mientras se movían por almacenes, stock rooms o ubicaciones de clientes. El proceso existente era lo bastante lento como para dejar clara la forma útil del producto: primero el cliente, primero la cámara, feedback de producto rápido y mínima fricción entre escaneos.
Cómo lo resolví.
Elegimos conscientemente una PWA para mover rápido sin perder una experiencia mobile-first instalable con acceso a cámara desde el navegador. Construí el scanner con ZXing y APIs de cámara del browser, luego añadí feedback sonoro y por color, cooldowns de escaneo, deduplicación GTIN, matching multi-EAN, guardas para lookups pendientes y una cesta con reducer. El lookup de producto corre por server actions autenticadas que resuelven credenciales NopCommerce por tenant tras login con Supabase.
Escáner de códigos
Selección de cliente
Cesta de productos
Historial de pedidos
Confirmación del pedido
Detalle del pedido