Skip to main content

Frontend Architecture

Overview​

The CROW platform frontend is built on Cloudflare's edge infrastructure with a split architecture approach that separates public-facing content from authenticated user workspaces. Both applications are deployed as Cloudflare Workers, ensuring global low-latency access and simplified operations.

Split Frontend Design​

The CROW platform utilizes a split frontend architecture with three separate applications:

  1. Landing Client - Public-facing marketing and product information
  2. Auth Client - Dedicated authentication and onboarding flows
  3. Dashboard Client - Authenticated user workspace with analytics and chat

Why Split Frontend?​

The frontend is intentionally split into three separate applications to:

  • Building Block Approach: Clients are modular and can be rearranged or deployed independently
  • Optimize Bundle Size: Each client only ships what it needs
  • Independent Deployment: Each application deploys separately via Cloudflare Workers
  • Future Flexibility: Easy to add new clients (e.g., mobile/desktop home page)
  • Better SEO: Different pages optimized separately
  • Tech Stack Freedom: Each client can use different technologies if needed
  • Clear Separation: Distinct boundaries between public, auth, and private areas

Application Purposes​

Landing Client​

  • Purpose: Marketing, product information, and public content
  • Features:
    • Product showcase
    • Pricing information
    • Company information
    • Documentation links
  • Optimization: Minimal JavaScript, fast load times, SEO-optimized
  • No Authentication: Purely public-facing content

Auth Client​

  • Purpose: User authentication and organization onboarding
  • Features:
    • User signup with organization creation
    • User login
    • Invited user flows
    • Session initialization
    • Organization setup and product onboarding
    • Payment flow integration
    • Component configuration (Web, Social, CCTV)
  • Session Management: Initializes sessions that are passed to dashboard client
  • Integration: Works with Better Auth for session-based authentication

Dashboard Client​

  • Purpose: Authenticated user workspace and platform management
  • Features:
    • Organization overview
    • Product catalog management
    • Chat interface for data queries (multi-agentic)
    • Insights and patterns visualization
    • Team management
    • Notifications
    • Billing and analytics
    • Settings (API Keys, Integrations, Profile, Product Management, Webhooks)
  • Optimization: Rich interactivity, real-time updates, comprehensive tooling

Deployment on Cloudflare Workers​

Both frontend applications are deployed on Cloudflare Workers, leveraging their global edge network.

Technology Stack​

TechnologyPurposeVersion
Next.jsReact framework with SSR/SSG15+
TypeScriptStatic type checking5.x
TailwindCSSUtility-first CSS framework4.x
shadcn/uiComponent library (Radix UI based)Latest
BunPackage manager and local dev tooling1.x
Cloudflare Workers/PagesEdge deploymentN/A
Cloudflare ImagesImage optimizationN/A

Note on Bun: While Bun includes its own JS runtime, CROW uses Bun specifically for package management. Cloudflare Workers run on the V8 JS engine, not JavaScriptCore.

Cloudflare Workers Advantages​

Global Edge Network

  • Content served from 300+ locations worldwide
  • Requests routed to the closest data center to users
  • Automatic geographic load balancing

Ultra-Low Latency

  • Response times under 50ms globally
  • No cold starts unlike traditional serverless
  • V8 isolates start in less than 5ms

DDoS Protection

  • Built-in protection against attacks
  • Automatic mitigation of malicious traffic
  • Enterprise-grade security at the edge

Auto-scaling

  • Handles traffic spikes automatically without configuration
  • No manual scaling required
  • Infinite scalability for static and dynamic content

Cost Efficiency

  • Pay-per-request pricing model
  • No charges for idle time
  • Predictable costs based on actual usage

Global Availability

  • 100% uptime SLA
  • Automatic failover
  • No single point of failure

Developer Experience

  • Simple deployment workflow
  • Built-in versioning and rollbacks
  • Instant preview deployments

Architecture Diagram​

Request Flow​

New User Signup Flow​

Dashboard Request Flow​

Performance Characteristics​

Landing Client​

  • First Contentful Paint: < 0.5s
  • Time to Interactive: < 1s
  • Lighthouse Score: 95+ (Performance, SEO, Accessibility)
  • Bundle Size: < 100KB (gzipped)

Auth Client​

  • First Contentful Paint: < 0.8s
  • Time to Interactive: < 1.5s
  • Lighthouse Score: 90+ (Performance, Accessibility)
  • Bundle Size: Optimized for signup flows

Dashboard Client​

  • First Contentful Paint: < 1s
  • Time to Interactive: < 2s
  • Lighthouse Score: 90+ (Performance, Accessibility)
  • Bundle Size: Optimized with code splitting

Security Considerations​

Landing Client Security​

  • Public Access: No authentication required
  • HTTPS Only: All traffic encrypted with TLS 1.3
  • CSP Headers: Content Security Policy to prevent XSS
  • Rate Limiting: Protection against abuse

Auth Client Security​

  • Session-Based Auth: Better Auth with Drizzle ORM
  • HTTPS Only: All traffic encrypted with TLS 1.3
  • CSRF Protection: Anti-CSRF tokens for state-changing operations
  • Secure Session Storage: Session tokens properly managed
  • Rate Limiting: Protection against brute force attacks

Dashboard Client Security​

  • Authentication Required: Session-based authentication with Better Auth
  • Authorization: Permission-based access control (see User Permission Levels)
  • HTTPS Only: All traffic encrypted
  • CSRF Protection: Anti-CSRF tokens for state-changing operations
  • Session Management: Secure session handling with automatic expiry
  • Organization Scoping: 1:1 user-organization data isolation

Deployment Strategy​

Continuous Deployment​

Both applications use continuous deployment:

  1. Code Push: Developer pushes code to repository
  2. CI/CD Pipeline: Automated build and test
  3. Preview Deployment: Temporary preview URL for testing
  4. Production Deployment: Deploy to Cloudflare Workers edge network
  5. Instant Propagation: Changes propagate globally in seconds

Rollback Strategy​

  • Instant Rollback: Previous versions kept for instant rollback
  • Gradual Rollout: Optional percentage-based traffic splitting
  • Automatic Rollback: Configured based on error rate thresholds