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 two separate applications:

  1. Landing Application - Public-facing marketing, documentation, and authentication
  2. Dashboard Application - Authenticated user workspace with analytics and chat

Why Split Frontend?​

The frontend is intentionally split into two separate applications to:

  • Optimize Bundle Size: The landing page doesn't ship with heavy dashboard features
  • Independent Deployment: Each application can be deployed separately via Cloudflare Workers
  • Performance: Static site generation for landing, SPA for dashboard
  • Security: Separate authentication boundaries between public and private areas
  • Edge Deployment: Both apps run on Cloudflare's global edge network

Application Purposes​

Landing Page​

  • Purpose: Marketing, product information, and user acquisition
  • Features:
    • Product showcase
    • Pricing information
    • User signup/registration
    • Documentation links
  • Optimization: Minimal JavaScript, fast load times, SEO-optimized

Dashboard Application​

  • Purpose: Authenticated user workspace and platform management
  • Features:
    • Organization management
    • Product catalog
    • Chat interface for data queries
    • Analytics and reporting
    • Integration management
  • 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​

  • Framework: React/Next.js
  • Deployment Platform: Cloudflare Workers
  • Edge Runtime: V8 isolates for instant startup
  • Build Tool: Modern bundler optimized for edge deployment

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​

Landing Page Request Flow​

Dashboard Request Flow​

Performance Characteristics​

Landing Page​

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

Dashboard​

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

Security Considerations​

Landing Page 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

Dashboard Security​

  • Authentication Required: JWT-based session management
  • Authorization: Role-based access control (RBAC)
  • HTTPS Only: All traffic encrypted
  • CSRF Protection: Anti-CSRF tokens for state-changing operations
  • Session Management: Secure session handling with automatic expiry

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