A division of Johnson & Johnson, one of the world's largest and most diversified healthcare corporations. The medical devices group designs and manufactures innovative surgical, orthopedic, and interventional solutions used by healthcare professionals in over 60 countries.
I built a fullscreen touchscreen kiosk application for Johnson & Johnson Medical at the ECP Congress 2025, turning dense pharmaceutical content, video presentations, expert insights, and clinical leave behinds into an intuitive, self guided experience optimised for a 55" display running offline.
The app combines cinematic video playback with structured educational content and a built in analytics dashboard, all packaged as a standalone Electron desktop application that requires zero internet connectivity.
The Challenge
The kiosk needed to:
- Present two pharmaceutical video presentations (AKEEGA, BALVERSA) with completion tracking
- Display multi page expert insight documents and clinical leave behinds as scrollable image galleries
- Track every interaction, page views, dwell time, video completions, and drop off points
- Run entirely offline on Windows hardware with no server or cloud dependency
- Reset gracefully between visitors with an automatic inactivity timeout
- Export engagement data as CSV for post event analysis
The Solution
I built a React 19 single-page application wrapped in Electron, with an embedded SQL.js database for local analytics storage and a secure IPC bridge connecting the renderer to the main process.
Analytics Engine
- Custom
useAnalyticshook tracking page views, dwell time, and presentation sessions - SQL.js database persisted to the user data directory on every write
- Per day filtering, aggregated stats, and one-click CSV export to the Downloads folder
- Admin access - hidden from visitors, immediately available to event staff
Key Features
- Offline first architecture embedded database, bundled assets, file:// protocol. No internet required.
- Video completion tracking separate session tracking for each presentation, distinguishing completions from drop offs.
- Smart inactivity reset monitors touch, pointer, and keyboard events; suspends during video playback so viewers aren't interrupted.
- Built in analytics dashboard real-time engagement metrics matching the J&J design language, with date filtering and CSV export.
- Kiosk-safe UX fullscreen lock, no browser chrome, automatic return to attract screen between visitors.
Technologies Used
- Frontend: React, Vite, Tailwind CSS, React Router
- Desktop: Electron, Electron Builder (Windows x64 NSIS)
- Database: SQL.js (embedded SQLite)
- Analytics: Custom hooks, IPC bridge, CSV export