How zack1808/4d_detailing works
This is a React detailing-business website. Visitors browse and filter service packages, view reviews, and can use the contact page to inquire about appointments; the home page also supports submitting reviews. The app loads shared service, review, and appointment data before rendering its routes. The excerpts show the page and data-loading structure, but do not establish the full submission or persistence behavior, so those connections are omitted.
Main entry points: App.tsx App routes · DataContext.tsx Shared app state · Home.tsx Home page · Services.tsx Services page
Components 19
Application
- App routes
src/App.tsx
Visitor pages
- Home page
src/pages/Home.tsx - Services page
src/pages/Services.tsx - Contact page
src/pages/Contact.tsx - Legal pages
src/pages - Not found
src/pages/Error404.tsx
Data and state
- Shared app state
src/context/DataContext.tsx - Page data loader
src/hooks/useGetPageData.tsx - Firebase API
src/services/api/firebaseApi.ts - Firebase config
src/firebaseConfig.tsx - Domain data types
src/types/data.ts
Shared interface
- Navigation
src/components/layout/Navigation.tsx - Footer
src/components/layout/Footer.tsx - Loading screen
src/components/layout/PageLoader.tsx - Service cards
src/components/common/ServiceCard.tsx - Review carousel
src/components/layout/ReviewCarousel.tsx - SEO metadata
src/components/common/SEO.tsx - Image carousel
src/components/layout/ImageCarousel.tsx
Other components
- Visitor
Connections 25
- Visitor → App routes: opens site
src/App.tsx - App routes → Shared app state: provides data
src/App.tsx - App routes → Home page: routes to
src/App.tsx - App routes → Services page: routes to
src/App.tsx - App routes → Contact page: routes to
src/App.tsx - App routes → Legal pages: routes to
src/App.tsx - App routes → Not found: routes to
src/App.tsx - App routes → Navigation: renders
src/App.tsx - App routes → Footer: renders
src/App.tsx - App routes → Loading screen: uses fallback
src/App.tsx - Shared app state → Page data loader: loads page data
src/context/DataContext.tsx - Shared app state → Loading screen: renders while loading
src/context/DataContext.tsx - Page data loader → Firebase API: calls API
src/hooks/useGetPageData.tsx - Firebase API → Firebase config: uses config
src/services/api/firebaseApi.ts - Home page → Service cards: renders services
src/pages/Home.tsx - Home page → Review carousel: renders reviews
src/pages/Home.tsx - Services page → Service cards: renders services
src/pages/Services.tsx - Services page → Image carousel: renders images
src/pages/Services.tsx - Services page → SEO metadata: sets metadata
src/pages/Services.tsx - Home page → SEO metadata: sets metadata
src/pages/Home.tsx - Service cards → Shared app state: reads theme
src/components/common/ServiceCard.tsx - Home page → Shared app state: reads shared data
src/pages/Home.tsx - Services page → Shared app state: reads services
src/pages/Services.tsx - Review carousel → Domain data types: uses review types
src/components/layout/ReviewCarousel.tsx - Page data loader → Domain data types: uses domain types
src/hooks/useGetPageData.tsx