# nhpwebteam-code/my3-studio architecture

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

- Interactive diagram: https://gitdiagram.com/nhpwebteam-code/my3-studio
- Repository: https://github.com/nhpwebteam-code/my3-studio

## Overview

Mythri Studio is a photography-studio portfolio, service catalog, and booking-inquiry application, with an administrative dashboard for managing studio content. The main visitor flow is to discover the studio and its work, compare services or packages, then start a booking inquiry. The README documents the portfolio filtering and lightbox, studio/about content, pricing, and reviews. Source excerpts also show service add-on selection and administrative data management. Some page wiring and form behavior are described by the README or tree but not sampled; those links are kept at the documented level. Admin state uses local storage and has gallery API and cross-tab synchronization paths.

Main entry points: [`src/App.jsx`](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/App.jsx) (Router Shell), [`src/context/StudioDataContext.jsx`](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/context/StudioDataContext.jsx) (Studio Data Context), [`src/pages/Home.jsx`](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Home.jsx) (Studio Home), [`src/data/services.js`](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/services.js) (Services Data)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public Experience"]
  node_app["Router Shell<br/>[App.jsx]"]
  node_home["Studio Home<br/>[Home.jsx]"]
  node_about["Studio Story<br/>[About.jsx]"]
  node_gallery["Portfolio Gallery<br/>[Gallery.jsx]"]
  node_lightbox["Image Lightbox<br/>[LightboxModal.jsx]"]
  node_services["Services Catalog<br/>[Services.jsx]"]
  node_showcase["Service Showcase"]
  node_pricing["Package Pricing<br/>[Pricing.jsx]"]
  node_servicecard["Package Options<br/>[ServiceCard.jsx]"]
  node_reviews["Client Reviews"]
end

subgraph group_booking["Booking Inquiry"]
  node_contact["Contact Page<br/>[Contact.jsx]"]
  node_contactform["Booking Form<br/>[ContactForm.jsx]"]
  node_bookingmodal["Booking Modal<br/>[BookingModal.jsx]"]
end

subgraph group_admin["Studio Administration"]
  node_login["Admin Login<br/>[Login.jsx]"]
  node_dashboard["Admin Dashboard<br/>[AdminDashboard.jsx]"]
end

subgraph group_content["Studio Content"]
  node_gallerydata["Gallery Data<br/>[gallery.js]"]
  node_portfoliodata["Portfolio Data<br/>[portfolio.js]"]
  node_servicesdata["Services Data<br/>[services.js]"]
  node_pricingdata["Pricing Data<br/>[pricing.js]"]
  node_studioinfo["Studio Configuration<br/>[studioConfig.js]"]
  node_testimonials["Testimonials<br/>[testimonials.js]"]
end

subgraph group_state["Data and State"]
  node_context["Studio Data Context"]
  node_localstorage[("Browser Storage")]
end

node_visitor(("Visitor"))
node_administrator(("Administrator"))
node_galleryapi["Gallery API"]
node_broadcast["Cross-tab Channel"]

node_visitor -->|"opens"| node_app
node_app -->|"routes"| node_home
node_app -->|"routes"| node_about
node_app -->|"routes"| node_gallery
node_app -->|"routes"| node_services
node_app -->|"routes"| node_pricing
node_app -->|"routes"| node_contact
node_app -->|"routes"| node_login
node_app -->|"routes"| node_dashboard
node_gallery -->|"opens"| node_lightbox
node_services -->|"renders"| node_showcase
node_showcase -->|"presents"| node_servicesdata
node_pricing -->|"renders"| node_servicecard
node_servicecard -->|"reads options"| node_servicesdata
node_visitor -->|"starts inquiry"| node_contact
node_contact -->|"presents"| node_contactform
node_app -->|"opens on request"| node_bookingmodal
node_visitor -->|"authenticates"| node_login
node_administrator -->|"manages content"| node_dashboard
node_dashboard -->|"updates studio data"| node_context
node_context -->|"persists state"| node_localstorage
node_context -.->|"fetches and mutates gallery"| node_galleryapi
node_context -.->|"broadcasts updates"| node_broadcast
node_context -->|"defaults from"| node_servicesdata
node_context -->|"defaults from"| node_gallerydata
node_home -->|"shows featured work"| node_portfoliodata
node_home -->|"shows services"| node_servicesdata
node_home -->|"shows reviews"| node_testimonials
node_about -->|"shows studio details"| node_studioinfo
node_reviews -->|"reads reviews"| node_testimonials
node_gallery -->|"reads gallery"| node_gallerydata
node_pricing -->|"reads packages"| node_pricingdata

