CF-TUTORIAL

HOW IT WORKS

24 CATEGORIES

// 24 categories, 95+ questions
const categories = [
  "Workers Fundamentals",     // V8 isolates, CPU limits, handlers
  "Execution Context",        // waitUntil, lifecycle
  "Workers KV",               // Eventually consistent storage
  "Durable Objects",          // Strong consistency, WebSockets
  "D1",                       // SQLite at the edge
  "R2",                       // S3-compatible object storage
  "Queues",                   // At-least-once delivery
  "Service Bindings",         // Worker-to-Worker RPC
  "Workflows",                // Durable execution
  "Agents SDK",               // AI agent framework
  "MCP",                      // Model Context Protocol
  "Browser Rendering",        // Headless Chrome
  "Containers",               // Run any runtime
  "AI Gateway",               // AI proxy & guardrails
  "Workers AI",               // Edge inference
  "Vectorize",                // Vector database
  "Hyperdrive",               // Database connection pooling
  "Pipelines",                // Event ingestion
  "Pages",                    // Static + functions
  "Wrangler",                 // CLI tooling
  "HTMLRewriter",             // Streaming HTML transforms
  "Smart Placement",          // Auto-optimization
  "System Design",            // Architecture patterns
  "Gotchas"                   // Common pitfalls
];

AI EVALUATION

Your answer goes to Llama 3.1 8B running on Workers AI. It's lenient—if you got the core concept, you pass.

// data.remote.ts - Server-side AI evaluation
import { flashcards } from '$lib/flashcards';

export async function evaluateAnswer(
  questionId: string,
  userAnswer: string,
  platform: App.Platform
): Promise<{ correct: boolean; feedback: string }> {
  const question = flashcards.find(f => f.id === questionId);
  if (!question) throw new Error('Question not found');
  
  const response = await platform.env.AI.run(
    '@cf/meta/llama-3.1-8b-instruct',
    {
      messages: [
        {
          role: 'system',
          content: `You are evaluating quiz answers about Cloudflare.
Compare the user's answer to the reference answer.
Be lenient - if they got the core concept right, mark correct.
Respond with JSON: { "correct": boolean, "feedback": "brief explanation" }`
        },
        {
          role: 'user',
          content: `Question: ${question.question}
Reference: ${question.answer}
User's answer: ${userAnswer}`
        }
      ]
    }
  );
  
  return JSON.parse(response.response);
}

export async function askFollowUp(
  questionId: string,
  followUp: string,
  platform: App.Platform
): Promise<string> {
  const question = flashcards.find(f => f.id === questionId);
  if (!question) throw new Error('Question not found');
  
  const response = await platform.env.AI.run(
    '@cf/meta/llama-3.1-8b-instruct',
    {
      messages: [
        {
          role: 'system',
          content: `You're a Cloudflare expert. The user just answered a quiz question and wants clarification. Be concise but thorough.`
        },
        {
          role: 'user',
          content: `Original question: ${question.question}
Reference answer: ${question.answer}
User's follow-up: ${followUp}`
        }
      ]
    }
  );
  
  return response.response;
}

SVELTE 5 STATE

Pure Svelte 5 runes. No external state library. Progress persists in localStorage.

// quiz-store.svelte.ts - Svelte 5 reactive state
import { flashcards, type Flashcard } from './flashcards';

class QuizStore {
  questions = $state<Flashcard[]>([]);
  currentIndex = $state(0);
  answers = $state<Map<string, UserAnswer>>(new Map());
  mode = $state<'full' | 'quick' | 'category'>('full');
  
  get current() {
    return this.questions[this.currentIndex];
  }
  
  get progress() {
    return this.answers.size / this.questions.length;
  }
  
  get categoryScores() {
    const scores = new Map<string, { correct: number; total: number }>();
    for (const [id, answer] of this.answers) {
      const q = flashcards.find(f => f.id === id);
      if (!q) continue;
      const cat = scores.get(q.category) ?? { correct: 0, total: 0 };
      cat.total++;
      if (answer.correct) cat.correct++;
      scores.set(q.category, cat);
    }
    return scores;
  }
  
  startQuiz(mode: 'full' | 'quick' | 'category', category?: string) {
    this.mode = mode;
    this.currentIndex = 0;
    this.answers.clear();
    
    if (mode === 'quick') {
      // Random 20 questions
      this.questions = shuffle(flashcards).slice(0, 20);
    } else if (mode === 'category' && category) {
      this.questions = flashcards.filter(f => f.category === category);
    } else {
      this.questions = [...flashcards];
    }
  }
}

export const quiz = new QuizStore();

SAMPLE QUESTIONS

ALCHEMY DEPLOYMENT

One file. Zero config. D1, Durable Objects, Workers AI—all wired up.

// alchemy.run.ts - Zero-config Cloudflare deployment
import alchemy from "alchemy";
import { D1Database, DurableObjectNamespace, Worker } from "alchemy/cloudflare";

const db = await D1Database("cf-tutorial-db", {
  migrationsPath: "./migrations"
});

const doNamespace = await DurableObjectNamespace("quiz-sessions");

await Worker("cf-tutorial", {
  name: "cf-tutorial",
  entrypoint: "./worker/index.ts",
  compatibilityDate: "2024-01-01",
  bindings: {
    DB: db,
    QUIZ_SESSIONS: doNamespace,
    AI: { type: "ai" }
  }
});

STACK

RESULTS BREAKDOWN

Category-by-category scores. See exactly where you're weak. The quiz tells you what to study.

┌─────────────────────────────────────┐
│         YOUR RESULTS                │
├─────────────────────────────────────┤
│ Workers Fundamentals    ████████ 8/8│
│ Durable Objects         ██████── 4/6│
│ Workflows               ████──── 4/8│
│ Gotchas                 ██────── 1/5│
├─────────────────────────────────────┤
│ STUDY: Gotchas, Workflows           │
└─────────────────────────────────────┘