Vehicle Filtering System

Relevant source files

The following files were used as context for generating this wiki page:

• components/FleetFilters.tsx
• app/fleet/page.tsx
• data/fleet.ts
• components/CarCard.tsx
• app/page.tsx

The Vehicle Filtering System is a client-side search and categorization engine designed to help users navigate the AVP Supercars fleet. It provides real-time filtering of high-performance vehicles based on text queries (brand, model, or tagline) and predefined categories such as "GT", "Supercar", or "Luxury SUV".

The system is primarily implemented through a combination of a centralized data store and a dedicated filtering component. It ensures a seamless user experience by using React hooks to manage state and filter logic entirely within the browser, providing instantaneous feedback as users interact with the interface.

System Architecture

The filtering system follows a unidirectional data flow pattern where a parent container manages the state of the displayed fleet while a child component handles user input logic.

Data Flow Diagram

The following diagram illustrates how vehicle data moves from the static data source through the filtering logic to the UI components.

The flow ensures that the original fleet data remains immutable while the displayed list is updated dynamically.
Sources: app/fleet/page.tsx:1-30, components/FleetFilters.tsx:1-35

Core Components

FleetPage (Container)

The FleetPage acts as the orchestrator for the filtering system. It initializes the fleet data using useMemo to prevent unnecessary re-computations and maintains a list state that holds the currently filtered vehicles. It passes an onChange callback to the filter component to receive updates.
Sources: app/fleet/page.tsx:12-25

FleetFilters (Logic Provider)

This component contains the UI controls and the filtering algorithms. It extracts unique categories from the provided items to populate a dropdown menu and maintains a text input for string-based searches.

Feature	Implementation	Description
Search Query	useState<string>	Matches against brand, model, and tagline.
Category Filter	useState<string>	Filters by specific car category (e.g., "Convertible").
Dynamic Categories	useMemo	Automatically generates a list of categories from the fleet data.
Reset Function	onClick handler	Clears all active filters to show the full fleet.

Sources: components/FleetFilters.tsx:14-30, components/FleetFilters.tsx:55-75

Filtering Logic

The filtering logic is centralized within a useMemo hook inside the FleetFilters component. This ensures that the filtering calculations only run when the search query (q), selected category (cat), or the source items change.

Implementation Details

The string matching is case-insensitive and checks a concatenated string of the vehicle's identifying fields:

const matchesQ = !query || `${c.brand} ${c.model} ${c.tagline}`.toLowerCase().includes(query);

Sources: components/FleetFilters.tsx:27-29

Data Structures

The system relies on a strictly typed Car object defined in the data layer. This structure ensures that the filtering logic has access to all necessary fields for searching and categorization.

Field	Type	Use in Filtering
slug	string	Unique identifier (not used in filter logic).
brand	string	Primary search target.
model	string	Secondary search target.
category	string	Used for the dropdown selection.
tagline	string	Tertiary search target for descriptive keywords.

Sources: data/fleet.ts:1-20

User Interface Integration

The filtered results are mapped to CarCard components within a responsive grid. If no vehicles match the criteria, a fallback UI is displayed.

• Responsive Grid: Uses grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 to adapt to screen sizes.
• Empty State: Displays a "No vehicles match your search" message when the list length is zero.
• Reset UI: A dedicated button in FleetFilters allows users to quickly revert to the full fleet view.

Sources: app/fleet/page.tsx:80-100, components/FleetFilters.tsx:78-85

Summary

The Vehicle Filtering System provides a high-performance, client-side solution for exploring the AVP Supercars fleet. By decoupling the UI state from the raw data and utilizing React's optimization hooks, it delivers an interface that remains responsive regardless of the user's search complexity or category selection.