Vehicle Info Application 🚗

Overview

The Vehicle Info Application is a project developed to display vehicle-related information such as brands, models, and vehicle types. The application features an intuitive user interface, dynamic filtering capabilities, and a responsive design, all while adhering to web accessibility standards.

Technologies Used

• Angular: The main framework used to build the frontend application.
• RxJS: For managing asynchronous data streams and implementing reactive programming.
• NgRx: To handle state management efficiently.
• Angular Material: For a modern, responsive UI design and prebuilt components.
• TypeScript: Ensuring strong typing and reducing runtime errors.
• SCSS: For writing modular, maintainable styles.
• CDK Virtual Scroll: To enhance performance by rendering only visible items in large datasets.
• VPIC API: The external API used to fetch vehicle-related data.

Requirements

The application was designed to meet the following requirements:

1. Display a list of vehicle brands:

   • The application fetches the brands from the VPIC API.
   • Brands are displayed in a scrollable, searchable list.

2. Filter brands dynamically:

   • Users can search for brands using an input field.
   • The list updates in real-time as users type.

3. Provide details for each brand:

   • Clicking on a brand navigates to a detail view showing models and vehicle types associated with that brand.

4. Follow web accessibility best practices:

   • Semantic HTML elements and ARIA attributes are used for improved accessibility.
   • Alerts are used to notify users of loading states and search results.

5. Responsive and performant UI:

   • The app uses Angular Material components for responsiveness.
   • Virtual scrolling ensures performance with large datasets.

Project Structure

src/
└── app/
    ├── features/
    │   └── brands/
    │       ├── components/
    │       │   └── brand-list/
    │       │       ├── brand-list.component.ts
    │       │       ├── brand-list.component.html
    │       │       └── brand-list.component.scss
    │       │   └── brand-detail/
    │       │       ├── brand-detail.component.ts
    │       │       ├── brand-detail.component.html
    │       │       └── brand-detail.component.scss
    ├── data-access/
    │   └── brands/
    │       ├── services/
    │       │   └── brand.service.ts
    │       ├── store/
    │       │   ├── brand.actions.ts
    │       │   ├── brand.effects.ts
    │       │   ├── brand.reducer.ts
    │       │   └── brand.selectors.ts
    │       └── models/
    │           └── brand.model.ts
    ├── app.state.ts
    │ 

Key Components

1. BrandListComponent:

   • Displays the searchable list of brands.
   • Handles user input for filtering.

2. BrandDetailsComponent:

   • Shows models and vehicle types for the selected brand.
   • Includes tabs for switching between models and types.

3. VehicleService:

   • Handles API calls to fetch brands, models, and vehicle types.

4. NgRx Store:

   • Manages the state of brands and ensures efficient updates.

How the Requirements Were Met

1. Fetching Data:

   • Used the VPIC API to retrieve data.
   • Implemented VehicleService to abstract API calls.

2. State Management:

   • Leveraged NgRx for managing the list of brands, ensuring scalability and maintainability.

3. Search Functionality:

   • Implemented with a debounced subject to reduce API calls and improve user experience.

4. Dynamic Routing:

   • Utilized Angular Router for navigation between the brand list and brand details views.

5. Accessibility:

   • Added ARIA roles and live regions for dynamic content updates.
   • Used keyboard navigation for interactive elements.

6. Performance Optimization:

   • Used CDK Virtual Scroll for rendering large datasets efficiently.

Running the Application

Prerequisites

• Node.js (v14 or higher)
• Angular CLI

Setup Instructions

1. Clone the repository:

   git clone https://github.com/your-repo/vehicle-info-app.git

2. Install dependencies:

   cd vehicle-info-app
   npm install

3. Run the application:

   ng serve

4. Open the application in your browser at:

   http://localhost:4200
   

Future Improvements

• Include end-to-end tests.
• Implement a dark mode toggle for better user experience.

Conclusion

This project demonstrates a robust approach to building a scalable and accessible Angular application. By leveraging modern frameworks, adhering to best practices, and focusing on performance and usability, the Vehicle Info Application delivers a seamless user experience.