BeatConnect

BeatConnect

Technical Data Room

Enter the 6-digit access code to continue

Confidential — NDA Required

Confidential

BeatConnect Technical Data Room

A no-code audio plugin builder enabling creators to design, build, and distribute professional VST3/AU plugins through a visual node-based editor. Plugins compile from C++ via JUCE and are delivered as signed, notarized installers for Windows and macOS.

React + WASM

Web Builder

JUCE C++

Plugin Runtime

VST3 / AU

Output Formats

Win + Mac

Cross-Platform

Architecture

System architecture, data flow, CI/CD pipelines, and access control. Click Expand for full-screen interactive view.

System Architecture

graph TB
  subgraph CLIENT["Client Layer"]
    direction LR
    WEB["Web App · React + Vite"]
    WASM["WASM Audio Engine · C++ / Emscripten"]
    FACE["Faceplate UI · React WebView"]
  end

  subgraph EDGE["Edge / CDN · Cloudflare"]
    direction LR
    CF_PAGES["Pages · Static Hosting"]
    CF_WORKER["Worker · Route Proxy"]
    CF_R2["R2 · Object Storage"]
  end

  subgraph BACKEND["Backend · Supabase"]
    direction LR
    SB_AUTH["Auth · ES256 JWT"]
    SB_DB["PostgreSQL · RLS"]
    SB_EDGE["Edge Functions · Deno"]
  end

  subgraph SERVICES["Third-Party"]
    direction LR
    STRIPE["Stripe"]
    SENDGRID["SendGrid"]
    POSTHOG["PostHog"]
    ANTHROPIC["Claude AI"]
  end

  subgraph BUILD["Build · GitHub Actions"]
    direction LR
    GH_ACTIONS["CI/CD Pipelines"]
    BUILD_WIN["Windows Runner"]
    BUILD_MAC["macOS Runner"]
  end

  CLIENT --> EDGE
  EDGE --> BACKEND
  BACKEND --> SERVICES
  GH_ACTIONS --> BUILD_WIN
  GH_ACTIONS --> BUILD_MAC
  BUILD_WIN --> CF_R2
  BUILD_MAC --> CF_R2

  style WEB fill:#3b82f6,color:#fff,stroke:#2563eb
  style WASM fill:#ef4444,color:#fff,stroke:#dc2626
  style FACE fill:#8b5cf6,color:#fff,stroke:#7c3aed
  style CF_PAGES fill:#f97316,color:#fff,stroke:#ea580c
  style CF_WORKER fill:#f97316,color:#fff,stroke:#ea580c
  style CF_R2 fill:#f97316,color:#fff,stroke:#ea580c
  style SB_AUTH fill:#22c55e,color:#fff,stroke:#16a34a
  style SB_DB fill:#22c55e,color:#fff,stroke:#16a34a
  style SB_EDGE fill:#22c55e,color:#fff,stroke:#16a34a
  style GH_ACTIONS fill:#3b82f6,color:#fff,stroke:#2563eb

Data Flow

graph LR
  USER["User designs in Node Editor"]
  WASM_E["WASM Engine processes graph"]
  ZUSTAND["Zustand Store"]
  REACT["React UI"]

  USER --> WASM_E --> ZUSTAND --> REACT
  REACT -->|user action| WASM_E

  SAVE["Save Project"]
  SB["Supabase DB"]
  GHA["GitHub Actions"]
  JUCE["JUCE C++ Build"]
  SIGN["Code Signing"]
  R2["Upload to R2"]
  DL["Download via Signed URL"]

  SAVE --> SB --> GHA --> JUCE --> SIGN --> R2 --> DL

  style USER fill:#3b82f6,color:#fff,stroke:#2563eb
  style WASM_E fill:#ef4444,color:#fff,stroke:#dc2626
  style SB fill:#22c55e,color:#fff,stroke:#16a34a
  style GHA fill:#3b82f6,color:#fff,stroke:#2563eb
  style R2 fill:#f97316,color:#fff,stroke:#ea580c

CI/CD Pipelines

