# zack1808/4d_detailing architecture

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

- Interactive diagram: https://gitdiagram.com/zack1808/4d_detailing
- Repository: https://github.com/zack1808/4d_detailing

## Overview

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: [`src/App.tsx`](https://github.com/zack1808/4d_detailing/blob/main/src/App.tsx) (App routes), [`src/context/DataContext.tsx`](https://github.com/zack1808/4d_detailing/blob/main/src/context/DataContext.tsx) (Shared app state), [`src/pages/Home.tsx`](https://github.com/zack1808/4d_detailing/blob/main/src/pages/Home.tsx) (Home page), [`src/pages/Services.tsx`](https://github.com/zack1808/4d_detailing/blob/main/src/pages/Services.tsx) (Services page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["App routes<br/>[App.tsx]"]
end

subgraph group_pages["Visitor pages"]
  node_home["Home page<br/>[Home.tsx]"]
  node_services["Services page<br/>[Services.tsx]"]
  node_contact["Contact page<br/>[Contact.tsx]"]
  node_legal["Legal pages"]
  node_notfound["Not found<br/>[Error404.tsx]"]
end

subgraph group_data["Data and state"]
  node_state["Shared app state<br/>[DataContext.tsx]"]
  node_loader["Page data loader<br/>[useGetPageData.tsx]"]
  node_firebase["Firebase API<br/>[firebaseApi.ts]"]
  node_firebaseconfig["Firebase config<br/>[firebaseConfig.tsx]"]
  node_types["Domain data types<br/>[data.ts]"]
end

subgraph group_ui["Shared interface"]
  node_navigation["Navigation<br/>[Navigation.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_pageloader["Loading screen<br/>[PageLoader.tsx]"]
  node_servicecard["Service cards<br/>[ServiceCard.tsx]"]
  node_reviews["Review carousel<br/>[ReviewCarousel.tsx]"]
  node_seo["SEO metadata<br/>[SEO.tsx]"]
  node_carousel["Image carousel<br/>[ImageCarousel.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens site"| node_app
node_app -->|"provides data"| node_state
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_services
node_app -->|"routes to"| node_contact
node_app -->|"routes to"| node_legal
node_app -->|"routes to"| node_notfound
node_app -->|"renders"| node_navigation
node_app -->|"renders"| node_footer
node_app -->|"uses fallback"| node_pageloader
node_state -->|"loads page data"| node_loader
node_state -->|"renders while loading"| node_pageloader
node_loader -->|"calls API"| node_firebase
node_firebase -->|"uses config"| node_firebaseconfig
node_home -->|"renders services"| node_servicecard
node_home -->|"renders reviews"| node_reviews
node_services -->|"renders services"| node_servicecard
node_services -->|"renders images"| node_carousel
node_services -->|"sets metadata"| node_seo
node_home -->|"sets metadata"| node_seo
node_servicecard -->|"reads theme"| node_state
node_home -->|"reads shared data"| node_state
node_services -->|"reads services"| node_state
node_reviews -->|"uses review types"| node_types
node_loader -->|"uses domain types"| node_types

click node_app "https://github.com/zack1808/4d_detailing/blob/main/src/App.tsx"
click node_home "https://github.com/zack1808/4d_detailing/blob/main/src/pages/Home.tsx"
click node_services "https://github.com/zack1808/4d_detailing/blob/main/src/pages/Services.tsx"
click node_contact "https://github.com/zack1808/4d_detailing/blob/main/src/pages/Contact.tsx"
click node_legal "https://github.com/zack1808/4d_detailing/tree/main/src/pages"
click node_notfound "https://github.com/zack1808/4d_detailing/blob/main/src/pages/Error404.tsx"
click node_state "https://github.com/zack1808/4d_detailing/blob/main/src/context/DataContext.tsx"
click node_loader "https://github.com/zack1808/4d_detailing/blob/main/src/hooks/useGetPageData.tsx"
click node_firebase "https://github.com/zack1808/4d_detailing/blob/main/src/services/api/firebaseApi.ts"
click node_firebaseconfig "https://github.com/zack1808/4d_detailing/blob/main/src/firebaseConfig.tsx"
click node_types "https://github.com/zack1808/4d_detailing/blob/main/src/types/data.ts"
click node_navigation "https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/Navigation.tsx"
click node_footer "https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/Footer.tsx"
click node_pageloader "https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/PageLoader.tsx"
click node_servicecard "https://github.com/zack1808/4d_detailing/blob/main/src/components/common/ServiceCard.tsx"
click node_reviews "https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/ReviewCarousel.tsx"
click node_seo "https://github.com/zack1808/4d_detailing/blob/main/src/components/common/SEO.tsx"
click node_carousel "https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/ImageCarousel.tsx"

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 toneBlue
class node_home,node_services,node_contact,node_legal,node_notfound toneAmber
class node_state,node_loader,node_firebase,node_firebaseconfig,node_types toneMint
class node_navigation,node_footer,node_pageloader,node_servicecard,node_reviews,node_seo,node_carousel toneRose
class node_visitor toneIndigo
```

## Components

### Application

- [App routes](https://github.com/zack1808/4d_detailing/blob/main/src/App.tsx): `src/App.tsx`

### Visitor pages

- [Home page](https://github.com/zack1808/4d_detailing/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Services page](https://github.com/zack1808/4d_detailing/blob/main/src/pages/Services.tsx): `src/pages/Services.tsx`
- [Contact page](https://github.com/zack1808/4d_detailing/blob/main/src/pages/Contact.tsx): `src/pages/Contact.tsx`
- [Legal pages](https://github.com/zack1808/4d_detailing/tree/main/src/pages): `src/pages`
- [Not found](https://github.com/zack1808/4d_detailing/blob/main/src/pages/Error404.tsx): `src/pages/Error404.tsx`

### Data and state

- [Shared app state](https://github.com/zack1808/4d_detailing/blob/main/src/context/DataContext.tsx): `src/context/DataContext.tsx`
- [Page data loader](https://github.com/zack1808/4d_detailing/blob/main/src/hooks/useGetPageData.tsx): `src/hooks/useGetPageData.tsx`
- [Firebase API](https://github.com/zack1808/4d_detailing/blob/main/src/services/api/firebaseApi.ts): `src/services/api/firebaseApi.ts`
- [Firebase config](https://github.com/zack1808/4d_detailing/blob/main/src/firebaseConfig.tsx): `src/firebaseConfig.tsx`
- [Domain data types](https://github.com/zack1808/4d_detailing/blob/main/src/types/data.ts): `src/types/data.ts`

### Shared interface

- [Navigation](https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/Navigation.tsx): `src/components/layout/Navigation.tsx`
- [Footer](https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/Footer.tsx): `src/components/layout/Footer.tsx`
- [Loading screen](https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/PageLoader.tsx): `src/components/layout/PageLoader.tsx`
- [Service cards](https://github.com/zack1808/4d_detailing/blob/main/src/components/common/ServiceCard.tsx): `src/components/common/ServiceCard.tsx`
- [Review carousel](https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/ReviewCarousel.tsx): `src/components/layout/ReviewCarousel.tsx`
- [SEO metadata](https://github.com/zack1808/4d_detailing/blob/main/src/components/common/SEO.tsx): `src/components/common/SEO.tsx`
- [Image carousel](https://github.com/zack1808/4d_detailing/blob/main/src/components/layout/ImageCarousel.tsx): `src/components/layout/ImageCarousel.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → App routes: opens site (evidence: `src/App.tsx`)
- App routes → Shared app state: provides data (evidence: `src/App.tsx`)
- App routes → Home page: routes to (evidence: `src/App.tsx`)
- App routes → Services page: routes to (evidence: `src/App.tsx`)
- App routes → Contact page: routes to (evidence: `src/App.tsx`)
- App routes → Legal pages: routes to (evidence: `src/App.tsx`)
- App routes → Not found: routes to (evidence: `src/App.tsx`)
- App routes → Navigation: renders (evidence: `src/App.tsx`)
- App routes → Footer: renders (evidence: `src/App.tsx`)
- App routes → Loading screen: uses fallback (evidence: `src/App.tsx`)
- Shared app state → Page data loader: loads page data (evidence: `src/context/DataContext.tsx`)
- Shared app state → Loading screen: renders while loading (evidence: `src/context/DataContext.tsx`)
- Page data loader → Firebase API: calls API (evidence: `src/hooks/useGetPageData.tsx`)
- Firebase API → Firebase config: uses config (evidence: `src/services/api/firebaseApi.ts`)
- Home page → Service cards: renders services (evidence: `src/pages/Home.tsx`)
- Home page → Review carousel: renders reviews (evidence: `src/pages/Home.tsx`)
- Services page → Service cards: renders services (evidence: `src/pages/Services.tsx`)
- Services page → Image carousel: renders images (evidence: `src/pages/Services.tsx`)
- Services page → SEO metadata: sets metadata (evidence: `src/pages/Services.tsx`)
- Home page → SEO metadata: sets metadata (evidence: `src/pages/Home.tsx`)
- Service cards → Shared app state: reads theme (evidence: `src/components/common/ServiceCard.tsx`)
- Home page → Shared app state: reads shared data (evidence: `src/pages/Home.tsx`)
- Services page → Shared app state: reads services (evidence: `src/pages/Services.tsx`)
- Review carousel → Domain data types: uses review types (evidence: `src/components/layout/ReviewCarousel.tsx`)
- Page data loader → Domain data types: uses domain types (evidence: `src/hooks/useGetPageData.tsx`)