Cloud Challenge CTF

5. Technology Stack & Implementation

5.1 Frontend Framework

Next.js 14.2.20 (Static Export Mode)

• React 18.2.0 for component-based UI architecture
• TypeScript 5 for type-safe game logic and state management
• Static site generation (output: 'export') for optimal performance and CDN compatibility
• Built-in routing, code splitting, and optimization
• Excellent developer experience with hot reloading, Fast Refresh, and detailed error messages

Styling & UI Components

• Tailwind CSS 3.4.1: Utility-first CSS framework for rapid styling
• Custom Cyberpunk Theme: Dark backgrounds, neon accents, terminal aesthetics
• Google Fonts: Orbitron (titles, headings), Fira Code (terminal/monospace text)
• Lucide React v0.464.0: Consistent icon library with tree-shaking support
• Custom CSS Effects:
  • Matrix-style background animation
  • CRT scanline effects
  • Glitch text animations
  • Particle effects
• Responsive Design: Mobile-first approach, works on desktop and mobile devices

Authentication Library

• @react-oauth/google v0.12.2: Official React library for Google OAuth 2.0
• Client ID: Stored in NEXT_PUBLIC_GOOGLE_CLIENT_ID environment variable
• Authorized Origins: http://localhost:3000, https://cloudchallenge.cirrusly-clever.com
• Token Management: Access tokens stored in localStorage, session managed by AuthContext

5.2 Backend Infrastructure

AWS API Gateway

• Type: REST API (not HTTP API) with Lambda proxy integration
• Region: us-east-1 (same as Lambda and DynamoDB)
• Base URL: https://ihmdf6c7t7.execute-api.us-east-1.amazonaws.com/prod
• CORS: Enabled for all origins (Access-Control-Allow-Origin: *)
• Authorization: NONE (no API keys, no IAM auth—validation in Lambda functions)
• Throttling: Default AWS limits (10,000 requests per second)
• Deployment Stage: prod (single stage for MVP)

AWS Lambda Functions (Python 3.9)

User Management:

1. awschallenge_base_user_function
   • Purpose: Create new user profiles
   • Trigger: POST /users
   • Logic: Validates email format, generates UUID, creates DynamoDB record
   • IAM Role: DynamoDB PutItem permission
2. awschallenge_checkusers
   • Purpose: Check if user exists by email
   • Trigger: GET /users/check?email=...
   • Logic: Query DynamoDB EmailIndex, return user data if found
   • IAM Role: DynamoDB Query permission

Challenge Validation:

6. awschallenge_hallucination_salt (Stage 2)
   • Purpose: Validate riddle answer with pattern matching
   • Trigger: POST /challenges/hallucination/salt
   • Logic: Pattern matching, attempt tracking, lockout mechanism
   • IAM Role: DynamoDB GetItem, UpdateItem permissions
7. awschallengehallucination_final_check (Stage 4)
   • Purpose: Validate final protocol name
   • Trigger: POST /challenges/hallucination/finalcheck
   • Logic: Pattern matching, prerequisite check, score calculation
   • IAM Role: DynamoDB GetItem, UpdateItem, Lambda Invoke permissions
8. awschallenges_stage_progression
   • Purpose: Update challenge progress for any stage
   • Trigger: POST /challenges/progression
   • Logic: Update challenge state, track completion and attempts
   • IAM Role: DynamoDB UpdateItem permission
9. getKMSDecrypt (Stage 3)
   • Purpose: Generate temporary AWS credentials for KMS decryption
   • Trigger: POST /challenges/hallucination/kmsdecrypt
   • Logic: AWS STS AssumeRole with scoped permissions
   • IAM Role: sts:AssumeRole permission

Lambda Configuration:

• Runtime: Python 3.9
• Memory: 128-512 MB (varies by function)
• Timeout: 30 seconds (sufficient for database operations)
• Environment Variables: DynamoDB table names, KMS key ARN, STS role ARN
• Deployment: ZIP file upload or SAM template

