Scanapp
Scan EAN-13-barcodes met de telefooncamera en bouw orders met NopCommerce.
SCANAPP· HERO · 16:9Next.js 15 mobile-first magazijn- en salestool voor het scannen van EAN-13-barcodes met een apparaatcamera, het opzoeken van producten in NopCommerce en het samenstellen van een klantspecifieke basket.
Samenwerkingsproject met een senior developer/collega. Mijn geverifieerde bijdrage omvat de initiële scaffold, Supabase-auth, dashboardshells, barcodescanning, scanner/order-state, NopCommerce-productlookup en klantselectie. Latere orderplaatsing en testinfrastructuur werden na handoff toegevoegd.
Wat in de weg stond.
Buitendienstmedewerkers hadden een snellere manier nodig om klantorders samen te stellen terwijl ze door magazijnen, stockruimtes of klantlocaties bewegen. Het bestaande proces was traag genoeg dat duidelijk werd welke vorm het product moest krijgen: klant eerst, camera eerst, snelle productfeedback en minimale frictie tussen scans.
Hoe ik het opgelost heb.
We kozen bewust voor een PWA om snel vooruit te gaan en toch een mobile-first, installeerbare ervaring met browsercamera-toegang te geven. Ik bouwde de scanner rond ZXing en browsercamera-APIs, en voegde daarna audio- en kleurfeedback, scan-cooldowns, GTIN-deduplicatie, multi-EAN productmatching, pending-lookup guards en een reducer-backed basket toe. Productlookup loopt via authenticated server actions die per tenant de NopCommerce-credentials ophalen na Supabase-login.
Barcodescanner
Klantselectie
Productbasket
Ordergeschiedenis
Orderbevestiging
Orderdetail