graph TB
  DEV["develop branch"] -->|push| STAGING["Deploy Staging"]
  MAIN["main branch"] -->|push| PROD["Deploy Production"]

  PROD --> LINK["Link Supabase"]
  LINK --> MIGRATE["Push DB Migrations"]
  MIGRATE --> TEST["Run Deno Tests"]
  TEST --> SECRETS["Set Secrets"]
  SECRETS --> DEPLOY["Deploy Edge Functions"]
  DEPLOY --> HEALTH["Health Check · 3 retries"]

  ADMIN["Push admin/**"] --> WASM_BUILD["Build WASM"]
  WASM_BUILD --> NPM["Build React App"]
  NPM --> CF["Deploy to CF Pages"]

  DISPATCH["API Trigger"] --> FETCH["Fetch project_data"]
  FETCH --> CMAKE["CMake + JUCE Build"]
  CMAKE --> CODESIGN["Code Sign"]
  CODESIGN --> UPLOAD["Upload to R2"]
  UPLOAD --> NOTIFY["Notify Backend"]

  style DEV fill:#eab308,color:#000,stroke:#ca8a04
  style MAIN fill:#22c55e,color:#000,stroke:#16a34a
  style PROD fill:#22c55e,color:#000,stroke:#16a34a
  style STAGING fill:#eab308,color:#000,stroke:#ca8a04

RBAC & Row Level Security

graph TB
  SIGNUP["User Signup"] --> CONFIRM["Email Confirmation"]
  CONFIRM --> TRIGGER["DB Trigger"]
  TRIGGER --> PROFILE["profiles table"]

  PROFILE --> CHECK{"Creator whitelist?"}
  CHECK -->|Yes| ONBOARD["Creator Onboarding"]
  ONBOARD --> TNC["Accept T&C"]
  TNC --> STRIPE["Stripe Connect"]
  STRIPE --> CREATOR["creator_profiles"]

  PROFILE --> INVITE["Org Invite"]
  INVITE --> MEMBER["organization_members"]
  MEMBER --> ROLE["owner / admin / member"]

  CREATOR -->|publishes| PKG["packages"]
  PROFILE -->|owns| PROJECT["Project"]
  PROJECT --> OWNER_U["owner_user_id"]
  PROJECT --> OWNER_O["owner_org_id"]
  OWNER_U -.->|XOR| OWNER_O

  subgraph RLS["Row Level Security"]
    PRIVATE["private · owner only"]
    ORG_VIS["org · members only"]
    PUBLIC["public · world-readable"]
  end

  style PROFILE fill:#3b82f6,color:#fff,stroke:#2563eb
  style CREATOR fill:#22c55e,color:#fff,stroke:#16a34a
  style PRIVATE fill:#ef4444,color:#fff,stroke:#dc2626
  style ORG_VIS fill:#f59e0b,color:#fff,stroke:#d97706
  style PUBLIC fill:#22c55e,color:#fff,stroke:#16a34a

Tech Stack

Languages, frameworks, and dependencies.

Web Builder (admin/)

Core

  • React 18 — UI framework
  • Vite 5 — Build tool
  • TypeScript 5 — Language
  • Tailwind CSS 3 — Styling
  • Zustand 5 — State (WASM bridge)
  • React Router 6 — Routing

Key Libraries

  • @xyflow/react 12 — Node graph editor
  • Three.js — 3D visualizer rendering
  • Monaco Editor — Shader code editing
  • Radix UI — Component primitives
  • Recharts — Analytics charts
  • JSZip — Client-side packaging

Audio Engine (audio-engine/ + shared/)

WASM Build (Browser)

  • C++17 — Audio DSP code
  • Emscripten 3.1.51 — C++ to WASM
  • CMake + Ninja — Build system

Native Build (Plugins)

  • JUCE 8.0.12 — Plugin framework
  • CMake — Build system
  • MSVC / Clang — Compilers
  • NSIS / productbuild — Installers

Backend (supabase/)

