# wunyo99/drivex architecture

> Architecture diagram of the GitHub repository wunyo99/drivex, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/wunyo99/drivex
- Repository: https://github.com/wunyo99/drivex

## Overview

DriveX is a React car-dealership showcase: visitors browse inventory, open a vehicle’s detail page, and can start a test-drive booking or inquiry. The app also presents services, brand highlights, testimonials, FAQs, and a contact page. The inventory is a local JavaScript data module rather than a backend store. The graph follows the routes and component references shown in excerpts and the source index; unsampled page internals and form submission behavior are not inferred.

Main entry points: [`src/pages/Home.jsx`](https://github.com/wunyo99/drivex/blob/master/src/pages/Home.jsx) (Home Page), [`src/App.jsx`](https://github.com/wunyo99/drivex/blob/master/src/App.jsx) (Route App), [`src/pages/CarDetails.jsx`](https://github.com/wunyo99/drivex/blob/master/src/pages/CarDetails.jsx) (Vehicle Detail Page), [`src/components/ui`](https://github.com/wunyo99/drivex/tree/master/src/components/ui) (UI Primitives)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App Shell"]
  node_app["Route App<br/>[App.jsx]"]
  node_layout["Site Layout<br/>[MainLayout.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_ui["UI Primitives"]
end

subgraph group_browse["Vehicle Discovery"]
  node_home["Home Page<br/>[Home.jsx]"]
  node_cars["Inventory Page<br/>[Cars.jsx]"]
  node_car_data["Car Inventory Data<br/>[cars.js]"]
  node_car_card["Vehicle Card<br/>[CarCard.jsx]"]
  node_brands["Brand Highlights<br/>[Brands.jsx]"]
  node_carousel["Featured Carousel<br/>[ThreeDCarousel.jsx]"]
end

subgraph group_details["Vehicle Details"]
  node_detail["Vehicle Detail Page<br/>[CarDetails.jsx]"]
  node_car_hook["Vehicle Lookup<br/>[useCar.js]"]
  node_detail_tabs["Detail Tabs<br/>[DetailTabs.jsx]"]
  node_action_dialog["Booking Inquiry Dialog"]
end

subgraph group_content["Supporting Content"]
  node_services["Services Page<br/>[Services.jsx]"]
  node_contact["Contact Page<br/>[Contact.jsx]"]
  node_error["Not Found Page<br/>[ErrorPage.jsx]"]
  node_hero["Home Hero<br/>[Hero.jsx]"]
  node_why["Why Choose Us<br/>[WhyChooseUs.jsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.jsx]"]
  node_testimonial_view["Circular Testimonials"]
  node_faqs["FAQs<br/>[FAQs.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens routes"| node_app
node_app -->|"routes through"| node_layout
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_cars
node_app -->|"routes to"| node_detail
node_app -->|"routes to"| node_services
node_app -->|"routes to"| node_contact
node_app -->|"routes to"| node_error
node_layout -->|"renders"| node_navbar
node_layout -->|"renders"| node_footer
node_navbar -->|"uses controls"| node_ui
node_footer -->|"uses button"| node_ui
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_brands
node_home -->|"renders"| node_carousel
node_home -->|"renders"| node_why
node_home -->|"renders"| node_testimonials
node_home -->|"renders"| node_faqs
node_testimonials -->|"renders"| node_testimonial_view
node_home -->|"reads inventory"| node_car_data
node_home -->|"renders"| node_car_card
node_cars -->|"reads inventory"| node_car_data
node_cars -->|"renders"| node_car_card
node_detail -->|"looks up vehicle"| node_car_hook
node_car_hook -->|"finds by ID"| node_car_data
node_detail -->|"renders"| node_detail_tabs
node_detail -->|"opens for actions"| node_action_dialog
node_detail -->|"uses button"| node_ui
node_action_dialog -->|"uses form controls"| node_ui
node_detail_tabs -->|"uses tabs"| node_ui
node_brands -->|"reads brand data"| node_car_data

click node_app "https://github.com/wunyo99/drivex/blob/master/src/App.jsx"
click node_layout "https://github.com/wunyo99/drivex/blob/master/src/layout/MainLayout.jsx"
click node_navbar "https://github.com/wunyo99/drivex/blob/master/src/components/Navbar.jsx"
click node_footer "https://github.com/wunyo99/drivex/blob/master/src/components/Footer.jsx"
click node_ui "https://github.com/wunyo99/drivex/tree/master/src/components/ui"
click node_home "https://github.com/wunyo99/drivex/blob/master/src/pages/Home.jsx"
click node_cars "https://github.com/wunyo99/drivex/blob/master/src/pages/Cars.jsx"
click node_car_data "https://github.com/wunyo99/drivex/blob/master/src/data/cars.js"
click node_car_card "https://github.com/wunyo99/drivex/blob/master/src/components/CarCard.jsx"
click node_brands "https://github.com/wunyo99/drivex/blob/master/src/components/Brands.jsx"
click node_carousel "https://github.com/wunyo99/drivex/blob/master/src/components/ui/ThreeDCarousel.jsx"
click node_detail "https://github.com/wunyo99/drivex/blob/master/src/pages/CarDetails.jsx"
click node_car_hook "https://github.com/wunyo99/drivex/blob/master/src/hooks/useCar.js"
click node_detail_tabs "https://github.com/wunyo99/drivex/blob/master/src/components/DetailTabs.jsx"
click node_action_dialog "https://github.com/wunyo99/drivex/blob/master/src/components/CarActionDialog.jsx"
click node_services "https://github.com/wunyo99/drivex/blob/master/src/pages/Services.jsx"
click node_contact "https://github.com/wunyo99/drivex/blob/master/src/pages/Contact.jsx"
click node_error "https://github.com/wunyo99/drivex/blob/master/src/pages/ErrorPage.jsx"
click node_hero "https://github.com/wunyo99/drivex/blob/master/src/components/Hero.jsx"
click node_why "https://github.com/wunyo99/drivex/blob/master/src/components/WhyChooseUs.jsx"
click node_testimonials "https://github.com/wunyo99/drivex/blob/master/src/components/Testimonials.jsx"
click node_testimonial_view "https://github.com/wunyo99/drivex/blob/master/src/components/ui/CircularTestimonials.jsx"
click node_faqs "https://github.com/wunyo99/drivex/blob/master/src/components/FAQs.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_layout,node_navbar,node_footer,node_ui toneBlue
class node_home,node_cars,node_car_data,node_car_card,node_brands,node_carousel toneAmber
class node_detail,node_car_hook,node_detail_tabs,node_action_dialog toneMint
class node_services,node_contact,node_error,node_hero,node_why,node_testimonials,node_testimonial_view,node_faqs toneRose
class node_visitor toneIndigo
```

## Components

### App Shell

- [Route App](https://github.com/wunyo99/drivex/blob/master/src/App.jsx): `src/App.jsx`
- [Site Layout](https://github.com/wunyo99/drivex/blob/master/src/layout/MainLayout.jsx): `src/layout/MainLayout.jsx`
- [Navigation](https://github.com/wunyo99/drivex/blob/master/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Footer](https://github.com/wunyo99/drivex/blob/master/src/components/Footer.jsx): `src/components/Footer.jsx`
- [UI Primitives](https://github.com/wunyo99/drivex/tree/master/src/components/ui): `src/components/ui`

### Vehicle Discovery

- [Home Page](https://github.com/wunyo99/drivex/blob/master/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Inventory Page](https://github.com/wunyo99/drivex/blob/master/src/pages/Cars.jsx): `src/pages/Cars.jsx`
- [Car Inventory Data](https://github.com/wunyo99/drivex/blob/master/src/data/cars.js): `src/data/cars.js`
- [Vehicle Card](https://github.com/wunyo99/drivex/blob/master/src/components/CarCard.jsx): `src/components/CarCard.jsx`
- [Brand Highlights](https://github.com/wunyo99/drivex/blob/master/src/components/Brands.jsx): `src/components/Brands.jsx`
- [Featured Carousel](https://github.com/wunyo99/drivex/blob/master/src/components/ui/ThreeDCarousel.jsx): `src/components/ui/ThreeDCarousel.jsx`

### Vehicle Details

- [Vehicle Detail Page](https://github.com/wunyo99/drivex/blob/master/src/pages/CarDetails.jsx): `src/pages/CarDetails.jsx`
- [Vehicle Lookup](https://github.com/wunyo99/drivex/blob/master/src/hooks/useCar.js): `src/hooks/useCar.js`
- [Detail Tabs](https://github.com/wunyo99/drivex/blob/master/src/components/DetailTabs.jsx): `src/components/DetailTabs.jsx`
- [Booking Inquiry Dialog](https://github.com/wunyo99/drivex/blob/master/src/components/CarActionDialog.jsx): `src/components/CarActionDialog.jsx`

### Supporting Content

- [Services Page](https://github.com/wunyo99/drivex/blob/master/src/pages/Services.jsx): `src/pages/Services.jsx`
- [Contact Page](https://github.com/wunyo99/drivex/blob/master/src/pages/Contact.jsx): `src/pages/Contact.jsx`
- [Not Found Page](https://github.com/wunyo99/drivex/blob/master/src/pages/ErrorPage.jsx): `src/pages/ErrorPage.jsx`
- [Home Hero](https://github.com/wunyo99/drivex/blob/master/src/components/Hero.jsx): `src/components/Hero.jsx`
- [Why Choose Us](https://github.com/wunyo99/drivex/blob/master/src/components/WhyChooseUs.jsx): `src/components/WhyChooseUs.jsx`
- [Testimonials](https://github.com/wunyo99/drivex/blob/master/src/components/Testimonials.jsx): `src/components/Testimonials.jsx`
- [Circular Testimonials](https://github.com/wunyo99/drivex/blob/master/src/components/ui/CircularTestimonials.jsx): `src/components/ui/CircularTestimonials.jsx`
- [FAQs](https://github.com/wunyo99/drivex/blob/master/src/components/FAQs.jsx): `src/components/FAQs.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → Route App: opens routes (evidence: `src/App.jsx`)
- Route App → Site Layout: routes through (evidence: `src/App.jsx`)
- Route App → Home Page: routes to (evidence: `src/App.jsx`)
- Route App → Inventory Page: routes to (evidence: `src/App.jsx`)
- Route App → Vehicle Detail Page: routes to (evidence: `src/App.jsx`)
- Route App → Services Page: routes to (evidence: `src/App.jsx`)
- Route App → Contact Page: routes to (evidence: `src/App.jsx`)
- Route App → Not Found Page: routes to (evidence: `src/App.jsx`)
- Site Layout → Navigation: renders (evidence: `src/layout/MainLayout.jsx`)
- Site Layout → Footer: renders (evidence: `src/layout/MainLayout.jsx`)
- Navigation → UI Primitives: uses controls (evidence: `src/components/Navbar.jsx`)
- Footer → UI Primitives: uses button (evidence: `src/components/Footer.jsx`)
- Home Page → Home Hero: renders (evidence: `src/pages/Home.jsx`)
- Home Page → Brand Highlights: renders (evidence: `src/pages/Home.jsx`)
- Home Page → Featured Carousel: renders (evidence: `src/pages/Home.jsx`)
- Home Page → Why Choose Us: renders (evidence: `src/pages/Home.jsx`)
- Home Page → Testimonials: renders (evidence: `src/pages/Home.jsx`)
- Home Page → FAQs: renders (evidence: `src/pages/Home.jsx`)
- Testimonials → Circular Testimonials: renders (evidence: `src/components/Testimonials.jsx`)
- Home Page → Car Inventory Data: reads inventory (evidence: `src/pages/Home.jsx`)
- Home Page → Vehicle Card: renders (evidence: `src/pages/Home.jsx`)
- Inventory Page → Car Inventory Data: reads inventory (evidence: `src/pages/Cars.jsx`)
- Inventory Page → Vehicle Card: renders (evidence: `src/pages/Cars.jsx`)
- Vehicle Detail Page → Vehicle Lookup: looks up vehicle (evidence: `src/pages/CarDetails.jsx`)
- Vehicle Lookup → Car Inventory Data: finds by ID (evidence: `src/hooks/useCar.js`)
- Vehicle Detail Page → Detail Tabs: renders (evidence: `src/pages/CarDetails.jsx`)
- Vehicle Detail Page → Booking Inquiry Dialog: opens for actions (evidence: `src/pages/CarDetails.jsx`)
- Vehicle Detail Page → UI Primitives: uses button (evidence: `src/pages/CarDetails.jsx`)
- Booking Inquiry Dialog → UI Primitives: uses form controls (evidence: `src/components/CarActionDialog.jsx`)
- Detail Tabs → UI Primitives: uses tabs (evidence: `src/components/DetailTabs.jsx`)
- Brand Highlights → Car Inventory Data: reads brand data (evidence: `src/components/Brands.jsx`)