Technology Stack
Relevant source files
The following files were used as context for generating this wiki page:
The AVP Supercars project is a modern web application built for a luxury car rental and sourcing service. It leverages a high-performance frontend framework and a utility-first CSS approach to provide a "Monaco-level" user experience characterized by fluid animations and responsive design.
The architecture is centered around a React-based single-page application (SPA) structure using Next.js, emphasizing speed, SEO optimization through metadata, and a robust type-safe environment provided by TypeScript.
Core Framework and Runtime
The application is built on the Next.js 16 framework, utilizing the App Router architecture for routing and layout management. It runs on a React 19 foundation, ensuring the latest features of the React ecosystem are available for component lifecycle management and state handling.
Primary Dependencies
| Dependency | Version | Purpose |
|---|---|---|
next | 16.1.6 | Core framework for routing, SSR, and optimization |
react | 19.2.3 | UI library for component-based architecture |
react-dom | 19.2.3 | Entry point to the DOM for React |
framer-motion | 12.34.3 | High-performance animation and parallax effects |
typescript | ^5 | Static typing and enhanced developer tooling |
Sources: package.json:13-18, package.json:28, app/layout.tsx:1-5
Frontend Architecture
The system follows a modular component-based architecture. It uses a RootLayout to maintain persistent UI elements like the Navbar, Footer, and a floating WhatsApp contact button across all pages.
Navigation and Routing
Routing is handled via the Next.js App Router, with specific routes defined for the fleet gallery, service descriptions, and location-based delivery information.
The application uses a unified layout structure to ensure consistency in the "dark mode" aesthetic.
Sources: app/layout.tsx:11-40, components/Navbar.tsx:11-17
Data Management and Typing
The application employs a centralized data approach for its inventory. Instead of a traditional database for the demo version, vehicle data is managed through a structured TypeScript module.
Fleet Data Model
The Car type defines the schema for all vehicles in the collection, ensuring type safety when rendering car cards or detail pages.
| Field | Type | Description |
|---|---|---|
slug | string | Unique identifier for URL routing |
brand | string | Manufacturer name (e.g., Ferrari, Audi) |
category | string | Vehicle class (e.g., GT, Supercar, SUV) |
highlights | CarHighlight[] | Technical specs (Engine, Power, 0-100) |
images | CarImage[] | Array of source paths and alt text |
Sources: data/fleet.ts:1-25
Styling and Animations
The visual identity is established through Tailwind CSS 4, using a utility-first approach to manage the dark-themed UI.
CSS Configuration
The project uses a global CSS file to define theme variables and fundamental body styles.
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
Sources: app/globals.css:3-17, package.json:21-27
Motion Effects
Framer Motion is utilized extensively for:
- Parallax Scrolling: Implementing
useScrollanduseTransformto create depth on hero sections. - Viewport Animations: Triggering element visibility as the user scrolls.
- Mobile Transitions: Managing the entry/exit states of the mobile navigation menu.
Sources: app/page.tsx:13-25, app/locations/page.tsx:12-23, components/Navbar.tsx:116-121
External Integrations
The "Technology Stack" facilitates direct lead generation through two primary communication protocols rather than complex backend processing:
- WhatsApp Integration: Uses the
wa.meAPI to pre-fill messages with customer requirements (car, dates, location). - Mailto Protocol: Generates structured email bodies based on the
RequestFormstate.
Development Environment
The project is configured with a strict TypeScript environment and ESLint for code quality.
- Target: ES2017
- Module Resolution: Bundler-based
- Path Aliasing: The
@/*alias is configured to point to the root directory for cleaner imports. - Incremental Builds: Enabled via
tsconfig.jsonfor faster development cycles.
Sources: tsconfig.json:3-23, package.json:7-11
Summary
The AVP Supercars technology stack is a streamlined, frontend-heavy architecture optimized for visual impact and immediate user engagement. By combining Next.js 16, Tailwind CSS 4, and Framer Motion, the system provides a high-end interface with minimal latency, relying on TypeScript for internal data consistency and direct API links for business operations.