Supabase Platform

  • PostgreSQL 17 — Primary database
  • Row Level Security — Per-row auth
  • Edge Functions (Deno) — ~43 serverless functions
  • Supabase Auth — ES256 JWT

Key Edge Functions

  • projects — CRUD for plugin designs
  • packages — Product distribution
  • builds / builds-callback — Plugin compilation
  • creator-portal / creator-stripe — Monetization
  • stripe-webhook — Payment processing

Infrastructure & Services

Hosting & CDN

  • Cloudflare Pages — Static hosting
  • Cloudflare Workers — Route proxy
  • Cloudflare R2 — Object storage (free egress)
  • GitHub Actions — CI/CD + self-hosted runners

Third-Party APIs

  • Stripe — Payments + Connect
  • SendGrid — Transactional email
  • PostHog — Product analytics
  • Sanity CMS — Content management
  • Anthropic Claude — AI features
  • Azure Trusted Signing — Windows code sign

IP Inventory

Intellectual property, domains, and proprietary technology.

Domains

beatconnect.com — Production
beatconnect.xyz — Staging
beatconnect.ca — Corporate

Proprietary Technology

Visual DSP Editor to Native Plugin Pipeline

Complete pipeline from browser-based visual DSP design to compiled, signed VST3/AU installers. WASM engine provides real-time audio preview using the same C++ DSP code that ships in the native plugin.

Shared C++ Audio Engine (WASM + Native)

Single C++ codebase compiles to both WebAssembly (browser preview) and native (JUCE plugin). Graph processing, DSP nodes, sequencer, and sample engine are shared across both targets.

Faceplate System

React-based plugin UI compiled to a single HTML file, embedded in native JUCE WebView. 14 GPU-accelerated visualizer types, custom widgets, Three.js rendering.

Automated Build & Distribution

Self-hosted GitHub Actions runners (Win + Mac) compile on-demand, code sign (Azure Trusted Signing + Apple notarization), deliver via Cloudflare R2 signed URLs.

Key Licenses

Tracktion Engine Perpetual commercial licence owned by BeatConnect
JUCE 8 Requires special end-user licence for "product that builds products" (see Limitations)
React / Vite / Zustand MIT
Supabase Apache 2.0 (client libs) / Hosted service
@xyflow/react MIT
Three.js / Emscripten MIT

Patents & Trademarks — update with any pending registrations or applications.

Infrastructure

Hosting, deployment, and costs.

Hosting

Service Provider Purpose Tier
Database + Auth + API Supabase PostgreSQL, Edge Functions, Auth Free → Pro ($25/mo)
Static Hosting Cloudflare Pages Admin app, marketing, landing Free
Object Storage Cloudflare R2 Plugin artifacts, signed URL downloads Free egress
Route Proxy Cloudflare Workers Domain routing Free (100k/day)
CI/CD GitHub Actions Deploy pipelines + plugin builds Free + Self-hosted
Build Runners Self-hosted Windows + macOS compilation Hardware only

Operating Costs

All services run on free tiers at low volume. At scale, the main cost is Supabase Pro ($25/mo).

Free Tier

  • Supabase — 500MB DB, 50k MAU
  • Cloudflare Pages — Unlimited bandwidth
  • Cloudflare R2 — 10GB, free egress
  • Workers — 100k requests/day
  • GitHub Actions — 2,000 min/mo

Growth (~$25-50/mo)

  • Supabase Pro — 8GB DB, 25k concurrent
  • R2 — $0.015/GB/mo storage only
  • SendGrid — Free up to 100 emails/day
  • PostHog — Free up to 1M events/mo
  • Stripe — 2.9% + $0.30 per tx

Deployment Process

1

Push to develop

Triggers staging deployment — DB migrations, edge functions, admin to staging CF Pages.

2

Merge to main

Production deploy — same pipeline with prod secrets, health checks (3 retries), AI release notes.

3

Plugin builds via repository_dispatch

Backend API triggers GitHub Actions on self-hosted runners. Parallel Win + Mac, code signed, uploaded to R2.

Secrets & Configuration

All secrets required to operate the platform. Names only.

