Fleet Display & Management
Relevant source files
The following files were used as context for generating this wiki page:
The Fleet Display & Management system is responsible for showcasing the curated collection of luxury vehicles available for rental and sourcing. It provides a high-performance, interactive interface for users to browse, filter, and view detailed specifications of supercars, GTs, and performance SUVs.
The system is built using a decoupled architecture where vehicle data is defined in a structured static dataset, while the frontend utilizes React's state management and Framer Motion for a fluid user experience. The primary entry point is the /fleet route, which serves as a searchable catalog, leading to individual dynamic routes for specific vehicle details.
Data Architecture & Model
The foundation of the fleet system is a strongly typed data structure defined in data/fleet.ts. This ensures consistency across the grid display, filtering logic, and detail pages.
Vehicle Data Schema
| Field | Type | Description |
|---|---|---|
slug | string | Unique identifier used for URL routing. |
brand | string | The manufacturer of the vehicle (e.g., Ferrari, Porsche). |
model | string | The specific model name. |
category | string | Classification for filtering (e.g., Supercar, GT, Luxury SUV). |
tagline | string | Short marketing description. |
images | CarImage[] | Array of objects containing src and alt text. |
bullets | string[] | List of key service offerings related to the car. |
highlights | CarHighlight[] | Technical specifications (label/value pairs). |
Sources: data/fleet.ts:1-20
This diagram shows the relationship between the primary Car type and its supporting metadata structures. Sources: data/fleet.ts:1-20
Interactive Catalog (Fleet Page)
The main fleet page (app/fleet/page.tsx) implements a client-side filtering system that manages the visibility of vehicle cards based on user input.
Filtering Logic
The FleetFilters component manages two primary states: a text query (q) and a category selection (cat). It computes a filtered list of vehicles by matching the query against the brand, model, and tagline, and checking the category equality.
The flow of data from user interaction to the final rendered grid. Sources: components/FleetFilters.tsx:16-31
Component Implementation
- FleetFilters: Uses
useMemoto generate a unique list of categories from the data and perform the filtering operation. It triggers anonChangecallback to update the parent state. Sources: components/FleetFilters.tsx:10-40 - CarCard: A presentational component that renders a preview of the vehicle, including a "light sweep" CSS animation and badges for category and availability status. Sources: components/CarCard.tsx:4-35
Dynamic Vehicle Detail System
Individual vehicle pages are handled by a dynamic route app/fleet/[slug]/page.tsx. This component is responsible for retrieving specific vehicle data based on the URL parameter and rendering a comprehensive technical overview.
Detail View Components
- Hero Section: Displays the brand, model, and category-specific tagline. Sources: app/fleet/[slug]/page.tsx:16-22
- Media Gallery: A responsive grid rendering all images associated with the car slug. Sources: app/fleet/[slug]/page.tsx:39-54
- Specifications Grid: Renders the
highlightsarray into a 4-column layout (on desktop) showing metrics like Horsepower, 0–100 km/h times, and engine type. Sources: app/fleet/[slug]/page.tsx:66-76 - Service Info: Displays the
bulletsarray, detailing rental terms and delivery options. Sources: app/fleet/[slug]/page.tsx:60-64
Data Retrieval Flow
The detail page uses an asynchronous parameter match to locate the vehicle in the static fleet array. If no match is found, it invokes the Next.js notFound() utility.
The logic for resolving dynamic routes to specific vehicle data entries. Sources: app/fleet/[slug]/page.tsx:9-14
Summary
The Fleet Display & Management module provides a robust interface for vehicle discovery. By combining a centralized data model in data/fleet.ts with interactive components like FleetFilters and dynamic routing in [slug]/page.tsx, the system ensures that vehicle information is easily maintainable and highly accessible to the end user.