How icuhdev0214/itsourstudio-v2 works
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: App.tsx SPA routing · AdminDashboard.tsx Admin dashboard · useStudioData.ts Studio data · BookingModal.tsx Booking form
Components 28
Customer site
- SPA routing
src/App.tsx - Public pages
src/pages/NocturneHome.tsx - Service listings
src/pages/Services.tsx - Studio data
src/nocturne/useStudioData.ts - Gallery pages
src/pages/NocturneGallery.tsx
Booking workflow
- Booking state
src/context/BookingContext.tsx - Booking form
src/components/BookingModal.tsx - Service catalog
src/utils/serviceCatalog.ts
Studio administration
- Admin login
src/pages/AdminLogin.tsx - Admin dashboard
src/pages/AdminDashboard.tsx - Content management
src/components/admin/ContentManagement.tsx - Service management
src/components/admin/ServicesManagement.tsx - Gallery management
src/components/admin/GalleryManagement.tsx - Sales ledger
src/components/admin/SalesLedger.tsx - Admin operations
src/components/admin
Backend services
- Firebase client
src/firebase.ts - Firestore
- Firebase Storage
- Email requests
src/pages/AdminDashboard.tsx - Express backend
server.js - Email endpoint
api/send-email.js - Template renderer
api/email-template-renderer.js - Session reminders
server.js - Image compression
src/utils/compressImage.ts
Nocturne presentation
- Effects capability
src/nocturne/useEffectsEnabled.ts - Site layout
src/nocturne/NocturneLayout.tsx
Other components
- Customer
- Email delivery
Connections 37
- Customer → SPA routing: browses
README.md - SPA routing → Public pages: routes to
src/App.tsx - SPA routing → Booking form: renders
src/App.tsx - Public pages → Studio data: loads
src/pages/NocturneHome.tsx - Studio data → Firebase client: reads through
src/nocturne/useStudioData.ts - Studio data → Firestore: reads
src/nocturne/useStudioData.ts - Service listings → Firestore: reads
src/pages/Services.tsx - Service listings → Booking state: opens booking
src/pages/Services.tsx - Studio data → Service catalog: filters services
src/nocturne/useStudioData.ts - Booking form → Firestore: checks slots
src/components/BookingModal.tsx - Booking form → Firestore: locks slot
src/components/BookingModal.tsx - Booking form → Firebase client: uses
src/components/BookingModal.tsx - Admin login → Firebase client: authenticates with
src/pages/AdminLogin.tsx - SPA routing → Admin dashboard: routes to
src/App.tsx - Admin dashboard → Firestore: manages bookings
README.md - Admin dashboard → Content management: renders
src/pages/AdminDashboard.tsx - Admin dashboard → Admin operations: uses
src/pages/AdminDashboard.tsx - Content management → Service management: uses
src/components/admin/ContentManagement.tsx - Content management → Gallery management: uses
src/components/admin/ContentManagement.tsx - Service management → Firestore: reads and writes
src/components/admin/ServicesManagement.tsx - Service management → Firebase Storage: uploads images
src/components/admin/ServicesManagement.tsx - Gallery management → Firestore: manages gallery
src/components/admin/GalleryManagement.tsx - Gallery management → Firebase Storage: uploads images
README.md - Sales ledger → Firestore: reads and writes
src/components/admin/SalesLedger.tsx - Admin dashboard → Email requests: sends request
src/pages/AdminDashboard.tsx - Email requests → Email endpoint: posts to
src/pages/AdminDashboard.tsx - Customer → Express backend: submits requests
README.md - Express backend → Template renderer: renders templates
server.js - Email endpoint → Template renderer: renders templates
api/send-email.js - Express backend → Email delivery: delivers email
README.md - Email endpoint → Email delivery: delivers email
README.md - Express backend → Session reminders: schedules
README.md - Session reminders → Email delivery: sends reminders
README.md - Site layout → Effects capability: checks capability
src/nocturne/NocturneLayout.tsx - SPA routing → Site layout: wraps public routes
src/App.tsx - Service management → Image compression: compresses uploads
src/components/admin/ServicesManagement.tsx - Image compression → Firebase Storage: prepares upload