sibiraj-003/studio-tj

Purpose and Entry Points

This is a Vite + React + TypeScript single-page application for a service/portfolio business, with public marketing content, authentication, booking, AI assistance, and role-oriented client/admin dashboards. The browser bootstraps at index.tsx, renders the application shell in App.tsx, and is packaged through vite.config.ts.

Application Composition and Navigation

App.tsx is the primary orchestration boundary: it selects or composes public-facing sections, authentication, booking, and authenticated dashboard experiences. Shared presentation/navigation components establish the public site shell:

• components/Navbar.tsx

• components/Hero.tsx

• components/Footer.tsx

Marketing/content stages are separated into feature sections such as components/Services.tsx, components/Portfolio.tsx, components/CategoryGrid.tsx, and components/Contact.tsx.

Identity and Role-Based Experiences

Authentication is encapsulated in components/AuthPage.tsx and backed by Firebase initialization/service access in services/firebase.ts. Post-authentication workflows split into distinct role-oriented surfaces:

• Client-facing account and booking context: components/ClientDashboard.tsx

• Administrative management context: components/AdminDashboard.tsx

The shared domain contracts for users, bookings, services, or related UI state are centralized in types.ts, forming the main type boundary between components and service integrations.

Booking Flow

components/BookingModal.tsx is the focused interaction boundary for creating or submitting a booking. It is invoked from the application’s marketing/client flows and delegates persistence or backend interaction through the service layer, principally services/api.ts. This keeps form/UI state separate from API and Firebase concerns.

AI Assistant Integration

components/AiAssistant.tsx provides the user-facing conversational or AI-help surface. Requests are isolated in services/geminiService.ts, which uses the Gemini API key supplied as GEMINI_API_KEY in .env.local. The API credential is therefore a runtime deployment boundary: it must be injected into the Vite environment rather than committed.

Service and External-System Boundaries

The service layer separates external concerns from React components:

• Firebase auth/data integration: services/firebase.ts

• Application/backend request abstraction: services/api.ts

• Google Gemini interaction: services/geminiService.ts

Firebase is also a deployment target, configured by firebase.json and .firebaserc. Vercel deployment metadata exists in vercel.json, indicating the static SPA can be hosted on either platform.

Build and Delivery

Vite produces the browser bundle from index.html and index.tsx. Firebase Hosting automation is implemented through GitHub Actions:

• .github/workflows/firebase-hosting-merge.yml

• .github/workflows/firebase-hosting-pull-request.yml

The checked-in .firebase/hosting.ZGlzdA.cache reflects Firebase Hosting deployment/build-cache state rather than application runtime logic.