Storage-Locker Kiosk UI (React + Strapi SDK)
A self-service luggage/storage-locker platform
Overview
The touchscreen front end for a self-service storage-locker solution, the on-kiosk UI customers use to pay for and access a locker to store their bags. A React SPA driven by the Strapi backend via its JavaScript SDK.
Why It Exists
Each locker terminal needed a simple, full-screen interface to rent a locker, take payment, and open/close storage, pulling locker and session data from the Strapi API and running on the kiosk’s embedded browser.
What We Built
A React 16 app (CRA, src/public) using strapi-sdk-javascript to talk to the backend, React Router for the rental flow, Bootstrap 4 plus a node-sass SCSS pipeline (with nodemon-watched CSS builds) for styling, and Axios for HTTP. Shipped with a Dockerfile and GitLab CI pipeline so it can be built as the website service in the on-device kiosk stack.
Technologies & Approach
React 16 + React Router + Bootstrap/SCSS, Strapi JS SDK for content/session data, containerized and CI-built to slot into both cloud and Balena/edge kiosk deployments.
Outcome / Impact
Delivered the customer-facing kiosk UI completing the locker solution alongside its Strapi API and on-device deployment.
Capabilities Demonstrated
- Kiosk / touchscreen web front-end engineering
- Headless-CMS-driven React SPAs
- Containerized, CI-built front-end delivery