Dynamic Vehicle Routing
Relevant source files
The following files were used as context for generating this wiki page:
Dynamic Vehicle Routing in this project encompasses the technical architecture for resolving unique vehicle assets via URL slugs, the logic for filtering the fleet based on user specifications, and the logistics workflow for delivering these assets across diverse European locations. The system is designed to provide a concierge-level experience by mapping specific vehicle data to user-defined temporal and geographical constraints.
Sources: app/fleet/[slug]/page.tsx, app/locations/page.tsx, data/fleet.ts
Fleet Architecture and Slug Resolution
The system utilizes Next.js dynamic routes to resolve vehicle-specific data. The CarDetail component asynchronously retrieves a slug from the URL parameters to search the fleet data array. If a matching object is found, the system renders technical specifications, rental bullets, and high-resolution image galleries.
Data Model: The Car Type
The foundation of the routing system is the Car type definition, which ensures consistent data structures across the fleet list and individual detail pages.
| Field | Type | Description |
|---|---|---|
slug | string | Unique identifier used for URL routing. |
brand | string | Vehicle manufacturer (e.g., Ferrari, Porsche). |
model | string | Specific vehicle model name. |
category | string | Classification (GT, Supercar, Convertible, etc.). |
highlights | CarHighlight[] | Technical specs like Engine, Power, and 0–100 km/h. |
bullets | string[] | Specific rental terms or availability notes. |
Sources: data/fleet.ts:1-20, app/fleet/[slug]/page.tsx:7-17
Navigation Flow
The following diagram illustrates how a user moves from the aggregate fleet view to a dynamically routed vehicle detail page and subsequently into the request pipeline.
The application uses the fleet.find() method to match the URL parameter against the slug property in the data store.
Sources: app/fleet/[slug]/page.tsx:14-17, components/CarCard.tsx:5-10
Fleet Filtering and State Management
The filtering system allows users to dynamically narrow down the available routing options based on categories and search queries. This is managed through a combination of useMemo for performance and useEffect to synchronize the parent state.
Filtering Logic
The FleetFilters component processes the global fleet list based on two primary criteria:
- Category Matching: Filters by a specific vehicle class (e.g., "Performance SUV") or displays all if "All" is selected.
- String Query: Performs a case-insensitive search across the brand, model, and tagline of each vehicle.
Delivery Logistics and Routing Request System
Dynamic vehicle routing extends beyond the web interface into physical logistics. The system provides a specialized interface for requesting door-to-door delivery to various European hubs including Monaco, Nice, Milan, Geneva, and Zurich.
Request Pipeline
When a user initiates a request, the RequestForm component aggregates vehicle data (often pre-filled from the dynamic route) with delivery logistics.
- Endpoint Generation: The system generates dynamic WhatsApp and
mailtolinks. - Logistics Data: Users provide start/end dates and specific delivery locations (Airports, Villas, Yachts).
| Component | Functionality | Source Reference |
|---|---|---|
RequestForm | Aggregates name, car, dates, and location into a message. | components/RequestForm.tsx:18-50 |
LocationsPage | Defines the geographical scope (Monaco, Milan, Paris, etc.). | app/locations/page.tsx:100-110 |
WhatsAppFloat | Provides a persistent fast-track link to the concierge. | components/WhatsAppFloat.tsx:4-10 |
Sources: components/RequestForm.tsx:18-50, app/locations/page.tsx:100-110
Multi-Step Delivery Workflow
The project outlines a three-step process for finalizing vehicle routing to a physical location:
Summary of Delivery Capabilities
The system supports delivery to high-specification locations across Europe, with logistics handled on a per-request basis to ensure precision.
- Airports: Nice (NCE), Milan, Geneva, Paris.
- Luxury Points: Handover at premium hotels, private villas, and marinas.
- Service Availability: Europe-wide delivery is supported 24/7, with Monaco and the French Riviera serving as the primary logistics base.
Sources: app/locations/page.tsx:130-145, app/about/page.tsx:110-120