Cloud Infrastructure

Edge Computing: 90%+ Cost Reduction + Enterprise Security

Challenge: Building a professional consulting website required balancing competing priorities: credible enterprise security posture (high security ratings), global performance (low latency worldwide), minimal ongoing costs, and modern developer experience. Traditional cloud hosting would cost $50-100/month while requiring significant security configuration effort.

← Back to Case Studies

Executive Summary

Architected and deployed a high-performance, secure consulting website on Cloudflare’s edge platform, achieving enterprise-grade security (96% score, up from 19%) and sub-100ms global latency at near-zero running costs. Demonstrates how edge computing + serverless delivers enterprise capabilities at consumer prices through understanding of distributed systems and stateless architecture patterns.

Key Results:

  • 19% → 96% security score (77 point improvement, F → A+ grade)
  • 97/100 Lighthouse performance with sub-100ms global latency
  • $5/month production costs (90%+ reduction vs. traditional)
  • Zero cold starts (<1ms vs. Lambda multi-second)

The Challenge

Requirements

Business Needs:

  • Professional consulting website for job search and client acquisition
  • Credible security posture (high security rating)
  • Global performance (low latency worldwide)
  • Contact form with abuse prevention
  • Transactional email capability

Technical Goals:

  • Demonstrate modern edge computing expertise
  • Near-zero running costs during unemployment
  • Production-quality security implementation
  • Portfolio evidence for interviews
  • Showcase current technical capabilities

Constraints:

  • Minimal budget (<$10/month)
  • Must handle traffic spikes gracefully
  • Need professional credibility (not amateur hour)
  • Can’t compromise on security for cost savings

The Approach

Edge-First Architecture

Philosophy:

  • Serverless from the start (no servers to manage)
  • Edge computing for global performance
  • Security by design (defense in depth)
  • Cost optimization through architecture (not sacrifice)

Platform Selection: Cloudflare

Rationale:

  • Global edge network (200+ locations)
  • Serverless edge functions (Workers)
  • Zero cold starts (V8 isolates, not containers)
  • Generous free tier + reasonable paid pricing
  • Integrated services (KV, D1, R2, Vectorize, Turnstile)

Alternative Considered:

  • AWS (Lambda + CloudFront): Higher costs, cold starts
  • Vercel: Good but optimized for Next.js, wanted flexibility
  • Traditional hosting: Operational overhead, fixed costs

Architecture Design

High-Level System

[Browser/User]
      ↓
[Cloudflare Edge] (200+ global locations)
      ↓
[Cloudflare Workers] (Backend API - Hono framework)
      ↓
[Cloudflare Pages] (Frontend - Astro + React)
      ↓
[External Services]
  - Resend API (email)
  - Analytics

Key Characteristics:

  • Stateless: No sessions, no server state
  • Edge-native: Code runs close to users globally
  • Serverless: Zero infrastructure management
  • Integrated: All services within Cloudflare ecosystem

Frontend: Cloudflare Pages + Astro

Technology Stack:

  • Framework: Astro (static site generation)
  • Components: React “islands” (selective hydration)
  • Styling: Tailwind CSS
  • Build Tool: Vite

Astro Benefits:

  • Zero-JavaScript HTML by default
  • Component hydration only where interactive
  • Excellent performance (minimal client-side JS)
  • SEO-friendly (server-rendered HTML)

Deployment:

  • Git-based CI/CD (automatic on push)
  • Preview deployments for branches
  • Instant rollback capability
  • Global CDN distribution

Backend: Cloudflare Workers + Hono

Technology Stack:

  • Runtime: Cloudflare Workers (V8 isolates)
  • Framework: Hono (lightweight Node.js framework)
  • Language: TypeScript
  • Services: KV (key-value), D1 (SQLite), Durable Objects

Workers Benefits:

  • Sub-millisecond cold starts (<1ms vs. Lambda seconds)
  • Runs on 200+ global locations automatically
  • Request handled at closest location to user
  • No infrastructure configuration needed

Hono Framework:

  • Express-like API (familiar patterns)
  • Lightweight (optimized for edge)
  • Excellent TypeScript support
  • Middleware ecosystem

Security Implementation

Defense in Depth

Security Layers:

  1. Cloudflare WAF (Web Application Firewall)
  2. Bot Detection (Turnstile - invisible CAPTCHA)
  3. Rate Limiting (Durable Objects for distributed state)
  4. CSRF Protection (Token-based verification)
  5. Security Headers (HSTS, CSP, X-Frame-Options, etc.)
  6. Input Validation (Server-side validation)

Layer 1: Cloudflare WAF

Managed Rulesets:

  • OWASP Top 10 protection
  • Known vulnerability blocking
  • SQL injection prevention
  • XSS attack mitigation
  • DDoS protection

Custom Rules:

  • Geographic restrictions (if needed)
  • IP reputation filtering
  • Request rate limits per endpoint
  • User-Agent filtering

