Adding New Vehicles

Relevant source files

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

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

The process of adding new vehicles to the AVP Supercars platform involves extending the centralized data repository used to drive the fleet display, filtering systems, and individual detail pages. The system is designed around a statically defined data structure that ensures type safety and consistency across the Next.js application.

By updating the central fleet registry, new vehicles automatically propagate to the main fleet gallery, category filters, and dynamic routing system. This architecture allows for seamless scaling of the inventory without requiring changes to the underlying UI components.

Data Structure and Type Definitions

Adding a vehicle requires adhering to the Car type definition. This structure ensures that all necessary metadata—ranging from performance specifications to marketing taglines—is present for rendering in various components.

The Car Interface

The Car type is composed of several nested types that define images and technical highlights.

export type CarImage = {
  src: string;
  alt: string;
};

export type CarHighlight = {
  label: string;
  value: string;
};

export type Car = {
  slug: string;
  brand: string;
  model: string;
  category: string;
  tagline: string;
  images: CarImage[];
  bullets: string[];
  highlights: CarHighlight[];
};

Sources: data/fleet.ts:1-21

Field Requirements

Field	Type	Description
slug	string	Unique identifier used for URL routing (e.g., ferrari-portofino).
brand	string	The manufacturer of the vehicle.
model	string	The specific model name.
category	string	Used for filtering (e.g., "GT", "Supercar", "Luxury SUV").
tagline	string	A brief marketing description shown on cards and headers.
images	CarImage[]	Array of image objects containing source paths and alt text.
bullets	string[]	List of key features or rental terms.
highlights	CarHighlight[]	Key performance specs (Power, Engine, 0-100 km/h).

Sources: data/fleet.ts:1-21, components/CarCard.tsx:43-50, app/fleet/[slug]/page.tsx:14-23

Implementation Workflow

To add a new vehicle, a developer must append a new object to the fleet array in the data configuration file.

Step-by-Step Integration

1. Define Identifiers: Assign a unique slug. This slug is critical as it corresponds to the dynamic route app/fleet/[slug]/page.tsx.
2. Asset Management: Place vehicle images in the public directory and reference them in the images array. The first image in the array is used as the primary thumbnail.
3. Categorization: Assign a category. The FleetFilters component dynamically extracts unique categories from the fleet data to populate its dropdown.
4. Specifications: Populate the highlights array with technical data such as "Engine", "Power", and "Drive".

This diagram shows how a single entry in the data layer populates multiple system components.
Sources: data/fleet.ts:23-146, components/FleetFilters.tsx:13-16, app/fleet/[slug]/page.tsx:11-14

System Propagation

Once a vehicle is added to the data array, several automated processes handle its display:

Dynamic Routing

The vehicle detail page uses the slug to find the correct data object. If a user navigates to /fleet/new-car-slug, the system searches the fleet array for a matching entry. If found, it renders the technical specs and images; otherwise, it triggers a notFound() state.
Sources: app/fleet/[slug]/page.tsx:11-14

Automatic Filtering

The FleetFilters component calculates the available categories at runtime. Adding a vehicle with a new category (e.g., "Hypercar") will automatically add that option to the user interface's filter dropdown without manual UI updates.
Sources: components/FleetFilters.tsx:13-16

Component Rendering

The CarCard component consumes the Car object to render the preview. It automatically applies cinematic overlays and a "Light sweep" animation on hover, ensuring the new vehicle matches the platform's visual standard.
Sources: components/CarCard.tsx:5-65

The relationship between the fleet registry and the individual vehicle data objects.
Sources: data/fleet.ts:1-21

Conclusion

Adding new vehicles to the AVP Supercars platform is a data-driven process centered on the data/fleet.ts configuration. By maintaining a strict TypeScript interface and centralized data array, the system ensures that new inventory is instantly integrated into the routing, filtering, and gallery systems with minimal manual overhead.