One file: app.py
UI + logic + data access all together.
Fast to prototype, hard to scale.

Presentation • Application • Data
Same responsibilities, separated for
scale, security, and team collaboration.

def greet(name: str) -> str:
    return f"Hello, {name}!"

user = {"name": "Alice", "age": 25}
print(user["name"])

numbers = [1, 2, 3]
doubled = [n * 2 for n in numbers]

function greet(name: string): string {
  return `Hello, ${name}!`;
}
const user = { name: "Alice", age: 25 };
console.log(user.name);

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

import requests

response = requests.get(url)
data = response.json()

const res = await fetch(url);
const data = await res.json();

function greet(user) {
  return `Hello, ${user.name}`;
}

greet({ username: "Alice" });
// Returns "Hello, undefined"
// Silent bug at runtime

interface User {
  name: string;
  email: string;
}

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

greet({ username: "Alice" });
// ERROR at compile time!
// "Did you mean 'name'?"

const name = "Ada";   // default: cannot reassign
let count = 0;      // when reassignment is needed

Think Python: const ≈ a name that does not get rebound; let when you update the value.

// primitives
const n: number = 42;
const ok: boolean = true;
const label: string = "hi";

// array of strings
const tags: string[] = ["ui", "lab"];

type Status = "idle" | "loading" | "error";

function fmt(value: string | null): string {
  if (value === null) return "";
  // TS knows `value` is string here
  return value.toUpperCase();
}

interface — named object shape; common as export interface Props. Often extended.

type — alias for unions, primitives, tuples: type ID = string;

Every interaction → entire script re-runs from top to bottom.

Simple, but cannot build real-time interactive UIs.

Only the affected component re-renders when its state changes.

const [todos, setTodos] = useState([]);
// setTodos(newData) → re-renders
// ONLY this component

Runs on the server before the browser receives HTML.

• Fetch from Supabase safely
• Access server env vars
• Run database queries

Cannot: useState, useEffect, onClick

"use client"; // ← this line matters

Runs in the user's browser.

• Use useState, useEffect
• Respond to clicks, typing
• Call client-side APIs

Cannot: access server secrets safely

• Pull in third-party data (weather, maps, payments)
• Expose your backend to web, mobile, or partners
• Keep secrets on the server (API keys, LLM calls)
• Define service boundaries between systems

• Choose an HTTP method: GET read, POST create, PUT/PATCH update, DELETE remove
• Send auth in headers (e.g. Authorization: Bearer …) — not query strings for secrets
• Parse JSON; handle errors and timeouts (following slides)

Default to relational for durable state, relationships between entities, auth-linked rows, and shared access — aligned with the final project.

Use a connection URL and a client or SQL; evolve the schema with migrations. Next: Supabase = hosted Postgres + auth + RLS.

API_KEY = "sk-proj-abc123xyz789"
requests.get(url,
  params={"api_key": API_KEY})

api_key = os.environ["OPENAI_API_KEY"]
requests.get(url,
  headers={"Authorization":
    f"Bearer {api_key}"})

• Project scaffolding
• File structure creation
• Tailwind CSS styling
• Boilerplate API routes
• Type annotations
• Import statements
• Repetitive CRUD code

• Server vs. Client Component
• Which routes need auth
• Row Level Security design
• Error message content
• .env variable naming
• When to use Supabase vs. API Route
• Data model & schema design