Architecture Overview
Relevant source files
The following files were used as context for generating this wiki page:
The AVP Supercars application is a modern web platform built using the Next.js framework (version 16.1.6) and React (version 19.2.3). It serves as a luxury car rental, sales, and sourcing showcase focused on the Monaco and French Riviera markets. The architecture follows a modular, component-based approach utilizing TypeScript for type safety and Tailwind CSS for styling.
The system is designed around a static data model for fleet management and dynamic routing for vehicle details. It integrates client-side state management for filtering and form handling, while leveraging Next.js's App Router for layout and navigation. Communication with the business is facilitated through a request system that generates direct WhatsApp and email links.
Sources: package.json:1-25, app/layout.tsx:1-10, README.md:1-5
Core System Architecture
The application utilizes a hierarchical structure where a global layout wraps individual page components. The RootLayout provides consistent navigation via a Navbar, a Footer, and a floating WhatsApp contact element across all views.
The diagram shows the high-level component hierarchy centered around the Root Layout.
Sources: app/layout.tsx:11-20, components/Navbar.tsx:21-30
Routing and Page Structure
The project uses the Next.js App Router. Key routes include:
/: Home page featuring signature collections and service previews./fleet: A searchable and filterable directory of all available vehicles./fleet/[slug]: Dynamic routes for individual vehicle technical specifications and rental info./services: Detailed breakdown of rental, sourcing, and event logistics./contact: Lead generation interface via a specialized request form.
Sources: app/page.tsx:18-40, app/fleet/page.tsx:20-35, app/fleet/[slug]/page.tsx:7-15, app/services/page.tsx:5-15
Data Management and Typing
The application's data layer is centralized in data/fleet.ts. This file defines the TypeScript interfaces that ensure consistency across the UI components.
Data Models
| Interface | Description | Key Fields |
|---|---|---|
Car | Primary vehicle data model | slug, brand, model, category, highlights |
CarImage | Structure for vehicle media | src, alt |
CarHighlight | Technical specifications | label, value |
Sources: data/fleet.ts:1-25
The class diagram represents the relationships between the vehicle data structures.
Sources: data/fleet.ts:1-25
Component Logic and User Interaction
Fleet Filtering System
The FleetFilters component manages local state to allow users to search the fleet array by brand, model, or category. It uses the useEffect hook to synchronize the filtered results back to the parent FleetPage.
The flow shows how user input triggers a cascade of state updates to filter the vehicle list.
Sources: components/FleetFilters.tsx:23-45, app/fleet/page.tsx:16-19
Request and Lead Generation
Lead generation is handled by RequestForm.tsx, which maintains a FormState object. Instead of a traditional backend submission, the architecture generates pre-composed communication links.
- WhatsApp Integration: Constructing a
wa.meURL with a URL-encoded string containing user details. - Email Integration: Constructing a
mailto:link with dynamic subject lines and body text.
Sources: components/RequestForm.tsx:23-65
Technical Specifications
| Feature | Implementation |
|---|---|
| Framework | Next.js 16.1.6 (App Router) |
| Styling | Tailwind CSS 4 with @tailwindcss/postcss |
| Animations | Framer Motion (Parallax effects, transitions) |
| Font | Geist Sans & Mono (Optimized via next/font) |
| Deployment | Vercel Platform compatibility |
Sources: package.json:10-22, README.md:15-30, app/globals.css:1-15
Summary
The AVP Supercars architecture is a performant, frontend-heavy application that prioritizes user experience through smooth animations and direct communication channels. By centralizing vehicle data and types, it maintains a scalable structure for adding new fleet items or services without complex database overhead.
Sources: app/page.tsx:42-100, data/fleet.ts:27-150