click node_app "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/App.jsx"
click node_home "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Home.jsx"
click node_about "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/About.jsx"
click node_gallery "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Gallery.jsx"
click node_lightbox "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/LightboxModal.jsx"
click node_services "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Services.jsx"
click node_showcase "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/ServicesShowcase.jsx"
click node_pricing "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Pricing.jsx"
click node_servicecard "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/ServiceCard.jsx"
click node_reviews "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/JustdialReviews.jsx"
click node_contact "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Contact.jsx"
click node_contactform "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/ContactForm.jsx"
click node_bookingmodal "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/BookingModal.jsx"
click node_login "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Login.jsx"
click node_dashboard "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/AdminDashboard.jsx"
click node_context "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/context/StudioDataContext.jsx"
click node_gallerydata "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/gallery.js"
click node_portfoliodata "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/portfolio.js"
click node_servicesdata "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/services.js"
click node_pricingdata "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/pricing.js"
click node_studioinfo "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/studioConfig.js"
click node_testimonials "https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/testimonials.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,node_home,node_about,node_gallery,node_lightbox,node_services,node_showcase,node_pricing,node_servicecard,node_reviews toneBlue
class node_contact,node_contactform,node_bookingmodal toneAmber
class node_login,node_dashboard,node_galleryapi toneMint
class node_gallerydata,node_portfoliodata,node_servicesdata,node_pricingdata,node_studioinfo,node_testimonials toneRose
class node_context,node_localstorage,node_visitor,node_administrator,node_broadcast toneIndigo
```

## Components

### Public Experience

- [Router Shell](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/App.jsx): `src/App.jsx`
- [Studio Home](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Studio Story](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/About.jsx): `src/pages/About.jsx`
- [Portfolio Gallery](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Gallery.jsx): `src/pages/Gallery.jsx`
- [Image Lightbox](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/LightboxModal.jsx): `src/components/LightboxModal.jsx`
- [Services Catalog](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Services.jsx): `src/pages/Services.jsx`
- [Service Showcase](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/ServicesShowcase.jsx): `src/components/ServicesShowcase.jsx`
- [Package Pricing](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Pricing.jsx): `src/pages/Pricing.jsx`
- [Package Options](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/ServiceCard.jsx): `src/components/ServiceCard.jsx`
- [Client Reviews](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/JustdialReviews.jsx): `src/components/JustdialReviews.jsx`

### Booking Inquiry

- [Contact Page](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Contact.jsx): `src/pages/Contact.jsx`
- [Booking Form](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/ContactForm.jsx): `src/components/ContactForm.jsx`
- [Booking Modal](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/components/BookingModal.jsx): `src/components/BookingModal.jsx`

### Studio Administration

- [Admin Login](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Admin Dashboard](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/pages/AdminDashboard.jsx): `src/pages/AdminDashboard.jsx`

### Studio Content

- [Gallery Data](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/gallery.js): `src/data/gallery.js`
- [Portfolio Data](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/portfolio.js): `src/data/portfolio.js`
- [Services Data](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/services.js): `src/data/services.js`
- [Pricing Data](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/pricing.js): `src/data/pricing.js`
- [Studio Configuration](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/studioConfig.js): `src/data/studioConfig.js`
- [Testimonials](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/data/testimonials.js): `src/data/testimonials.js`

### Data and State

- [Studio Data Context](https://github.com/nhpwebteam-code/my3-studio/blob/main/src/context/StudioDataContext.jsx): `src/context/StudioDataContext.jsx`
- **Browser Storage**

### Other components

- **Visitor**
- **Administrator**
- **Gallery API**
- **Cross-tab Channel**

## Connections

- Visitor → Router Shell: opens
- Router Shell → Studio Home: routes
- Router Shell → Studio Story: routes
- Router Shell → Portfolio Gallery: routes
- Router Shell → Services Catalog: routes
- Router Shell → Package Pricing: routes
- Router Shell → Contact Page: routes
- Router Shell → Admin Login: routes
- Router Shell → Admin Dashboard: routes
- Portfolio Gallery → Image Lightbox: opens
- Services Catalog → Service Showcase: renders
- Service Showcase → Services Data: presents
- Package Pricing → Package Options: renders
- Package Options → Services Data: reads options
- Visitor → Contact Page: starts inquiry
- Contact Page → Booking Form: presents
- Router Shell → Booking Modal: opens on request
- Visitor → Admin Login: authenticates
- Administrator → Admin Dashboard: manages content
- Admin Dashboard → Studio Data Context: updates studio data
- Studio Data Context → Browser Storage: persists state
- Studio Data Context → Gallery API: fetches and mutates gallery
- Studio Data Context → Cross-tab Channel: broadcasts updates
- Studio Data Context → Services Data: defaults from
- Studio Data Context → Gallery Data: defaults from
- Studio Home → Portfolio Data: shows featured work
- Studio Home → Services Data: shows services
- Studio Home → Testimonials: shows reviews
- Studio Story → Studio Configuration: shows studio details
- Client Reviews → Testimonials: reads reviews
- Portfolio Gallery → Gallery Data: reads gallery
- Package Pricing → Pricing Data: reads packages