# skyfalljoss/crm-vibecode architecture

> Architecture diagram of the GitHub repository skyfalljoss/crm-vibecode, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/skyfalljoss/crm-vibecode
- Repository: https://github.com/skyfalljoss/crm-vibecode

## Overview

SkyCRM is a team CRM web app. Visitors reach sign-in or sign-up from the landing page; authenticated users enter the workspace, where CRMApp loads and coordinates CRM data and presents dashboard, pipeline, leads, tasks, billing, and settings views. Lead import is a user-driven path from CSV upload and mapping through CRMApp’s import handler to persisted leads. The README documents analytics, shared workspaces, and export; their detailed wiring is not shown in the sampled source, so those links are kept at the documented subsystem level.

Main entry points: [`CRMApp.tsx`](https://github.com/skyfalljoss/crm-vibecode/blob/main/CRMApp.tsx) (Workspace controller), [`App.tsx`](https://github.com/skyfalljoss/crm-vibecode/blob/main/App.tsx) (Routes and guards), [`src/lib/supabase.ts`](https://github.com/skyfalljoss/crm-vibecode/blob/main/src/lib/supabase.ts) (Supabase client), [`src/pages/LandingPage.tsx`](https://github.com/skyfalljoss/crm-vibecode/blob/main/src/pages/LandingPage.tsx) (Landing page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Entry and identity"]
  node_app["Routes and guards<br/>[App.tsx]"]
  node_landing["Landing page<br/>[LandingPage.tsx]"]
  node_authpage["Sign-in / sign-up<br/>[AuthPage.tsx]"]
  node_authstate["Session context<br/>[AuthContext.tsx]"]
  node_supabaseclient["Supabase client<br/>[supabase.ts]"]
end

subgraph group_workspace["Workspace shell"]
  node_crm["Workspace controller<br/>[CRMApp.tsx]"]
end

subgraph group_sales["Sales workflows"]
  node_dashboard["Analytics dashboard<br/>[Dashboard.tsx]"]
  node_pipeline["Deal pipeline<br/>[Pipeline.tsx]"]
  node_leads["Lead tracking<br/>[LeadsList.tsx]"]
  node_leadprofile["Lead details<br/>[LeadDrawer.tsx]"]
  node_newlead["Create lead<br/>[NewLeadModal.tsx]"]
  node_import["CSV import<br/>[ImportModal.tsx]"]
  node_tasks["Task management<br/>[TasksList.tsx]"]
  node_taskdetail["Task details<br/>[TaskDrawer.tsx]"]
end

subgraph group_operations["Team operations"]
  node_onboarding["Workspace onboarding<br/>[Onboarding.tsx]"]
  node_settings["Team settings<br/>[Settings.tsx]"]
  node_billing["Billing<br/>[Billing.tsx]"]
  node_payment["Checkout page<br/>[PaymentPage.tsx]"]
  node_schema["CRM schema<br/>[schema.sql]"]
end

node_visitor(("Visitor / user"))
node_supabase[("Supabase services")]

node_visitor -->|"visits"| node_landing
node_visitor -->|"opens app"| node_app
node_landing -->|"starts signup"| node_app
node_app -->|"provides session"| node_authstate
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_authpage
node_app -->|"guards dashboard"| node_crm
node_app -->|"routes to"| node_payment
node_authpage -->|"authenticates"| node_supabaseclient
node_authstate -->|"reads session"| node_supabaseclient
node_supabaseclient -->|"connects"| node_supabase
node_crm -->|"loads and mutates"| node_supabaseclient
node_crm -->|"presents setup"| node_onboarding
node_crm -->|"renders"| node_dashboard
node_crm -->|"renders"| node_pipeline
node_crm -->|"renders"| node_leads
node_crm -->|"renders"| node_tasks
node_crm -->|"renders"| node_settings
node_crm -->|"renders"| node_billing
node_crm -->|"opens"| node_newlead
node_crm -->|"opens"| node_leadprofile
node_crm -->|"opens"| node_taskdetail
node_leads -->|"opens import"| node_import
node_import -->|"submits mapped leads"| node_crm
node_pipeline -->|"requests stage move"| node_crm
node_billing -.->|"opens checkout"| node_payment
node_schema -->|"defines tables"| node_supabase

click node_app "https://github.com/skyfalljoss/crm-vibecode/blob/main/App.tsx"
click node_landing "https://github.com/skyfalljoss/crm-vibecode/blob/main/src/pages/LandingPage.tsx"
click node_authpage "https://github.com/skyfalljoss/crm-vibecode/blob/main/src/pages/AuthPage.tsx"
click node_authstate "https://github.com/skyfalljoss/crm-vibecode/blob/main/src/context/AuthContext.tsx"
click node_supabaseclient "https://github.com/skyfalljoss/crm-vibecode/blob/main/src/lib/supabase.ts"
click node_crm "https://github.com/skyfalljoss/crm-vibecode/blob/main/CRMApp.tsx"
click node_dashboard "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Dashboard.tsx"
click node_pipeline "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Pipeline.tsx"
click node_leads "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/LeadsList.tsx"
click node_leadprofile "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/LeadDrawer.tsx"
click node_newlead "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/NewLeadModal.tsx"
click node_import "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/ImportModal.tsx"
click node_tasks "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/TasksList.tsx"
click node_taskdetail "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/TaskDrawer.tsx"
click node_onboarding "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Onboarding.tsx"
click node_settings "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Settings.tsx"
click node_billing "https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Billing.tsx"
click node_payment "https://github.com/skyfalljoss/crm-vibecode/blob/main/src/pages/PaymentPage.tsx"
click node_schema "https://github.com/skyfalljoss/crm-vibecode/blob/main/supabase/schema.sql"

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_app,node_landing,node_authpage,node_authstate,node_supabaseclient,node_visitor toneBlue
class node_crm,node_supabase toneAmber
class node_dashboard,node_pipeline,node_leads,node_leadprofile,node_newlead,node_import,node_tasks,node_taskdetail toneMint
class node_onboarding,node_settings,node_billing,node_payment,node_schema toneRose
```

## Components

### Entry and identity

- [Routes and guards](https://github.com/skyfalljoss/crm-vibecode/blob/main/App.tsx): `App.tsx`
- [Landing page](https://github.com/skyfalljoss/crm-vibecode/blob/main/src/pages/LandingPage.tsx): `src/pages/LandingPage.tsx`
- [Sign-in / sign-up](https://github.com/skyfalljoss/crm-vibecode/blob/main/src/pages/AuthPage.tsx): `src/pages/AuthPage.tsx`
- [Session context](https://github.com/skyfalljoss/crm-vibecode/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Supabase client](https://github.com/skyfalljoss/crm-vibecode/blob/main/src/lib/supabase.ts): `src/lib/supabase.ts`

### Workspace shell

- [Workspace controller](https://github.com/skyfalljoss/crm-vibecode/blob/main/CRMApp.tsx): `CRMApp.tsx`

### Sales workflows

- [Analytics dashboard](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Dashboard.tsx): `components/Dashboard.tsx`
- [Deal pipeline](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Pipeline.tsx): `components/Pipeline.tsx`
- [Lead tracking](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/LeadsList.tsx): `components/LeadsList.tsx`
- [Lead details](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/LeadDrawer.tsx): `components/LeadDrawer.tsx`
- [Create lead](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/NewLeadModal.tsx): `components/NewLeadModal.tsx`
- [CSV import](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/ImportModal.tsx): `components/ImportModal.tsx`
- [Task management](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/TasksList.tsx): `components/TasksList.tsx`
- [Task details](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/TaskDrawer.tsx): `components/TaskDrawer.tsx`

### Team operations

- [Workspace onboarding](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Onboarding.tsx): `components/Onboarding.tsx`
- [Team settings](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Settings.tsx): `components/Settings.tsx`
- [Billing](https://github.com/skyfalljoss/crm-vibecode/blob/main/components/Billing.tsx): `components/Billing.tsx`
- [Checkout page](https://github.com/skyfalljoss/crm-vibecode/blob/main/src/pages/PaymentPage.tsx): `src/pages/PaymentPage.tsx`
- [CRM schema](https://github.com/skyfalljoss/crm-vibecode/blob/main/supabase/schema.sql): `supabase/schema.sql`

### Other components

- **Visitor / user**
- **Supabase services**

## Connections

- Visitor / user → Landing page: visits
- Visitor / user → Routes and guards: opens app
- Landing page → Routes and guards: starts signup
- Routes and guards → Session context: provides session
- Routes and guards → Landing page: routes to
- Routes and guards → Sign-in / sign-up: routes to
- Routes and guards → Workspace controller: guards dashboard
- Routes and guards → Checkout page: routes to
- Sign-in / sign-up → Supabase client: authenticates
- Session context → Supabase client: reads session
- Supabase client → Supabase services: connects
- Workspace controller → Supabase client: loads and mutates
- Workspace controller → Workspace onboarding: presents setup
- Workspace controller → Analytics dashboard: renders
- Workspace controller → Deal pipeline: renders
- Workspace controller → Lead tracking: renders
- Workspace controller → Task management: renders
- Workspace controller → Team settings: renders
- Workspace controller → Billing: renders
- Workspace controller → Create lead: opens
- Workspace controller → Lead details: opens
- Workspace controller → Task details: opens
- Lead tracking → CSV import: opens import
- CSV import → Workspace controller: submits mapped leads
- Deal pipeline → Workspace controller: requests stage move
- Billing → Checkout page: opens checkout
- CRM schema → Supabase services: defines tables