# sajid73/novocare-clinic architecture

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

- Interactive diagram: https://gitdiagram.com/sajid73/novocare-clinic
- Repository: https://github.com/sajid73/novocare-clinic

## Overview

Novocare is a chiropractic patient-acquisition landing page. A prospective patient views the page, learns about the clinic and its method, sees testimonials and the $49 offer, then uses a booking link and submits a consultation request. The form currently confirms submission in local UI state; no appointment data is sent to the backend. The backend is a separate Express service with only a health-response route. The graph reflects sampled component composition; README capabilities are retained where documented, but unsampled wiring is not assumed.

Main entry points: [`client/src/App.tsx`](https://github.com/sajid73/novocare-clinic/blob/main/client/src/App.tsx) (Page App), [`client/src/components/BookingForm.tsx`](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/BookingForm.tsx) (Booking Form), [`client/src/main.tsx`](https://github.com/sajid73/novocare-clinic/blob/main/client/src/main.tsx) (React Entry), [`client/src/components/Hero.tsx`](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/Hero.tsx) (Hero)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Page Composition"]
  node_app_entry["React Entry<br/>[main.tsx]"]
  node_app["Page App<br/>[App.tsx]"]
  node_navbar["Navigation<br/>[NavBar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
  node_styles["Global Styles<br/>[index.css]"]
end

subgraph group_funnel["Acquisition Content"]
  node_hero["Hero<br/>[Hero.tsx]"]
  node_features["Benefits<br/>[Features.tsx]"]
  node_method["Care Method<br/>[MethodSection.tsx]"]
  node_testimonials["Testimonials<br/>[Testimonials.tsx]"]
  node_offer["New Patient Offer<br/>[FunnelOffer.tsx]"]
  node_booking["Booking Form<br/>[BookingForm.tsx]"]
end

subgraph group_api["Standalone API"]
  node_api_server["Express API<br/>[server.js]"]
end

node_patient(("Prospective Patient"))
node_api_caller(("API Client"))

node_app_entry -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_features
node_app -->|"renders"| node_method
node_app -->|"renders"| node_testimonials
node_app -->|"renders"| node_offer
node_app -->|"renders"| node_booking
node_app -->|"renders"| node_footer
node_app_entry -->|"loads"| node_styles
node_patient -->|"views"| node_app_entry
node_hero -->|"links to"| node_booking
node_offer -->|"links to"| node_booking
node_patient -->|"submits form"| node_booking
node_api_caller -->|"requests health"| node_api_server

click node_app_entry "https://github.com/sajid73/novocare-clinic/blob/main/client/src/main.tsx"
click node_app "https://github.com/sajid73/novocare-clinic/blob/main/client/src/App.tsx"
click node_navbar "https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/NavBar.tsx"
click node_hero "https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/Hero.tsx"
click node_features "https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/Features.tsx"
click node_method "https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/MethodSection.tsx"
click node_testimonials "https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/Testimonials.tsx"
click node_offer "https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/FunnelOffer.tsx"
click node_booking "https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/BookingForm.tsx"
click node_footer "https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/Footer.tsx"
click node_styles "https://github.com/sajid73/novocare-clinic/blob/main/client/src/index.css"
click node_api_server "https://github.com/sajid73/novocare-clinic/blob/main/backend/server.js"

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_entry,node_app,node_navbar,node_footer,node_styles,node_api_caller toneBlue
class node_hero,node_features,node_method,node_testimonials,node_offer,node_booking toneAmber
class node_api_server toneMint
class node_patient toneIndigo
```

## Components

### Page Composition

- [React Entry](https://github.com/sajid73/novocare-clinic/blob/main/client/src/main.tsx): `client/src/main.tsx`
- [Page App](https://github.com/sajid73/novocare-clinic/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Navigation](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/NavBar.tsx): `client/src/components/NavBar.tsx`
- [Footer](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/Footer.tsx): `client/src/components/Footer.tsx`
- [Global Styles](https://github.com/sajid73/novocare-clinic/blob/main/client/src/index.css): `client/src/index.css`

### Acquisition Content

- [Hero](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/Hero.tsx): `client/src/components/Hero.tsx`
- [Benefits](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/Features.tsx): `client/src/components/Features.tsx`
- [Care Method](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/MethodSection.tsx): `client/src/components/MethodSection.tsx`
- [Testimonials](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/Testimonials.tsx): `client/src/components/Testimonials.tsx`
- [New Patient Offer](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/FunnelOffer.tsx): `client/src/components/FunnelOffer.tsx`
- [Booking Form](https://github.com/sajid73/novocare-clinic/blob/main/client/src/components/BookingForm.tsx): `client/src/components/BookingForm.tsx`

### Standalone API

- [Express API](https://github.com/sajid73/novocare-clinic/blob/main/backend/server.js): `backend/server.js`

### Other components

- **Prospective Patient**
- **API Client**

## Connections

- React Entry → Page App: renders
- Page App → Navigation: renders
- Page App → Hero: renders
- Page App → Benefits: renders
- Page App → Care Method: renders
- Page App → Testimonials: renders
- Page App → New Patient Offer: renders
- Page App → Booking Form: renders
- Page App → Footer: renders
- React Entry → Global Styles: loads
- Prospective Patient → React Entry: views
- Hero → Booking Form: links to
- New Patient Offer → Booking Form: links to
- Prospective Patient → Booking Form: submits form
- API Client → Express API: requests health