Build progress0 / 20 steps complete
Architecture & Data Flow
🧑💻 User Browser
tradingwithhak.com · HTTPS
L1 · DNS + EDGE
Cloudflare DNS
≡ Route 53 / Azure DNS
CDN / Edge Cache
200+ global PoPs
TLS / Auto-cert
≡ ACM / Azure Cert Mgr
WAF + DDoS
≡ AWS Shield / Azure DDoS
L2 · HOSTING
Cloudflare Pages
≡ S3 Static / Azure Blob
Next.js 14
App Router, force-static
GitHub Actions
≡ CodePipeline / DevOps
Blog + Team pages
Static pre-rendered
L3 · APP FEATURES
Study Guides
AWS CLF-C02 · AZ-900
Practice Exams
360 questions · 6 exams
Visitor Counter
Live from Supabase
Capstone Pages
Presentation · Security
L4 · BACKEND API
Next.js Edge Routes
≡ Lambda / Azure Fn
/api/cloud-prep/visit
POST increment, GET count
/api/b/journal
Journal CRUD
/api/pit/ai
Claude AI co-pilot
L5 · DATABASE
Supabase (PostgreSQL)
≡ DynamoDB / CosmosDB
page_visits table
visitor_count · journals
atomic_increment()
Stored procedure (RPC)
Row Level Security
Deny-by-default policies
L6 · CI/CD + IaC
GitHub → Actions
Push to main triggers build
CF Pages Deploy
cloudflare/pages-action@v1
Terraform IaC
AWS-equivalent in /docs/iac
Budget Alerts
Free-tier threshold emails
Step-by-Step Phases
PREREQUISITES — ~2 hours
Accounts & Tooling
≡ IAM / Access SetupGitHub accountCloudflare accountSupabase accountNode.js + pnpm installed
WEEK 1 — ~6 hours
Static Site + GitHub + Architecture
≡ S3 Static Website / Azure Blob + CDNNext.js app scaffoldedStudy guide pages builtCloudflare Pages connectedArchitecture diagram published
BASH — scaffold the project
pnpm create next-app@latest cloud-prep \ --typescript --tailwind --app --no-src-dir cd cloud-prep pnpm dev
BASH — add Cloudflare Pages adapter
pnpm add @cloudflare/next-on-pages
WEEK 2 — ~4 hours
Visitor Counter + DNS + HTTPS
≡ DynamoDB + Lambda / CosmosDB + FunctionsSupabase table + stored procEdge API route liveCustom domain configuredHTTPS / HSTS enforced
SQL — Supabase migration
create table visitor_count ( id bigint primary key default 1, count bigint not null default 0, updated_at timestamptz default now() ); insert into visitor_count (id, count) values (1, 0); create or replace function atomic_increment() returns bigint language plpgsql as $$ declare new_count bigint; begin update visitor_count set count = count + 1, updated_at = now() where id = 1 returning count into new_count; return new_count; end; $$;
TYPESCRIPT — app/api/visit/route.ts
// app/api/visit/route.ts export const runtime = 'edge' import { createClient } from '@supabase/supabase-js' export async function POST() { const sb = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_KEY! ) const { data } = await sb.rpc('atomic_increment') return Response.json({ count: data }) }
WEEK 3 — ~6 hours
Practice Exams + IaC Docs
≡ Lambda / Azure Functions — documented equivalent360 practice questionsExam engine with timerTerraform IaC templatePython Lambda equivalent
PYTHON — Lambda handler (AWS equivalent)
class="bg-kw">import json, boto3 dynamodb = boto3.resource('dynamodb') table = dynamodb.Table('VisitorCount') class="bg-kw">def handler(event, context): resp = table.update_item( Key={'id': 'main'}, UpdateExpression='ADD #c :inc', ExpressionAttributeNames={'#c': 'count'}, ExpressionAttributeValues={':inc': 1}, ReturnValues='UPDATED_NEW' ) class="bg-kw">return { 'statusCode': 200, 'body': json.dumps({ 'count': class="bg-kw">int(resp['Attributes']['count']) }) }
HCL — Terraform IaC (AWS equivalent)
resource "aws_s3_bucket" "site" { bucket = "cloud-prep-static-site" } resource "aws_dynamodb_table" "counter" { name = "VisitorCount" billing_mode = "PAY_PER_REQUEST" hash_key = "id" attribute { name = "id" type = "S" } } resource "aws_lambda_function" "counter" { filename = "lambda.zip" function_name = "visitor-counter" role = aws_iam_role.lambda.arn handler = "handler.handler" runtime = "python3.12" }
WEEK 4 — ~4 hours
CI/CD + Blog + Final Demo
≡ GitHub Actions / CodePipeline / Azure DevOpsCI/CD pipeline auto-deploys on pushBlog post publishedTeam page with GitHub profilesFinal live demo complete
YAML — .github/workflows/deploy.yml
name: Deploy on: push: branches: [main] jobs: deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: '18' } - run: pnpm install - run: pnpm tsc --noEmit - run: pnpm build - uses: cloudflare/pages-action@v1 with: apiToken: ${{ secrets.CF_API_TOKEN }} accountId: ${{ secrets.CF_ACCOUNT_ID }} projectName: cloud-prep directory: .next
School Mapping — Requirement ↔ What's Running
Hosting + CDN
S3 Static / Azure Blob + CDN
Cloudflare Pages
Global edge, HTTPS automatic, CI/CD on every push to main
Visitor counter + API
DynamoDB + Lambda / CosmosDB + Functions
Supabase RPC + Next.js edge route
Atomic increment stored proc; Lambda equivalent documented in /docs
DNS + HTTPS
Route 53 + ACM / Azure DNS
Cloudflare DNS + Auto-TLS
DNSSEC enabled, Universal SSL cert auto-renewed
CI/CD pipeline
GitHub Actions / CodePipeline / Azure DevOps
GitHub Actions + CF Pages action
typecheck → build → deploy on every push to main
Monitoring + logging
CloudWatch / Azure Monitor
Cloudflare Analytics + Supabase logs
Request logs, error rates, visitor metrics
IaC templates
CloudFormation / Bicep / Terraform
Terraform (AWS provider) in /docs/iac
S3 + Lambda + DynamoDB + API Gateway equivalent
Budget alerts
AWS Budgets / Azure Cost Management
Cloudflare + Supabase billing alerts
Email alerts at free-tier thresholds
Security groups / NSG
AWS Security Groups / Azure NSG
Cloudflare WAF rules
DDoS protection, bot fight mode enabled
Blog post + write-up
Blog / documentation
/cloud-prep/blog
MDX post covering architecture + build process
Team info + GitHub links
Team info page
/cloud-prep/team
Architecture table + GitHub profile links