- Internationalization (i18n): Full support for multiple languages.
- Map Integration: Interactive maps powered by MapBox.
- Multimedia Playback: Play audio content using data fetched via the Shazam API.
- Calendar Management: Integrated calendar functionalities for scheduling and display.
- Phone Call Simulation: Modules for call history, contacts, recent calls, voicemail, and keypad.
- Messaging Module: Send and receive messages with live updates.
- Podcast Player: Stream and manage podcast episodes.
- Dynamic Sidebar Navigation: Responsive navigation inspired by automotive HMI interfaces.
- Lock Screen: Custom lock screen with live date and time.
- Lazy Loading: Modules are loaded on demand for optimized performance.
- Highly Scalable Modular Architecture: Clean separation between modules for easy maintenance and scalability.
- State Management Across Modules: Shared and local state handled efficiently.
- Local Storage Handling: Persist user data and settings in browser local storage.
- Custom Theming and Icons: Modern UI with SVG icons and themed layouts.
- Font Awesome Icons: Extensive use of Font Awesome for UI elements.
- Custom Component Layout: All UI components are hand-crafted with Angular and SCSS, without relying on external UI libraries (no Bootstrap, Material, etc).
This project is inspired by the Apple CarPlay HMI (Human Machine Interface). I wanted to go beyond the typical web app and create something that blends the automotive UI experience with modern web technologies. It's a unique take on building a web application in Angular, challenging conventional patterns and focusing on modularity, scalability, and a visually appealing interface.
-
Install dependencies
npm install
-
Start development server
npm start
- The app will be available at
http://localhost:4200/
- The app will be available at
-
Build for production
npm run build
You can try the app online here:
https://hmi-carplay-angular.netlify.app/
If you have any suggestions or want to contribute, feel free to reach out!