Benefits:

  • Protection before request reaches application
  • No performance impact on legitimate traffic
  • Automatic updates for new threats
  • Zero configuration for basic protection

Layer 2: Bot Detection (Cloudflare Turnstile)

Implementation:

  • Invisible CAPTCHA (no user friction)
  • Challenge only on suspicious behavior
  • Integrated with contact form submission
  • Blocks bot form submissions

Turnstile Benefits:

  • Better UX than traditional CAPTCHA
  • Higher accuracy (Cloudflare’s traffic analysis)
  • Privacy-friendly (no tracking)
  • Free tier available

Layer 3: Rate Limiting with Durable Objects

Challenge: Workers are stateless (no session storage). How to implement rate limiting across globally distributed edge?

Solution: Durable Objects

  • Distributed state management
  • One object per IP address
  • Persistent counters
  • Automatic global consistency

Algorithm: Token Bucket

  • 5 requests per 15-minute window
  • Tokens refill over time
  • Exceed limit = 429 Too Many Requests
  • Graceful error messages

Implementation:

// Conceptual - actual code in Workers
class RateLimiter {
  async check(ip: string): Promise<boolean> {
    const tokens = await this.getTokens(ip);
    if (tokens > 0) {
      await this.consumeToken(ip);
      return true; // Allow request
    }
    return false; // Rate limited
  }
}

Global Consistency:

  • Same IP checked at edge closest to request
  • Durable Object ensures single source of truth
  • No race conditions across regions
  • Scales automatically

Layer 4: CSRF Protection

Implementation:

  • Token generation on form load
  • Token stored in hidden field
  • Server validates token on submission
  • Tokens expire after 1 hour

Protection Against:

  • Cross-site request forgery
  • Form replay attacks
  • Automated submissions

Layer 5: Security Headers

Implemented Headers:

HSTS (HTTP Strict Transport Security):

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

Forces HTTPS for all future requests.

CSP (Content Security Policy):

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';

Prevents XSS by restricting resource loading.

X-Frame-Options:

X-Frame-Options: DENY

Prevents clickjacking attacks.

X-Content-Type-Options:

X-Content-Type-Options: nosniff

Prevents MIME-type sniffing.

X-XSS-Protection:

X-XSS-Protection: 1; mode=block

Enables browser XSS filtering.

Referrer-Policy:

Referrer-Policy: strict-origin-when-cross-origin

Controls referrer information leakage.

Security Scoring

Before Optimization:

  • Mozilla Observatory: 19% (F grade)
  • Missing all security headers
  • No HTTPS enforcement
  • Vulnerable to basic attacks

After Implementation:

  • Mozilla Observatory: 96% (A+ grade)
  • 6/6 critical headers implemented
  • HTTPS enforced
  • Comprehensive protection

77-Point Improvement = Professional credibility

Performance Optimization

Global Edge Deployment

Latency Results:

  • Sub-100ms response times globally
  • Users connect to nearest Cloudflare location (200+ globally)
  • Static assets cached at edge
  • API calls processed at edge

Compared to Traditional:

  • Traditional hosting: 200-500ms (single region)
  • AWS Lambda: 150-300ms + cold starts
  • Edge deployment: <100ms worldwide, no cold starts

Zero Cold Starts

Cloudflare Workers Architecture:

  • V8 isolates (not containers)
  • Already running globally
  • <1ms startup time
  • No “warm-up” needed

Compared to AWS Lambda:

  • Lambda: 2-5 second cold starts
  • Lambda: Need provisioned concurrency ($$$)
  • Workers: Always warm, zero additional cost

Lighthouse Performance

Scores:

  • Performance: 97/100
  • Accessibility: 100/100
  • Best Practices: 100/100
  • SEO: 100/100

Optimization Techniques:

  • Critical CSS inline
  • Lazy loading for images
  • Minimal JavaScript (Astro islands)
  • Efficient asset delivery (CDN)
  • Optimized build process

Email Integration

Resend API

Functionality:

  • Contact form submissions → email to me
  • Professional HTML email templates
  • Delivery tracking and analytics
  • Bounce handling

Integration:

  • Triggered from Cloudflare Workers
  • Environment variables for API key
  • Error handling and retry logic
  • Rate limiting prevents abuse

Results:

  • 100% delivery rate
  • ~300ms average send time
  • Professional email formatting
  • Reliable notification system

Cost Analysis

Traditional Hosting Comparison

Traditional VPS/Dedicated:

  • Cost: $50-200/month
  • Server maintenance required
  • OS patches and updates
  • Security hardening manual
  • Single region (no global distribution)
  • Cold standby for failover (additional cost)

AWS Solution:

  • Cost: $30-100/month
  • Lambda + API Gateway + CloudFront
  • Cold starts (need provisioned concurrency)
  • CloudWatch logs (separate cost)
  • Data transfer fees
  • Complex configuration

Cloudflare Edge Solution

