How nhpwebteam-code/my3-studio works
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: App.jsx Router Shell · StudioDataContext.jsx Studio Data Context · Home.jsx Studio Home · services.js Services Data
Components 27
Public Experience
- Router Shell
src/App.jsx - Studio Home
src/pages/Home.jsx - Studio Story
src/pages/About.jsx - Portfolio Gallery
src/pages/Gallery.jsx - Image Lightbox
src/components/LightboxModal.jsx - Services Catalog
src/pages/Services.jsx - Service Showcase
src/components/ServicesShowcase.jsx - Package Pricing
src/pages/Pricing.jsx - Package Options
src/components/ServiceCard.jsx - Client Reviews
src/components/JustdialReviews.jsx
Booking Inquiry
- Contact Page
src/pages/Contact.jsx - Booking Form
src/components/ContactForm.jsx - Booking Modal
src/components/BookingModal.jsx
Studio Administration
- Admin Login
src/pages/Login.jsx - Admin Dashboard
src/pages/AdminDashboard.jsx
Studio Content
- Gallery Data
src/data/gallery.js - Portfolio Data
src/data/portfolio.js - Services Data
src/data/services.js - Pricing Data
src/data/pricing.js - Studio Configuration
src/data/studioConfig.js - Testimonials
src/data/testimonials.js
Data and State
- Studio Data Context
src/context/StudioDataContext.jsx - Browser Storage
Other components
- Visitor
- Administrator
- Gallery API
- Cross-tab Channel
Connections 32
- 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