# icuhdev0214/itsourstudio-v2 architecture

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

- Interactive diagram: https://gitdiagram.com/icuhdev0214/itsourstudio-v2
- Repository: https://github.com/icuhdev0214/itsourstudio-v2

## Overview

it's ouR Studio is a customer-facing self-photography studio site with online booking, backed by a Firebase-connected admin dashboard. Customers browse services and gallery content, choose a session, and submit a booking; administrators manage bookings and studio content. The map also covers the documented email/reminder and upload capabilities, plus the Nocturne presentation layer. Some backend, admin, and page implementations were not excerpted, so those branches rely on README statements or indexed imports; unverified wiring is omitted.

Main entry points: [`src/App.tsx`](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/App.tsx) (SPA routing), [`src/pages/AdminDashboard.tsx`](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/AdminDashboard.tsx) (Admin dashboard), [`src/nocturne/useStudioData.ts`](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/nocturne/useStudioData.ts) (Studio data), [`src/components/BookingModal.tsx`](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/BookingModal.tsx) (Booking form)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Customer site"]
  node_app["SPA routing<br/>[App.tsx]"]
  node_site["Public pages<br/>[NocturneHome.tsx]"]
  node_services["Service listings<br/>[Services.tsx]"]
  node_studio_data["Studio data<br/>[useStudioData.ts]"]
  node_gallery["Gallery pages"]
end

subgraph group_booking["Booking workflow"]
  node_booking_context["Booking state<br/>[BookingContext.tsx]"]
  node_booking_modal["Booking form<br/>[BookingModal.tsx]"]
  node_catalog["Service catalog<br/>[serviceCatalog.ts]"]
end

subgraph group_admin["Studio administration"]
  node_admin_auth["Admin login<br/>[AdminLogin.tsx]"]
  node_dashboard["Admin dashboard<br/>[AdminDashboard.tsx]"]
  node_content_admin["Content management"]
  node_services_admin["Service management"]
  node_gallery_admin["Gallery management"]
  node_sales["Sales ledger<br/>[SalesLedger.tsx]"]
  node_admin_features["Admin operations"]
end

subgraph group_backend["Backend services"]
  node_firebase_client["Firebase client<br/>[firebase.ts]"]
  node_firestore[("Firestore")]
  node_storage[("Firebase Storage")]
  node_email_client["Email requests<br/>[AdminDashboard.tsx]"]
  node_express["Express backend<br/>[server.js]"]
  node_vercel_email["Email endpoint<br/>[send-email.js]"]
  node_email_renderer["Template renderer"]
  node_reminders["Session reminders<br/>[server.js]"]
  node_image_compress["Image compression<br/>[compressImage.ts]"]
end

subgraph group_presentation["Nocturne presentation"]
  node_effects_gate["Effects capability"]
  node_nocturne_layout["Site layout<br/>[NocturneLayout.tsx]"]
end

node_visitor(("Customer"))
node_mail_service["Email delivery"]

node_visitor -->|"browses"| node_app
node_app -->|"routes to"| node_site
node_app -->|"renders"| node_booking_modal
node_site -->|"loads"| node_studio_data
node_studio_data -->|"reads through"| node_firebase_client
node_studio_data -->|"reads"| node_firestore
node_services -->|"reads"| node_firestore
node_services -->|"opens booking"| node_booking_context
node_studio_data -->|"filters services"| node_catalog
node_booking_modal -->|"checks slots"| node_firestore
node_booking_modal -->|"locks slot"| node_firestore
node_booking_modal -->|"uses"| node_firebase_client
node_admin_auth -->|"authenticates with"| node_firebase_client
node_app -->|"routes to"| node_dashboard
node_dashboard -->|"manages bookings"| node_firestore
node_dashboard -->|"renders"| node_content_admin
node_dashboard -->|"uses"| node_admin_features
node_content_admin -->|"uses"| node_services_admin
node_content_admin -->|"uses"| node_gallery_admin
node_services_admin -->|"reads and writes"| node_firestore
node_services_admin -->|"uploads images"| node_storage
node_gallery_admin -->|"manages gallery"| node_firestore
node_gallery_admin -->|"uploads images"| node_storage
node_sales -->|"reads and writes"| node_firestore
node_dashboard -->|"sends request"| node_email_client
node_email_client -->|"posts to"| node_vercel_email
node_visitor -->|"submits requests"| node_express
node_express -->|"renders templates"| node_email_renderer
node_vercel_email -->|"renders templates"| node_email_renderer
node_express -->|"delivers email"| node_mail_service
node_vercel_email -->|"delivers email"| node_mail_service
node_express -->|"schedules"| node_reminders
node_reminders -->|"sends reminders"| node_mail_service
node_nocturne_layout -->|"checks capability"| node_effects_gate
node_app -->|"wraps public routes"| node_nocturne_layout
node_services_admin -->|"compresses uploads"| node_image_compress
node_image_compress -.->|"prepares upload"| node_storage