AWS DynamoDB

Table 1: awschallangeUsersTable

• Primary Key: userID (String, UUID v4)
• Global Secondary Index: EmailIndex
  • Partition Key: email (String)
  • Projection: ALL
• Billing: On-demand (pay-per-request)
• Attributes: userID, email, username, awsSkillLevel, securitySkillLevel, puzzleSkillLevel, currentScore, currentLevel, wrongAttempts, closeAttempts, lockedUntil, createdAt, updatedAt

Table 2: awsChallengeChallengesTable

• Primary Key: challengeStateId (String, UUID v4)
• Global Secondary Index: user-challenge-index
  • Partition Key: userId (String)
  • Sort Key: challengeId (String)
  • Projection: ALL
• Billing: On-demand (pay-per-request)
• Attributes: challengeStateId, userId, challengeId, currentStage, stageStatus (map), lastUpdated

AWS KMS/STS

• KMS Key: Custom key for challenge message encryption
• Key Policy: Allows decrypt operation for specific IAM role
• STS Role: KMSDecryptRole with scoped permissions
• Session Duration: 30 minutes (enforced by AWS)

5.3 Hosting Infrastructure

AWS S3 (Static Website Hosting)

• Bucket Name: ccchallange-prod
• Region: us-east-1
• Website Hosting: Enabled with index.html as default document
• Bucket Policy: Public read access for all objects
• Versioning: Disabled (not needed for MVP—can enable for rollback capability)
• Static Assets: HTML, JavaScript, CSS, images (PNG/SVG), fonts (WOFF2)

AWS CloudFront (CDN)

• Distribution ID: E3O8J8O00C9XL9
• Origin: S3 bucket (ccchallange-prod.s3-website-us-east-1.amazonaws.com)
• Custom Domain: cloudchallenge.cirrusly-clever.com
• SSL/TLS: AWS Certificate Manager (ACM) certificate for HTTPS
• Cache Behavior:
  • Default TTL: 86400 seconds (24 hours)
  • Min TTL: 0 seconds
  • Max TTL: 31536000 seconds (1 year)
