# abhijith-web-dev/folient-io architecture

> Architecture diagram of the GitHub repository abhijith-web-dev/folient-io, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/abhijith-web-dev/folient-io
- Repository: https://github.com/abhijith-web-dev/folient-io

## Overview

1. **Repository shape**
   - Folient Builder is a **single-page React 19 + TypeScript application** built with Vite.
   - The repo is primarily a **frontend orchestration layer**: it owns the editor UI, local state, cloud API integrations, and client-side routing.
   - Static hosting support is baked in via `netlify.toml` and `public/_redirects`, so the app is meant to run as a client-rendered SPA.

2. **Top-level app composition**
   - `src/main.tsx` boots the app; `src/App.tsx` is the shell that wires routing and global UI.
   - The main route set lives under `src/pages/`: `Home`, `Editor`, `Dashboard`, `Community`, `Templates`, `Docs`, `Auth`, `Terms`, and `NotFound`.
   - This suggests a product split between a **marketing/site surface** and the **authenticated builder workspace**.

3. **Core editor workspace**
   - The editor experience is concentrated in `src/components/` and `src/components/editor/`.
   - Key building blocks include the **VisualCanvas**, **CodePanel**, **PropertyPanel**, **TopNavigationBar**, **LeftTelemetryPanel**, and AI/chat surfaces.
   - The editor subcomponents are organized by design domains: layout sections, typography, flexbox, box model, background, animation, layers, assets, and telemetry.
   - Architecturally, this is a **multi-panel workspace** where visual editing, code inspection, and property tuning are separate but synchronized views.

4. **State management boundary**
   - Global state is managed with **Zustand** stores in `src/store/`: `useAuthStore`, `useEditorStore`, and `useProjectStore`.
   - These stores are the main in-memory contract between the UI panels, the editor canvas, project persistence, and auth-aware features.
   - The likely flow is: **user action in canvas/panel → store update → other panels re-render from the same store state**.

5. **Local persistence and offline project storage**
   - `src/db/dexie.ts` shows the app uses **Dexie.js over IndexedDB** for local persistence.
   - This is the offline/cache boundary for project files and editor state, separate from cloud services.
   - The repo therefore has a clear split between **ephemeral UI state in Zustand** and **durable browser-local project storage in IndexedDB**.

6. **AI subsystem**
   - AI orchestration is centralized in `src/modules/ai/AIOrchestrator.ts`.
   - Provider-specific adapters live alongside it: `GeminiAdapter`, `GroqAdapter`, and `OpenRouterAdapter`.
   - `src/lib/aiInferenceRouter.ts` indicates a routing layer that chooses or forwards inference requests to the right model backend.
   - The UI surfaces for this are the AI chatbox and telemetry/status panels, so the AI system is treated as an **external intelligence service layer**, not embedded logic.

7. **Hosting and deployment subsystem**
   - `src/modules/hosting/` contains `PublishPanel`, `CloudCallback`, `useCloudAuth`, and another `useDeploymentEngine`.
   - `src/services/DeployService.ts` plus the hosting module imply a deployment pipeline that can publish generated work to external providers such as **Vercel** and **Netlify**.
   - `src/hooks/useDeploymentEngine.ts` mirrors that concern at the app level, suggesting a shared deployment state machine used by the publish UI and status display.
   - `CloudCallback` indicates the app expects an **OAuth or redirect-based callback flow** from cloud providers.

8. **Community/auth/data backend**
   - Firebase is present via `src/firebase/config.ts` and `firestore.rules`, and the README explicitly ties it to **community subscriptions, social feed, comments, and profile tracking**.
   - The `Community`, `Dashboard`, and `Auth` pages are the user-facing boundary for this backend.
   - This is separate from the editor: the app appears to use Firebase for **social and identity-related features**, while the builder itself remains mostly client-side.

9. **Supabase and secure asset storage**
   - Supabase integration is represented by `src/services/SupabaseClient.ts`, `credentialSync.ts`, and `portfolioSync.ts`.
   - Based on the README, Supabase is the **asset vault / media library layer** for uploads and shared assets.
   - `CryptoService.ts` and `src/utils/crypto.ts` suggest sensitive data is encrypted or transformed before sync, making this a distinct **secure-data boundary** rather than plain object storage.

