Capabilities
- Interactive maps
- Audio player
- Multi-language
Frontend
Angular
TypeScript
CSS
Mapbox
Leaflet
ShazamHMI CarPlay
CompletedAn experimental project replicating Apple CarPlay's HMI as an Angular web app: ten independent modules — maps, music, phone, messages, calendar, podcasts, books, weather and settings — over side navigation designed for an in-car screen, with a lock screen and an entirely hand-built visual system.
The challenge
I wanted out of CRUD territory and into a car interface: landscape screen, module-based navigation, state shared across apps and performance that holds up on modest hardware. The self-imposed rule was to use no component library at all.
Implementation
Ten lazy-loaded modules
Each app in the interface is an independent Angular module that only downloads when opened, with its own local state and a shared layer for what genuinely crosses modules.
No UI libraries
No Bootstrap, no Material, no component kit: layout, animations and components are hand-written with SCSS and SVG — which was the whole point of the exercise.
Real maps and music
The navigation module integrates MapBox GL and Leaflet with interactive maps, and the player pulls data from the Shazam API rather than mocked content.
Draggable, resizable widgets
The built-in calendar lets you drag and resize events, backed by angular-calendar plus the drag and resize utilities.
Multi-language and local persistence
Full interface internationalisation, a lock screen with live date and time, and user settings persisted to localStorage between sessions.
Built for vehicle displays
Domain-driven modular architecture and performance decisions aimed at resource-constrained devices, which is where a real HMI ends up running.