• Compression: Gzip and Brotli enabled
• HTTP → HTTPS: Redirect enabled
• Cache Invalidation: Can invalidate /* for instant updates

5.4 Deployment Process

Frontend Deployment Workflow

# 1. Install dependencies
npm install

# 2. Build static files
npm run export
# → Runs: next build
# → Generates optimized files in out/ directory
# → Next.js performs: code splitting, tree shaking, minification, image optimization

# 3. Sync to S3 bucket
aws s3 sync out/ s3://ccchallange-prod --delete
# → Uploads new/changed files only
# → Deletes removed files (--delete flag ensures clean state)
# → Preserves file structure in bucket

# 4. Invalidate CloudFront cache (optional, for instant updates)
aws cloudfront create-invalidation \
  --distribution-id E3O8J8O00C9XL9 \
  --paths "/*"
# → Forces CloudFront to fetch new files from S3
# → Without this, cached files remain for up to 24 hours

# 5. Verify deployment
# Visit https://cloudchallenge.cirrusly-clever.com
# Check browser console for errors
# Test authentication and challenge flows

Performance Characteristics

Frontend Load Time:

• First Contentful Paint: <1 second (cached assets from nearest CloudFront edge location)
• Time to Interactive: <2 seconds (optimized bundle size, code splitting)
• Largest Contentful Paint: <2.5 seconds (images optimized, lazy loading)
• Cumulative Layout Shift: <0.1 (minimal layout shifts, reserved space for dynamic content)
• Global Latency: <100ms from CloudFront edge locations worldwide

Backend API Response Time:

• Lambda Cold Start: ~500ms (first request after >5 minutes of inactivity)
• Lambda Warm Start: ~50-100ms (subsequent requests with warm container)
• DynamoDB Query: ~10-50ms (single-item GetItem or Query operations)
• Total API Latency: ~100-600ms (depending on Lambda state, database operation complexity)

6. Design Decisions

Architecture Selection

The platform combines a static frontend with serverless backend to meet the specific needs of a CTF learning platform. Challenges require server-side validation to prevent cheating, while the UI benefits from static generation with no server-side rendering requirements. Both frontend and backend scale automatically without capacity planning, and infrastructure scales to zero during idle periods. Frontend and backend can be developed and deployed independently, accelerating iteration cycles. The static frontend eliminates server-side attack surface while Lambda functions provide isolated execution environments.

DynamoDB for State Management

DynamoDB serves as the primary data store, providing fully managed NoSQL storage with automatic scaling based on traffic. The service delivers single-digit millisecond response times for GetItem and Query operations, with pay-per-request pricing that eliminates idle costs. DynamoDB integrates natively with Lambda, API Gateway, and IAM through consistent SDK and console interfaces.

The data model leverages DynamoDB's strengths: flexible schema enables varying challenge progress structures without migrations through NoSQL map attributes. Access patterns are straightforward—lookup by email through EmailIndex and lookup by userID through primary key—fitting DynamoDB's key-value model naturally. The platform requires no complex joins or relational queries, and atomic updates for score, level, and attempts occur without read-modify-write race conditions.

7. Scalability & Performance

Automatic Scaling

Frontend Scaling:

• Next.js static files served via CloudFront CDN (450+ edge locations worldwide)
• CloudFront automatically scales to handle any traffic volume (no manual configuration)
• Global edge caching reduces origin load (S3 requests minimized)
• No capacity planning required (CloudFront handles unlimited concurrent requests)

Backend Scaling:

• Lambda functions automatically scale from zero to thousands of concurrent executions
• Default concurrency limit: 1,000 (can be increased via support ticket)
• Reserved concurrency can be set per function (e.g., 100 concurrent executions max)
• No capacity planning required (AWS manages scaling automatically)

Database Scaling:

• DynamoDB on-demand billing automatically adjusts to request volume
• No manual provisioning (scales read/write capacity up or down based on traffic)
• Handles thousands of requests per second (default account limits)
• Partition key design allows horizontal scaling (userID = good partition key)

Performance Optimization

Frontend Optimization:

• Code Splitting: Next.js automatically code-splits by route (login.js, dashboard.js, hallucination.js separate)
• Lazy Loading: Non-critical components lazy-loaded (modals, success animations)
• Image Optimization: PNG files compressed with TinyPNG (70% size reduction), SVG files minified
• Font Optimization: WOFF2 format (best compression), subset to Latin characters only
• Bundle Analysis: Can use @next/bundle-analyzer to identify large dependencies

Backend Optimization:

• Lambda Provisioned Concurrency: Can enable for frequently-used functions (eliminates cold starts, costs $0.015/GB-hour)
• DynamoDB Accelerator (DAX): Can add in-memory cache for read-heavy workloads (sub-millisecond response times, costs $0.16/hour)
• API Gateway Caching: Can enable for read-heavy endpoints (reduces Lambda invocations, costs $0.020/hour per GB cache)
• Connection Reuse: Lambda functions reuse DynamoDB connections across warm invocations (boto3 client outside handler)

Future Scalability Considerations

Phase 2 (Enhanced Features):

• Real-Time Updates: WebSocket API for live challenge updates, leaderboards (API Gateway WebSocket API)
• Analytics & Telemetry: Track player behavior, challenge completion rates (DynamoDB Streams → Lambda → CloudWatch)
• Multiplayer Features: Competitive play, team challenges (requires real-time sync)
• Advanced Challenges: More complex scenarios, multi-day challenges (requires background processing)
• Content Management: Admin panel for challenge creation, user management (requires additional CRUD APIs)

Migration Path:

• Architecture designed for incremental enhancement (no major rewrites required)
• New features can be added without affecting existing functionality (backwards compatibility)
• Can migrate to microservices architecture if needed (separate Lambda functions → separate services)