Touchscreen Customer Kiosk App (Multi-Language, On-Screen Keyboard)
An airport self-service retail/kiosk platform
Overview
The customer-facing touchscreen application running on the self-service kiosks. It is a full-screen Electron/React app designed for unattended public terminals with multi-language support and an on-screen keyboard for travelers.
The Challenge
A kiosk used by an international public must be usable with no keyboard or mouse, in multiple languages, and reliable when running 24/7 on locked-down terminal hardware. It also has to coordinate with a local hardware bridge and the central backend.
What We Built
An Electron desktop app structured with React, Redux and React Router (app/actions, app/components, app/containers, app/reducers, app/store, app/locales). Internationalization is handled with i18next / react-i18next plus a browser language detector, and touch input uses react-material-ui-keyboard for an on-screen keyboard. The UI is built on Material-UI with a responsive grid layout, talking to the backend over HTTP via axios and to local devices through a companion RPC service.
Technologies & Approach
Electron + React + Redux on top of the electron-react-boilerplate toolchain (Webpack, Babel, Flow, ESLint, Jest, electron-builder). Electron was chosen to ship a packaged, kiosk-mode desktop application with full hardware access and offline resilience, while React/Redux kept the multi-screen flow maintainable.
Outcome / Impact
Delivered the primary interaction surface of the kiosk platform, the screen travelers actually touch, integrated with the central API and the on-device hardware bridge.
Capabilities Demonstrated
- Building kiosk/touchscreen UX for unattended public terminals
- Full internationalization with runtime language detection
- On-screen virtual keyboard and touch-first interaction
- Packaging and shipping a locked-down Electron desktop app