Actual Costs:

  • Cloudflare Pages: Free (generous limits)
  • Cloudflare Workers: Free tier covers usage
  • Custom Domain: $5/month (domain registration)
  • Resend Email: Free tier (up to 100 emails/day)
  • Total: ~$5/month

Included in Free Tier:

  • 100,000 Workers requests/day
  • Unlimited Pages builds
  • Global CDN
  • DDoS protection
  • SSL certificates
  • Basic analytics

90%+ Cost Reduction vs. traditional hosting.

Cost Scalability

At Scale (10K requests/day):

  • Still within Workers free tier
  • No cost increase
  • Automatic scaling
  • Same global performance

Traffic Spike Handling:

  • Automatic scaling (no configuration)
  • No cold starts
  • No performance degradation
  • No additional cost (within reasonable limits)

Results

Security Transformation

Metrics:

  • 19% → 96% security score (Mozilla Observatory)
  • F → A+ grade (77-point improvement)
  • 6/6 critical headers implemented
  • Bot traffic filtered before reaching application

Impact:

  • Professional credibility established
  • Portfolio evidence for security knowledge
  • Interview talking point (“96% security score”)

Performance Achievement

Metrics:

  • 97/100 Lighthouse performance
  • Sub-100ms global latency
  • Zero cold starts (<1ms startup)
  • Automatic scaling to traffic spikes

Impact:

  • Excellent user experience worldwide
  • Portfolio evidence for performance optimization
  • Demonstration of edge computing expertise

Cost Efficiency

Metrics:

  • $5/month production costs
  • 90%+ cost reduction vs. traditional
  • Zero operational overhead (no servers to maintain)
  • Automatic scaling (no over-provisioning)

Impact:

  • Sustainable during unemployment
  • Demonstrates cost-conscious architecture
  • Portfolio evidence for cloud cost optimization

Architectural Lessons

Edge Computing Trade-offs

Advantages:

  • Global low latency automatically
  • Zero cold starts
  • Automatic scaling
  • Minimal operational overhead
  • Cost efficiency at small/medium scale

Challenges:

  • Stateless architecture required (harder patterns)
  • Limited CPU time per request (Workers limit)
  • No file system access (must use object storage)
  • Different programming model (not all libraries work)

When to Use Edge:

  • Globally distributed user base
  • High performance requirements
  • Cost-sensitive applications
  • Stateless workloads (APIs, static sites)

When Not to Use Edge:

  • Long-running computations (Workers timeout)
  • Stateful applications (need traditional servers)
  • Legacy code (not edge-compatible)
  • High bandwidth (data transfer costs add up)

Distributed Systems Patterns

Stateless Architecture:

  • No sessions stored on server
  • Authentication via JWT tokens
  • Rate limiting via Durable Objects (distributed state)
  • All state external (KV, D1, or client-side)

Consistency Challenges:

  • Rate limiting needs global consistency
  • Durable Objects provide single source of truth
  • Understand CAP theorem trade-offs
  • Design for eventual consistency where acceptable

What This Demonstrates

For Cloud Architecture Roles:

  • Modern edge computing expertise
  • Serverless architecture design
  • Cost optimization through architecture
  • Global performance considerations

For Security Engineering Roles:

  • Defense-in-depth implementation
  • Comprehensive security header configuration
  • Bot detection and rate limiting
  • CSRF protection and input validation
  • 77-point security improvement delivered

For DevOps / SRE Roles:

  • CI/CD with git-based deployments
  • Zero-downtime deployments
  • Distributed systems patterns
  • Operational simplicity (zero server maintenance)

For Full-Stack Development Roles:

  • Modern frontend (Astro + React)
  • Backend API development (Hono)
  • TypeScript expertise
  • Production-quality security and performance

Technologies Used

Platform:

  • Cloudflare Pages (frontend hosting)
  • Cloudflare Workers (serverless backend)
  • Cloudflare Durable Objects (distributed state)
  • Cloudflare WAF + Turnstile (security)

Frontend:

  • Astro (static site generation)
  • React (component library)
  • Tailwind CSS (styling)
  • Vite (build tool)

Backend:

  • Hono (Node.js framework for Workers)
  • TypeScript (type safety)
  • Wrangler (deployment tool)

External Services:

  • Resend API (transactional email)
  • Custom domain (DNS)

Code & Live Demo

Live Site: stevenleve.com

Repository: [Available on request for technical evaluation]

Features to Explore:

  • Contact form (with rate limiting, try >5 submissions)
  • Security headers (check in browser dev tools)
  • Global performance (test from different locations)
  • Lighthouse audit (run in Chrome DevTools)

Contact

Interested in edge computing, serverless architecture, or cost-optimized cloud solutions? Let’s discuss how modern platforms deliver enterprise capabilities at a fraction of traditional costs.

Get in Touch: stevenleve.com/contact
LinkedIn: linkedin.com/in/steve-leve

← Back to Case Studies