How wunyo99/drivex works
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: Home.jsx Home Page · App.jsx Route App · CarDetails.jsx Vehicle Detail Page · ui UI Primitives
Components 24
App Shell
- Route App
src/App.jsx - Site Layout
src/layout/MainLayout.jsx - Navigation
src/components/Navbar.jsx - Footer
src/components/Footer.jsx - UI Primitives
src/components/ui
Vehicle Discovery
- Home Page
src/pages/Home.jsx - Inventory Page
src/pages/Cars.jsx - Car Inventory Data
src/data/cars.js - Vehicle Card
src/components/CarCard.jsx - Brand Highlights
src/components/Brands.jsx - Featured Carousel
src/components/ui/ThreeDCarousel.jsx
Vehicle Details
- Vehicle Detail Page
src/pages/CarDetails.jsx - Vehicle Lookup
src/hooks/useCar.js - Detail Tabs
src/components/DetailTabs.jsx - Booking Inquiry Dialog
src/components/CarActionDialog.jsx
Supporting Content
- Services Page
src/pages/Services.jsx - Contact Page
src/pages/Contact.jsx - Not Found Page
src/pages/ErrorPage.jsx - Home Hero
src/components/Hero.jsx - Why Choose Us
src/components/WhyChooseUs.jsx - Testimonials
src/components/Testimonials.jsx - Circular Testimonials
src/components/ui/CircularTestimonials.jsx - FAQs
src/components/FAQs.jsx
Other components
- Visitor
Connections 31
- Visitor → Route App: opens routes
src/App.jsx - Route App → Site Layout: routes through
src/App.jsx - Route App → Home Page: routes to
src/App.jsx - Route App → Inventory Page: routes to
src/App.jsx - Route App → Vehicle Detail Page: routes to
src/App.jsx - Route App → Services Page: routes to
src/App.jsx - Route App → Contact Page: routes to
src/App.jsx - Route App → Not Found Page: routes to
src/App.jsx - Site Layout → Navigation: renders
src/layout/MainLayout.jsx - Site Layout → Footer: renders
src/layout/MainLayout.jsx - Navigation → UI Primitives: uses controls
src/components/Navbar.jsx - Footer → UI Primitives: uses button
src/components/Footer.jsx - Home Page → Home Hero: renders
src/pages/Home.jsx - Home Page → Brand Highlights: renders
src/pages/Home.jsx - Home Page → Featured Carousel: renders
src/pages/Home.jsx - Home Page → Why Choose Us: renders
src/pages/Home.jsx - Home Page → Testimonials: renders
src/pages/Home.jsx - Home Page → FAQs: renders
src/pages/Home.jsx - Testimonials → Circular Testimonials: renders
src/components/Testimonials.jsx - Home Page → Car Inventory Data: reads inventory
src/pages/Home.jsx - Home Page → Vehicle Card: renders
src/pages/Home.jsx - Inventory Page → Car Inventory Data: reads inventory
src/pages/Cars.jsx - Inventory Page → Vehicle Card: renders
src/pages/Cars.jsx - Vehicle Detail Page → Vehicle Lookup: looks up vehicle
src/pages/CarDetails.jsx - Vehicle Lookup → Car Inventory Data: finds by ID
src/hooks/useCar.js - Vehicle Detail Page → Detail Tabs: renders
src/pages/CarDetails.jsx - Vehicle Detail Page → Booking Inquiry Dialog: opens for actions
src/pages/CarDetails.jsx - Vehicle Detail Page → UI Primitives: uses button
src/pages/CarDetails.jsx - Booking Inquiry Dialog → UI Primitives: uses form controls
src/components/CarActionDialog.jsx - Detail Tabs → UI Primitives: uses tabs
src/components/DetailTabs.jsx - Brand Highlights → Car Inventory Data: reads brand data
src/components/Brands.jsx