# sibiraj-003/studio-tj architecture

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

- Interactive diagram: https://gitdiagram.com/sibiraj-003/studio-tj
- Repository: https://github.com/sibiraj-003/studio-tj

## Overview

#### 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.

Main entry points: [`App.tsx`](https://github.com/sibiraj-003/studio-tj/blob/main/App.tsx) (Application shell), [`services/api.ts`](https://github.com/sibiraj-003/studio-tj/blob/main/services/api.ts) (Backend API abstraction), [`components/AuthPage.tsx`](https://github.com/sibiraj-003/studio-tj/blob/main/components/AuthPage.tsx) (Authentication), [`components/BookingModal.tsx`](https://github.com/sibiraj-003/studio-tj/blob/main/components/BookingModal.tsx) (Booking flow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser SPA"]
  node_index["Browser bootstrap<br/>React entry<br/>[index.tsx]"]
  node_app["Application shell<br/>React orchestration<br/>[App.tsx]"]
  node_public_shell["Public site shell<br/>shared components<br/>[Navbar.tsx]"]
  node_marketing["Marketing sections<br/>content components<br/>[Services.tsx]"]
  node_auth["Authentication<br/>auth UI<br/>[AuthPage.tsx]"]
  node_booking["Booking flow<br/>booking UI<br/>[BookingModal.tsx]"]
  node_client_dashboard["Client dashboard<br/>client UI"]
  node_admin_dashboard["Admin dashboard<br/>admin UI<br/>[AdminDashboard.tsx]"]
  node_ai_assistant["AI assistant<br/>conversational UI<br/>[AiAssistant.tsx]"]
  node_types["Domain contracts<br/>TypeScript types<br/>[types.ts]"]
end

subgraph group_services["Service Integrations"]
  node_firebase_service["Firebase integration<br/>auth/data service<br/>[firebase.ts]"]
  node_api_service["Backend API abstraction<br/>request service<br/>[api.ts]"]
  node_gemini_service["Gemini integration<br/>AI service<br/>[geminiService.ts]"]
  node_firebase[("Firebase<br/>external auth/data &amp; hosting")]
  node_gemini{{"Google Gemini API<br/>external AI API"}}
end

subgraph group_delivery["Build &amp; Delivery"]
  node_html["HTML entry<br/>Vite entry<br/>[index.html]"]
  node_vite["Vite build<br/>browser bundler<br/>[vite.config.ts]"]
  node_firebase_hosting["Firebase Hosting deploy<br/>CI deployment"]
  node_vercel["Vercel hosting<br/>static SPA deployment<br/>[vercel.json]"]
end

node_html -->|"loads"| node_index
node_index -->|"renders"| node_app
node_app -->|"composes"| node_public_shell
node_app -->|"shows"| node_marketing
node_app -->|"opens"| node_auth
node_app -->|"invokes"| node_booking
node_app -->|"routes authenticated clients"| node_client_dashboard
node_app -->|"routes administrators"| node_admin_dashboard
node_app -->|"hosts"| node_ai_assistant
node_auth -->|"authenticates through"| node_firebase_service
node_booking -->|"submits through"| node_api_service
node_client_dashboard -->|"uses"| node_api_service
node_admin_dashboard -->|"uses"| node_api_service
node_ai_assistant -->|"sends prompts through"| node_gemini_service
node_firebase_service -->|"integrates"| node_firebase
node_gemini_service -->|"calls"| node_gemini
node_auth -.->|"uses contracts"| node_types
node_booking -.->|"uses contracts"| node_types
node_api_service -.->|"maps contracts"| node_types
node_vite -->|"builds from"| node_html
node_vite -->|"bundles"| node_index
node_firebase_hosting -->|"deploys to"| node_firebase
node_vercel -.->|"hosts build output"| node_vite

click node_html "https://github.com/sibiraj-003/studio-tj/blob/main/index.html"
click node_index "https://github.com/sibiraj-003/studio-tj/blob/main/index.tsx"
click node_app "https://github.com/sibiraj-003/studio-tj/blob/main/App.tsx"
click node_public_shell "https://github.com/sibiraj-003/studio-tj/blob/main/components/Navbar.tsx"
click node_marketing "https://github.com/sibiraj-003/studio-tj/blob/main/components/Services.tsx"
click node_auth "https://github.com/sibiraj-003/studio-tj/blob/main/components/AuthPage.tsx"
click node_booking "https://github.com/sibiraj-003/studio-tj/blob/main/components/BookingModal.tsx"
click node_client_dashboard "https://github.com/sibiraj-003/studio-tj/blob/main/components/ClientDashboard.tsx"
click node_admin_dashboard "https://github.com/sibiraj-003/studio-tj/blob/main/components/AdminDashboard.tsx"
click node_ai_assistant "https://github.com/sibiraj-003/studio-tj/blob/main/components/AiAssistant.tsx"
click node_types "https://github.com/sibiraj-003/studio-tj/blob/main/types.ts"
click node_firebase_service "https://github.com/sibiraj-003/studio-tj/blob/main/services/firebase.ts"
click node_api_service "https://github.com/sibiraj-003/studio-tj/blob/main/services/api.ts"
click node_gemini_service "https://github.com/sibiraj-003/studio-tj/blob/main/services/geminiService.ts"
click node_vite "https://github.com/sibiraj-003/studio-tj/blob/main/vite.config.ts"
click node_firebase_hosting "https://github.com/sibiraj-003/studio-tj/blob/main/.github/workflows/firebase-hosting-merge.yml"
click node_vercel "https://github.com/sibiraj-003/studio-tj/blob/main/vercel.json"

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_index,node_app,node_public_shell,node_marketing,node_auth,node_booking,node_client_dashboard,node_admin_dashboard,node_ai_assistant,node_types toneBlue
class node_firebase_service,node_api_service,node_gemini_service,node_firebase,node_gemini toneAmber
class node_html,node_vite,node_firebase_hosting,node_vercel toneMint
```

## Components

### Browser SPA

- [Browser bootstrap](https://github.com/sibiraj-003/studio-tj/blob/main/index.tsx): React entry · `index.tsx`
- [Application shell](https://github.com/sibiraj-003/studio-tj/blob/main/App.tsx): React orchestration · Composes public, authentication, booking, and dashboard experiences. · `App.tsx`
- [Public site shell](https://github.com/sibiraj-003/studio-tj/blob/main/components/Navbar.tsx): shared components · `components/Navbar.tsx`
- [Marketing sections](https://github.com/sibiraj-003/studio-tj/blob/main/components/Services.tsx): content components · Services, portfolio, categories, and contact content. · `components/Services.tsx`
- [Authentication](https://github.com/sibiraj-003/studio-tj/blob/main/components/AuthPage.tsx): auth UI · `components/AuthPage.tsx`
- [Booking flow](https://github.com/sibiraj-003/studio-tj/blob/main/components/BookingModal.tsx): booking UI · `components/BookingModal.tsx`
- [Client dashboard](https://github.com/sibiraj-003/studio-tj/blob/main/components/ClientDashboard.tsx): client UI · `components/ClientDashboard.tsx`
- [Admin dashboard](https://github.com/sibiraj-003/studio-tj/blob/main/components/AdminDashboard.tsx): admin UI · `components/AdminDashboard.tsx`
- [AI assistant](https://github.com/sibiraj-003/studio-tj/blob/main/components/AiAssistant.tsx): conversational UI · `components/AiAssistant.tsx`
- [Domain contracts](https://github.com/sibiraj-003/studio-tj/blob/main/types.ts): TypeScript types · Shared user, booking, service, and UI-state contracts. · `types.ts`

### Service Integrations

- [Firebase integration](https://github.com/sibiraj-003/studio-tj/blob/main/services/firebase.ts): auth/data service · `services/firebase.ts`
- [Backend API abstraction](https://github.com/sibiraj-003/studio-tj/blob/main/services/api.ts): request service · `services/api.ts`
- [Gemini integration](https://github.com/sibiraj-003/studio-tj/blob/main/services/geminiService.ts): AI service · Uses the runtime GEMINI_API_KEY credential. · `services/geminiService.ts`
- **Firebase**: external auth/data & hosting
- **Google Gemini API**: external AI API

### Build & Delivery

- [HTML entry](https://github.com/sibiraj-003/studio-tj/blob/main/index.html): Vite entry · `index.html`
- [Vite build](https://github.com/sibiraj-003/studio-tj/blob/main/vite.config.ts): browser bundler · `vite.config.ts`
- [Firebase Hosting deploy](https://github.com/sibiraj-003/studio-tj/blob/main/.github/workflows/firebase-hosting-merge.yml): CI deployment · GitHub Actions deploys the static SPA on merge and pull-request workflows. · `.github/workflows/firebase-hosting-merge.yml`
- [Vercel hosting](https://github.com/sibiraj-003/studio-tj/blob/main/vercel.json): static SPA deployment · `vercel.json`

## Connections

- HTML entry → Browser bootstrap: loads
- Browser bootstrap → Application shell: renders
- Application shell → Public site shell: composes
- Application shell → Marketing sections: shows
- Application shell → Authentication: opens
- Application shell → Booking flow: invokes
- Application shell → Client dashboard: routes authenticated clients
- Application shell → Admin dashboard: routes administrators
- Application shell → AI assistant: hosts
- Authentication → Firebase integration: authenticates through
- Booking flow → Backend API abstraction: submits through
- Client dashboard → Backend API abstraction: uses
- Admin dashboard → Backend API abstraction: uses
- AI assistant → Gemini integration: sends prompts through
- Firebase integration → Firebase: integrates
- Gemini integration → Google Gemini API: calls
- Authentication → Domain contracts: uses contracts
- Booking flow → Domain contracts: uses contracts
- Backend API abstraction → Domain contracts: maps contracts
- Vite build → HTML entry: builds from
- Vite build → Browser bootstrap: bundles
- Firebase Hosting deploy → Firebase: deploys to
- Vercel hosting → Vite build: hosts build output