10. **Template and content model**
    - `src/templates/templates.ts` provides the template catalog used by the templates page and likely the editor startup flow.
    - This is the product’s reusable content layer: it seeds the builder with prebuilt layouts, presets, and starter configurations.
    - Templates sit between the visual editor and the project store, acting as **initial state** or **importable project definitions**.

11. **Cross-cutting UX and app services**
    - `src/hooks/useSEO.ts` suggests the app also manages per-page metadata for public-facing pages.
    - `src/components/CookieConsentBanner.tsx` and `src/components/ErrorBoundary.tsx` are app-wide concerns rather than feature logic.
    - These sit in the shell layer and support the public marketing/community experience, not the editing core.

12. **Important architectural boundaries**
    - The app is mostly a **browser client with direct integrations to external services**; there is no custom server in this repo.
    - The primary boundaries are:
      - **UI/editor shell**
      - **local state and IndexedDB persistence**
      - **AI model routing**
      - **cloud deploy/auth callbacks**
      - **Firebase community data**
      - **Supabase asset storage**
    - For an architecture diagram, the central node should be the **React editor shell**, with arrows out to the AI providers, Firebase, Supabase, IndexedDB, and deployment providers.

Main entry points: [`src/App.tsx`](https://github.com/abhijith-web-dev/folient-io/blob/main/src/App.tsx) (App shell), [`src/pages/Editor.tsx`](https://github.com/abhijith-web-dev/folient-io/blob/main/src/pages/Editor.tsx) (Editor page), [`src/store/useEditorStore.ts`](https://github.com/abhijith-web-dev/folient-io/blob/main/src/store/useEditorStore.ts) (Editor store), [`src/pages`](https://github.com/abhijith-web-dev/folient-io/tree/main/src/pages) (Pages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_main(("Entry<br/>bootstrap<br/>[main.tsx]"))
  node_app["App shell<br/>router-shell<br/>[App.tsx]"]
  node_pages["Pages<br/>routes"]
  node_seo{{"SEO<br/>metadata<br/>[useSEO.ts]"}}
  node_consent["Consent<br/>global-ui"]
  node_error["Error boundary<br/>global-ui<br/>[ErrorBoundary.tsx]"]
end

subgraph group_editor["Editor workspace"]
  node_editorpage["Editor page<br/>workspace-entry<br/>[Editor.tsx]"]
  node_canvas["Canvas<br/>visual-editor<br/>[VisualCanvas.tsx]"]
  node_codepanel["Code panel<br/>code-view<br/>[CodePanel.tsx]"]
  node_props["Property panel<br/>inspector<br/>[PropertyPanel.tsx]"]
  node_nav["Top nav<br/>workspace-chrome"]
  node_telemetry["Telemetry<br/>status-panel"]
  node_aitools["AI chat<br/>assistant-ui<br/>[AiChatbox.tsx]"]
end

subgraph group_state["State & persistence"]
  node_editorstore{{"Editor store<br/>zustand-store<br/>[useEditorStore.ts]"}}
  node_projectstore{{"Project store<br/>zustand-store<br/>[useProjectStore.ts]"}}
  node_authstore{{"Auth store<br/>zustand-store<br/>[useAuthStore.ts]"}}
  node_dexie[("IndexedDB<br/>local-db<br/>[dexie.ts]")]
  node_templates["Templates<br/>content-model<br/>[templates.ts]"]
end

subgraph group_integrations["External services"]
  node_ai{{"AI orchestrator<br/>ai-router<br/>[AIOrchestrator.ts]"}}
  node_inference{{"Inference router<br/>model-routing"}}
  node_hosting["Publish flow<br/>deployment-ui<br/>[PublishPanel.tsx]"]
  node_deploy{{"Deploy service<br/>deployment-core<br/>[DeployService.ts]"}}
  node_cloud(("Cloud callback<br/>oauth-callback<br/>[CloudCallback.tsx]"))
  node_firebase[("Firebase<br/>community-backend<br/>[config.ts]")]
  node_supabase[("Supabase<br/>asset-vault<br/>[SupabaseClient.ts]")]
  node_crypto{{"Crypto<br/>secure-sync<br/>[CryptoService.ts]"}}
end

node_main -->|"mounts"| node_app
node_app -->|"routes"| node_pages
node_app -.->|"metadata"| node_seo
node_app -->|"renders"| node_consent
node_app -->|"guards"| node_error
node_pages -->|"workspace"| node_editorpage
node_editorpage -->|"contains"| node_nav
node_editorpage -->|"contains"| node_canvas
node_editorpage -->|"contains"| node_codepanel
node_editorpage -->|"contains"| node_props
node_editorpage -->|"contains"| node_telemetry
node_editorpage -->|"contains"| node_aitools
node_canvas -->|"reads/writes"| node_editorstore
node_props -->|"reads/writes"| node_editorstore
node_codepanel -->|"reads/writes"| node_editorstore
node_telemetry -->|"reads"| node_editorstore
node_editorstore -.->|"coordinates"| node_projectstore
node_projectstore -->|"persists"| node_dexie
node_projectstore -.->|"seeds"| node_templates
node_aitools -->|"uses"| node_ai
node_ai -->|"routes"| node_inference
node_ai -.->|"reports"| node_telemetry
node_hosting -->|"drives"| node_deploy
node_hosting -->|"auth callback"| node_cloud
node_deploy -.->|"auth handshake"| node_cloud
node_app -->|"community"| node_firebase
node_app -->|"assets"| node_supabase
node_supabase -.->|"secures"| node_crypto
node_pages -.->|"auth state"| node_authstore

click node_main "https://github.com/abhijith-web-dev/folient-io/blob/main/src/main.tsx"
click node_app "https://github.com/abhijith-web-dev/folient-io/blob/main/src/App.tsx"
click node_pages "https://github.com/abhijith-web-dev/folient-io/tree/main/src/pages"
click node_seo "https://github.com/abhijith-web-dev/folient-io/blob/main/src/hooks/useSEO.ts"
click node_consent "https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/CookieConsentBanner.tsx"
click node_error "https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/ErrorBoundary.tsx"
click node_editorpage "https://github.com/abhijith-web-dev/folient-io/blob/main/src/pages/Editor.tsx"
click node_canvas "https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/VisualCanvas.tsx"
click node_codepanel "https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/CodePanel.tsx"
click node_props "https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/PropertyPanel.tsx"
click node_nav "https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/TopNavigationBar.tsx"
click node_telemetry "https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/LeftTelemetryPanel.tsx"
click node_aitools "https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/AiChatbox.tsx"
click node_editorstore "https://github.com/abhijith-web-dev/folient-io/blob/main/src/store/useEditorStore.ts"
click node_projectstore "https://github.com/abhijith-web-dev/folient-io/blob/main/src/store/useProjectStore.ts"
click node_authstore "https://github.com/abhijith-web-dev/folient-io/blob/main/src/store/useAuthStore.ts"
click node_dexie "https://github.com/abhijith-web-dev/folient-io/blob/main/src/db/dexie.ts"
click node_templates "https://github.com/abhijith-web-dev/folient-io/blob/main/src/templates/templates.ts"
click node_ai "https://github.com/abhijith-web-dev/folient-io/blob/main/src/modules/ai/AIOrchestrator.ts"
click node_inference "https://github.com/abhijith-web-dev/folient-io/blob/main/src/lib/aiInferenceRouter.ts"
click node_hosting "https://github.com/abhijith-web-dev/folient-io/blob/main/src/modules/hosting/PublishPanel.tsx"
click node_deploy "https://github.com/abhijith-web-dev/folient-io/blob/main/src/services/DeployService.ts"
click node_cloud "https://github.com/abhijith-web-dev/folient-io/blob/main/src/modules/hosting/CloudCallback.tsx"
click node_firebase "https://github.com/abhijith-web-dev/folient-io/blob/main/src/firebase/config.ts"
click node_supabase "https://github.com/abhijith-web-dev/folient-io/blob/main/src/services/SupabaseClient.ts"
click node_crypto "https://github.com/abhijith-web-dev/folient-io/blob/main/src/services/CryptoService.ts"

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_main,node_app,node_pages,node_seo,node_consent,node_error toneBlue
class node_editorpage,node_canvas,node_codepanel,node_props,node_nav,node_telemetry,node_aitools toneAmber
class node_editorstore,node_projectstore,node_authstore,node_dexie,node_templates toneMint
class node_ai,node_inference,node_hosting,node_deploy,node_cloud,node_firebase,node_supabase,node_crypto toneRose
```

## Components

### App shell

Routing, page surfaces, and shared UI concerns.

- [Entry](https://github.com/abhijith-web-dev/folient-io/blob/main/src/main.tsx): bootstrap · Vite entrypoint that mounts the React app. · `src/main.tsx`
- [App shell](https://github.com/abhijith-web-dev/folient-io/blob/main/src/App.tsx): router-shell · Top-level application shell and route wiring. · `src/App.tsx`
- [Pages](https://github.com/abhijith-web-dev/folient-io/tree/main/src/pages): routes · Public and authenticated page surfaces. · `src/pages`
- [SEO](https://github.com/abhijith-web-dev/folient-io/blob/main/src/hooks/useSEO.ts): metadata · Per-page metadata handling for public surfaces. · `src/hooks/useSEO.ts`
- [Consent](https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/CookieConsentBanner.tsx): global-ui · App-wide cookie and error boundary concerns. · `src/components/CookieConsentBanner.tsx`
- [Error boundary](https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/ErrorBoundary.tsx): global-ui · Top-level runtime error containment. · `src/components/ErrorBoundary.tsx`

### Editor workspace

Multi-panel builder UI and its synchronized editor views.

- [Editor page](https://github.com/abhijith-web-dev/folient-io/blob/main/src/pages/Editor.tsx): workspace-entry · Route entry for the builder workspace. · `src/pages/Editor.tsx`
- [Canvas](https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/VisualCanvas.tsx): visual-editor · Primary visual editing surface. · `src/components/VisualCanvas.tsx`
- [Code panel](https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/CodePanel.tsx): code-view · Code-oriented inspection and editing panel. · `src/components/CodePanel.tsx`
- [Property panel](https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/PropertyPanel.tsx): inspector · Property and styling controls for selected elements. · `src/components/PropertyPanel.tsx`
- [Top nav](https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/TopNavigationBar.tsx): workspace-chrome · Workspace navigation and editor controls. · `src/components/TopNavigationBar.tsx`
- [Telemetry](https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/LeftTelemetryPanel.tsx): status-panel · Left-side telemetry and status surface. · `src/components/LeftTelemetryPanel.tsx`
- [AI chat](https://github.com/abhijith-web-dev/folient-io/blob/main/src/components/AiChatbox.tsx): assistant-ui · User-facing AI assistance surface. · `src/components/AiChatbox.tsx`

### State & persistence

Client state, local storage, and project data boundaries.

- [Editor store](https://github.com/abhijith-web-dev/folient-io/blob/main/src/store/useEditorStore.ts): zustand-store · Shared in-memory editor state contract. · `src/store/useEditorStore.ts`
- [Project store](https://github.com/abhijith-web-dev/folient-io/blob/main/src/store/useProjectStore.ts): zustand-store · Project-level state and coordination. · `src/store/useProjectStore.ts`
- [Auth store](https://github.com/abhijith-web-dev/folient-io/blob/main/src/store/useAuthStore.ts): zustand-store · Authentication-aware client state. · `src/store/useAuthStore.ts`
- [IndexedDB](https://github.com/abhijith-web-dev/folient-io/blob/main/src/db/dexie.ts): local-db · Browser-local durable project persistence. · `src/db/dexie.ts`
- [Templates](https://github.com/abhijith-web-dev/folient-io/blob/main/src/templates/templates.ts): content-model · Starter layouts and reusable builder presets. · `src/templates/templates.ts`

### External services

AI, hosting, auth, and backend integrations.

- [AI orchestrator](https://github.com/abhijith-web-dev/folient-io/blob/main/src/modules/ai/AIOrchestrator.ts): ai-router · Central AI request orchestration and provider routing. · `src/modules/ai/AIOrchestrator.ts`
- [Inference router](https://github.com/abhijith-web-dev/folient-io/blob/main/src/lib/aiInferenceRouter.ts): model-routing · Routes inference requests across model backends. · `src/lib/aiInferenceRouter.ts`
- [Publish flow](https://github.com/abhijith-web-dev/folient-io/blob/main/src/modules/hosting/PublishPanel.tsx): deployment-ui · Hosting and deployment control surface. · `src/modules/hosting/PublishPanel.tsx`
- [Deploy service](https://github.com/abhijith-web-dev/folient-io/blob/main/src/services/DeployService.ts): deployment-core · Deployment pipeline and provider integration. · `src/services/DeployService.ts`
- [Cloud callback](https://github.com/abhijith-web-dev/folient-io/blob/main/src/modules/hosting/CloudCallback.tsx): oauth-callback · Redirect/callback handling for provider auth. · `src/modules/hosting/CloudCallback.tsx`
- [Firebase](https://github.com/abhijith-web-dev/folient-io/blob/main/src/firebase/config.ts): community-backend · Community, identity, and social data backend. · `src/firebase/config.ts`
- [Supabase](https://github.com/abhijith-web-dev/folient-io/blob/main/src/services/SupabaseClient.ts): asset-vault · Asset storage and sync boundary. · `src/services/SupabaseClient.ts`
- [Crypto](https://github.com/abhijith-web-dev/folient-io/blob/main/src/services/CryptoService.ts): secure-sync · Encryption and secure transformation layer. · `src/services/CryptoService.ts`

## Connections

- Entry → App shell: mounts · Bootstraps the React application.
- App shell → Pages: routes · Dispatches to public and workspace pages.
- App shell → SEO: metadata · Updates page metadata for routed views.
- App shell → Consent: renders · Shows global consent and app chrome.
- App shell → Error boundary: guards · Wraps the app in runtime error handling.
- Pages → Editor page: workspace · Editor route enters the builder shell.
- Editor page → Top nav: contains · Workspace chrome includes top navigation.
- Editor page → Canvas: contains · Primary visual editing surface.
- Editor page → Code panel: contains · Code inspection/editing view.
- Editor page → Property panel: contains · Property inspector for selections.
- Editor page → Telemetry: contains · Telemetry/status side panel.
- Editor page → AI chat: contains · AI assistant surface in the workspace.
- Canvas → Editor store: reads/writes · Canvas updates shared editor state.
- Property panel → Editor store: reads/writes · Property changes flow through editor state.
- Code panel → Editor store: reads/writes · Code view stays synchronized with editor state.
- Telemetry → Editor store: reads · Telemetry reflects the shared editor state.
- Editor store → Project store: coordinates · Editor state feeds project-level coordination.
- Project store → IndexedDB: persists · Projects are stored durably in IndexedDB.
- Project store → Templates: seeds · Templates initialize or import project state.
- AI chat → AI orchestrator: uses · Chat UI delegates to the AI orchestrator.
- AI orchestrator → Inference router: routes · Selects or forwards model requests.
- AI orchestrator → Telemetry: reports · AI status is surfaced in telemetry panels.
- Publish flow → Deploy service: drives · Publish UI triggers deployment workflow.
- Publish flow → Cloud callback: auth callback · Handles provider redirect/callback flow.
- Deploy service → Cloud callback: auth handshake · Deployment depends on cloud auth completion.
- App shell → Firebase: community · Community and auth pages consume Firebase data.
- App shell → Supabase: assets · Asset and media features use Supabase.
- Supabase → Crypto: secures · Sensitive sync data is transformed before storage.
- Pages → Auth store: auth state · Auth pages and gated views rely on auth state.