Getting Started

Prerequisites

Node.js (v18+)
npm (comes with Node)
Access to the Firebase project credentials

Setup

Clone the repository and navigate to the studio directory:
Terminal window
```
cd studio
```

Create a .env file with Firebase credentials:

PUBLIC_FIREBASE_API_KEY=...
PUBLIC_FIREBASE_AUTH_DOMAIN=...
PUBLIC_FIREBASE_PROJECT_ID=...
PUBLIC_FIREBASE_STORAGE_BUCKET=...
PUBLIC_FIREBASE_MESSAGING_SENDER_ID=...
PUBLIC_FIREBASE_APP_ID=...
PUBLIC_FIREBASE_MEASUREMENT_ID=...

All variables are PUBLIC_ prefixed (client-side Firebase SDK).

Install dependencies:
Terminal window
```
npm install
```
Start the dev server:
Terminal window
```
npm run dev
```
Opens at http://localhost:5173 by default.

Available Scripts

Script	Command	Purpose
`dev`	`vite dev`	Start development server
`build`	`vite build`	Production build
`preview`	`vite preview`	Preview production build
`check`	`svelte-check`	TypeScript type checking
`check:watch`	`svelte-check --watch`	Watch mode type checking
`format`	`prettier --write .`	Format all files
`lint`	`prettier --check .`	Check formatting

Key Configuration

SSR is Disabled

The root +layout.ts sets export const ssr = false. The entire app is client-side rendered. This is required because Firebase SDK operations run in the browser.

Cloudflare Adapter

Production deploys to Cloudflare Pages via @sveltejs/adapter-cloudflare. The adapter configuration excludes all static assets from SSR routing.

External CDN Dependencies

The app.html template loads three external libraries via CDN:

Library	Purpose	Loaded Via
Quill	Rich text editor (alternative to EditorJS)	`<script>` tag
emoji-picker-element	Emoji selection UI	ES module
dhtmlxgantt.js	Gantt chart for HyvFlow	`<script>` tag (from `/static`)

Tailwind CSS v4

Tailwind is configured via the Vite plugin (@tailwindcss/vite), not via postcss.config.js. Styles are in src/app.css.

shadcn-svelte

UI components are configured in components.json:

Base color: slate
Component path: $lib/components/ui
Registry: https://shadcn-svelte.com/registry

To add a new shadcn component:

npx shadcn-svelte@latest add button

App Initialization Flow

app.html
  └── +layout.svelte (root)
        ├── Import app.css (Tailwind)
        ├── Set favicon
        ├── <Toaster /> (svelte-sonner)
        ├── <ModeWatcher /> (dark/light mode)
        ├── <FirebaseApp> (svelte-firekit — initializes Firebase)
        │     ├── <BubbleApp /> (chat bubble widget)
        │     └── {children} (route content)
        └── onMount: cookieManager.initializeReferralTracking()

Firebase is initialized automatically by the <FirebaseApp> component from svelte-firekit using the PUBLIC_FIREBASE_* env variables. No manual initializeApp() call is needed.

Project Structure Quick Reference

src/
├── routes/          # Pages (SvelteKit file-based routing)
├── lib/
│   ├── modules/     # Feature modules (auth, hubs, hyvflow, etc.)
│   ├── components/  # Shared + UI components
│   ├── services/    # Shared services
│   ├── stores/      # Shared state managers
│   ├── types/       # Shared TypeScript types
│   ├── schemas/     # Shared validation schemas
│   ├── data/        # Reference data (countries, languages, etc.)
│   ├── config.ts    # Site config & navigation
│   └── utils.ts     # Utility functions
├── app.css          # Global Tailwind styles
├── app.d.ts         # Global type declarations
└── app.html         # HTML shell