GitHub Actions Secrets

Supabase

SUPABASE_ACCESS_TOKEN

SUPABASE_PROJECT_ID_STAGING

SUPABASE_PROJECT_ID_PRODUCTION

SUPABASE_DB_PASSWORD_STAGING

SUPABASE_DB_PASSWORD_PRODUCTION

STAGING_SUPABASE_URL

PROD_SUPABASE_URL

STAGING_SUPABASE_PUBLISHABLE_KEY

PROD_SUPABASE_PUBLISHABLE_KEY

Cloudflare

CLOUDFLARE_API_TOKEN

CLOUDFLARE_ACCOUNT_ID

Code Signing (Windows)

AZURE_TENANT_ID

AZURE_CLIENT_ID

AZURE_CLIENT_SECRET

AZURE_TRUSTED_SIGNING_ENDPOINT

AZURE_TRUSTED_SIGNING_ACCOUNT_NAME

AZURE_CERTIFICATE_PROFILE_NAME

Code Signing (macOS)

APPLE_CERTIFICATE_P12

APPLE_CERTIFICATE_PASSWORD

APPLE_NOTARIZATION_PASSWORD

Build System

BUILDS_WEBHOOK_SECRET

Supabase Edge Function Secrets

Storage (R2)

R2_ENDPOINT

R2_ACCESS_KEY_ID

R2_SECRET_ACCESS_KEY

R2_BUCKET_NAME

Payments

STRIPE_SECRET_KEY

STRIPE_WEBHOOK_SECRET

Email & Integrations

SENDGRID_API_KEY

SANITY_API_TOKEN

ANTHROPIC_API_KEY

Analytics

POSTHOG_PERSONAL_API_KEY

POSTHOG_API_KEY

Notifications

SLACK_BOT_TOKEN

SLACK_CHANNEL_CASH

SLACK_CHANNEL_STATS

Platform

FRONTEND_URL

DEPLOY_SECRET

CRON_SECRET

PLUGGY_INTERNAL_SECRET

GITHUB_ORG_WEBHOOK_SECRET

ENVIRONMENT

Supabase-Managed (Not in CI/CD)

GitHub Build Integration

GH_PAT

GH_OWNER

GH_REPO

BUILDS_WEBHOOK_SECRET

Downloads

DOWNLOAD_LINK_SECRET

DOWNLOAD_LINK_EXPIRY_DAYS

Frontend Environment Variables (Vite)

Client-Side Config

VITE_SUPABASE_URL

VITE_SUPABASE_PUBLISHABLE_KEY

VITE_STOREFRONT_URL

VITE_POSTHOG_KEY

VITE_POSTHOG_HOST

Limitations & Known Issues

Current limitations and areas for improvement.

LIMIT

FX plugins only

The plugin builder currently supports FX (audio effect) plugins only. Synth support could be added with relatively low effort. Samplers and drum machines would require more significant work.

ISSUE

Minor UI/UX bugs in the node editor

Some visualizer nodes do not update their colour correctly after parameter changes. Other small cosmetic issues exist across the editor.

LIMIT

Developer SDK incomplete

The developer SDK for extending the platform is not finished. It has only been tested locally in early development and is not production-ready.

LIMIT

JUCE end-user licence requirement

A special JUCE licence is needed for a "product that builds products" use case, which adds a 5% revenue share with JUCE. It is possible to remove JUCE entirely from the licensing stack, but this would take approximately 2 weeks of development work to finalize.

ISSUE

Supabase Edge Function gateway routing

After deployment, edge functions can return 404 for up to 30 seconds while the gateway routing stabilizes. Mitigated with 15s wait + 3-retry health check in CI/CD.

ISSUE

JWT verification bypass

Edge functions use --no-verify-jwt because Supabase Auth uses ES256 JWTs and the gateway only supports HS256. Auth is handled inside each function. Supabase platform limitation.

Demos & Media

Product screenshots and demo videos.

Screenshots

Drop screenshots into techsale/public/screenshots/

Demo Videos

Drop demo videos into techsale/public/videos/