click node_app "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/App.tsx"
click node_site "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/NocturneHome.tsx"
click node_services "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/Services.tsx"
click node_studio_data "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/nocturne/useStudioData.ts"
click node_gallery "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/NocturneGallery.tsx"
click node_booking_context "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/context/BookingContext.tsx"
click node_booking_modal "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/BookingModal.tsx"
click node_catalog "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/utils/serviceCatalog.ts"
click node_firebase_client "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/firebase.ts"
click node_admin_auth "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/AdminLogin.tsx"
click node_dashboard "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/AdminDashboard.tsx"
click node_content_admin "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/admin/ContentManagement.tsx"
click node_services_admin "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/admin/ServicesManagement.tsx"
click node_gallery_admin "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/admin/GalleryManagement.tsx"
click node_sales "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/admin/SalesLedger.tsx"
click node_admin_features "https://github.com/icuhdev0214/itsourstudio-v2/tree/main/src/components/admin"
click node_email_client "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/AdminDashboard.tsx"
click node_express "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/server.js"
click node_vercel_email "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/api/send-email.js"
click node_email_renderer "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/api/email-template-renderer.js"
click node_reminders "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/server.js"
click node_effects_gate "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/nocturne/useEffectsEnabled.ts"
click node_nocturne_layout "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/nocturne/NocturneLayout.tsx"
click node_image_compress "https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/utils/compressImage.ts"

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_site,node_services,node_studio_data,node_gallery toneBlue
class node_booking_context,node_booking_modal,node_catalog toneAmber
class node_admin_auth,node_dashboard,node_content_admin,node_services_admin,node_gallery_admin,node_sales,node_admin_features toneMint
class node_firebase_client,node_firestore,node_storage,node_email_client,node_express,node_vercel_email,node_email_renderer,node_reminders,node_image_compress toneRose
class node_effects_gate,node_nocturne_layout,node_visitor,node_mail_service toneIndigo
```

## Components

### Customer site

- [SPA routing](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/App.tsx): `src/App.tsx`
- [Public pages](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/NocturneHome.tsx): `src/pages/NocturneHome.tsx`
- [Service listings](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/Services.tsx): `src/pages/Services.tsx`
- [Studio data](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/nocturne/useStudioData.ts): `src/nocturne/useStudioData.ts`
- [Gallery pages](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/NocturneGallery.tsx): `src/pages/NocturneGallery.tsx`

### Booking workflow

- [Booking state](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/context/BookingContext.tsx): `src/context/BookingContext.tsx`
- [Booking form](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/BookingModal.tsx): `src/components/BookingModal.tsx`
- [Service catalog](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/utils/serviceCatalog.ts): `src/utils/serviceCatalog.ts`

### Studio administration

- [Admin login](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/AdminLogin.tsx): `src/pages/AdminLogin.tsx`
- [Admin dashboard](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/AdminDashboard.tsx): `src/pages/AdminDashboard.tsx`
- [Content management](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/admin/ContentManagement.tsx): `src/components/admin/ContentManagement.tsx`
- [Service management](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/admin/ServicesManagement.tsx): `src/components/admin/ServicesManagement.tsx`
- [Gallery management](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/admin/GalleryManagement.tsx): `src/components/admin/GalleryManagement.tsx`
- [Sales ledger](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/components/admin/SalesLedger.tsx): `src/components/admin/SalesLedger.tsx`
- [Admin operations](https://github.com/icuhdev0214/itsourstudio-v2/tree/main/src/components/admin): `src/components/admin`

### Backend services

- [Firebase client](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/firebase.ts): `src/firebase.ts`
- **Firestore**
- **Firebase Storage**
- [Email requests](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/pages/AdminDashboard.tsx): `src/pages/AdminDashboard.tsx`
- [Express backend](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/server.js): `server.js`
- [Email endpoint](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/api/send-email.js): `api/send-email.js`
- [Template renderer](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/api/email-template-renderer.js): `api/email-template-renderer.js`
- [Session reminders](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/server.js): `server.js`
- [Image compression](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/utils/compressImage.ts): `src/utils/compressImage.ts`

### Nocturne presentation

- [Effects capability](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/nocturne/useEffectsEnabled.ts): `src/nocturne/useEffectsEnabled.ts`
- [Site layout](https://github.com/icuhdev0214/itsourstudio-v2/blob/main/src/nocturne/NocturneLayout.tsx): `src/nocturne/NocturneLayout.tsx`

### Other components

- **Customer**
- **Email delivery**

## Connections

- Customer → SPA routing: browses (evidence: `README.md`)
- SPA routing → Public pages: routes to (evidence: `src/App.tsx`)
- SPA routing → Booking form: renders (evidence: `src/App.tsx`)
- Public pages → Studio data: loads (evidence: `src/pages/NocturneHome.tsx`)
- Studio data → Firebase client: reads through (evidence: `src/nocturne/useStudioData.ts`)
- Studio data → Firestore: reads (evidence: `src/nocturne/useStudioData.ts`)
- Service listings → Firestore: reads (evidence: `src/pages/Services.tsx`)
- Service listings → Booking state: opens booking (evidence: `src/pages/Services.tsx`)
- Studio data → Service catalog: filters services (evidence: `src/nocturne/useStudioData.ts`)
- Booking form → Firestore: checks slots (evidence: `src/components/BookingModal.tsx`)
- Booking form → Firestore: locks slot (evidence: `src/components/BookingModal.tsx`)
- Booking form → Firebase client: uses (evidence: `src/components/BookingModal.tsx`)
- Admin login → Firebase client: authenticates with (evidence: `src/pages/AdminLogin.tsx`)
- SPA routing → Admin dashboard: routes to (evidence: `src/App.tsx`)
- Admin dashboard → Firestore: manages bookings (evidence: `README.md`)
- Admin dashboard → Content management: renders (evidence: `src/pages/AdminDashboard.tsx`)
- Admin dashboard → Admin operations: uses (evidence: `src/pages/AdminDashboard.tsx`)
- Content management → Service management: uses (evidence: `src/components/admin/ContentManagement.tsx`)
- Content management → Gallery management: uses (evidence: `src/components/admin/ContentManagement.tsx`)
- Service management → Firestore: reads and writes (evidence: `src/components/admin/ServicesManagement.tsx`)
- Service management → Firebase Storage: uploads images (evidence: `src/components/admin/ServicesManagement.tsx`)
- Gallery management → Firestore: manages gallery (evidence: `src/components/admin/GalleryManagement.tsx`)
- Gallery management → Firebase Storage: uploads images (evidence: `README.md`)
- Sales ledger → Firestore: reads and writes (evidence: `src/components/admin/SalesLedger.tsx`)
- Admin dashboard → Email requests: sends request (evidence: `src/pages/AdminDashboard.tsx`)
- Email requests → Email endpoint: posts to (evidence: `src/pages/AdminDashboard.tsx`)
- Customer → Express backend: submits requests (evidence: `README.md`)
- Express backend → Template renderer: renders templates (evidence: `server.js`)
- Email endpoint → Template renderer: renders templates (evidence: `api/send-email.js`)
- Express backend → Email delivery: delivers email (evidence: `README.md`)
- Email endpoint → Email delivery: delivers email (evidence: `README.md`)
- Express backend → Session reminders: schedules (evidence: `README.md`)
- Session reminders → Email delivery: sends reminders (evidence: `README.md`)
- Site layout → Effects capability: checks capability (evidence: `src/nocturne/NocturneLayout.tsx`)
- SPA routing → Site layout: wraps public routes (evidence: `src/App.tsx`)
- Service management → Image compression: compresses uploads (evidence: `src/components/admin/ServicesManagement.tsx`)
- Image compression → Firebase Storage: prepares upload