Getting Started

Relevant source files

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

• README.md
• package.json
• app/layout.tsx
• app/page.tsx
• tsconfig.json
• next.config.ts
• components/RequestForm.tsx
• data/fleet.ts

The AVP Supercars platform is a specialized web application built with Next.js to facilitate luxury car rentals, sourcing, and sales. It serves as a digital storefront and concierge interface for clients across Europe, with a focus on the Monaco and French Riviera lifestyle.

This guide outlines the technical foundation, environment setup, and architectural flow required to initialize and run the AVP Supercars demo project locally.

Sources: app/about/page.tsx:21-25, app/layout.tsx:7-10

Development Environment Setup

The project is built using the Next.js App Router architecture and utilizes modern web technologies including TypeScript, Tailwind CSS, and Framer Motion for animations.

System Requirements

• Node.js: Versions compatible with Next.js 15+ (as indicated by the next: 16.1.6 dependency).
• Package Manager: Supports npm, yarn, pnpm, or bun.

Sources: package.json:11-25, README.md:1-15

Installation Steps

To initialize the development environment:

1. Clone the repository and navigate to the root directory.
2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev
   

4. Access the application: Open http://localhost:3000 in a web browser.

Sources: README.md:7-19

Application Architecture

The application follows a standard Next.js App Router structure. The app/layout.tsx file defines the root structure, including the global Navbar, Footer, and WhatsAppFloat components that persist across all pages.

Core Component Stack

The project leverages several key libraries to handle styling, animation, and logic:

Dependency	Purpose
next	React framework for server-side rendering and routing.
react / react-dom	UI library for component-based development.
framer-motion	Handling complex transitions and parallax effects.
tailwindcss	Utility-first CSS framework for styling.
typescript	Static typing for improved developer experience.

Sources: package.json:11-23, app/layout.tsx:13-20

Request Flow Architecture

The following diagram illustrates how a user interacts with the system to request a vehicle, starting from the landing page through to the final communication channel (WhatsApp or Email).

The application uses a centralized data store (data/fleet.ts) to populate the fleet catalog and provide context to the RequestForm component.

Sources: app/page.tsx:64-70, components/RequestForm.tsx:43-70, data/fleet.ts:25-30

Project Configuration

The project behavior is governed by several configuration files that define build targets and module resolution.

TypeScript Configuration

The project uses absolute path aliasing for cleaner imports, mapping the @/* prefix to the root directory.

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "esnext",
    "moduleResolution": "bundler",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Sources: tsconfig.json:4-10, tsconfig.json:20-22

Scripts Reference

Available commands defined in package.json:

• npm run dev: Starts the Next.js development server.
• npm run build: Creates an optimized production build.
• npm run start: Starts the production server after building.
• npm run lint: Runs ESLint to check for code quality issues.

Sources: package.json:5-10

Implementation Details: Request System

The primary interactive feature for a new developer to understand is the RequestForm. This component manages the state for car rental inquiries.

Request Data Model

The FormState type defines the expected input for a rental request:

Field	Type	Description
name	string	Full name of the client.
phone	string	Contact phone number.
email	string	Client email address.
car	string	Requested vehicle model.
startDate	string	Rental start date.
endDate	string	Rental end date.
location	string	Requested delivery location (e.g., Monaco, Nice).

Sources: components/RequestForm.tsx:5-15

Messaging Logic

The system does not use a backend database for requests. Instead, it generates dynamic URLs for WhatsApp and Email:

1. WhatsApp: Constructs a URL using https://wa.me/ with a URI-encoded string of the form data.
2. Email: Constructs a mailto: link with pre-populated subject and body fields.

Sources: components/RequestForm.tsx:43-69

Summary

To get started with AVP Supercars, developers should ensure a compatible Node.js environment, install dependencies via package.json, and run the development server as described in the README.md. The architecture focuses on a high-performance frontend using Next.js and Framer Motion, with a lightweight lead generation system that offloads communication to WhatsApp and Email.

Sources: README.md:7-12, package.json:1-15, app/layout.tsx:1-25