From b054c87d1f167083c1bc526ba9dfdd074daf7c90 Mon Sep 17 00:00:00 2001
From: samanyugoyal2010 <samanyu.goyal2010@gmail.com>
Date: Sat, 5 Sep 2026 21:10:35 -0700
Subject: [PATCH 01/11] Add media library for social videos

---
 src/app/media/page.tsx                |  26 ++++++
 src/app/page.tsx                      |   2 +
 src/app/sitemap.ts                    |   1 +
 src/components/PageHero.tsx           |   6 +-
 src/components/SiteFooter.tsx         |   6 ++
 src/components/media/MediaCard.tsx    | 104 +++++++++++++++++++++
 src/components/media/MediaSection.tsx |  55 +++++++++++
 src/lib/links.ts                      |   2 +
 src/lib/media.ts                      | 128 ++++++++++++++++++++++++++
 9 files changed, 329 insertions(+), 1 deletion(-)
 create mode 100644 src/app/media/page.tsx
 create mode 100644 src/components/media/MediaCard.tsx
 create mode 100644 src/components/media/MediaSection.tsx
 create mode 100644 src/lib/media.ts

diff --git a/src/app/media/page.tsx b/src/app/media/page.tsx
new file mode 100644
index 0000000..2ad0e0f
--- /dev/null
+++ b/src/app/media/page.tsx
@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { MediaGrid } from "@/components/media/MediaCard";
+import { PageHero, PageSection } from "@/components/PageHero";
+import { PageShell } from "@/components/PageShell";
+import { getMediaItems } from "@/lib/media";
+
+export const metadata: Metadata = {
+  title: "Media",
+  description:
+    "Short lessons, student stories, and behind-the-scenes videos from CodeWithPurpose.",
+  alternates: { canonical: "/media/" },
+};
+
+export default function MediaPage() {
+  return (
+    <PageShell>
+      <PageHero
+        title="What we&apos;re making, in motion"
+        description="Short lessons, student stories, and the work happening behind free coding education. Watch on the site or follow the original post to join the conversation."
+      />
+      <PageSection>
+        <MediaGrid items={getMediaItems()} />
+      </PageSection>
+    </PageShell>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 92dc4aa..7a52c9b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,6 +8,7 @@ import { GlobalReachSection } from "@/components/GlobalReachSection";
 import { SecuritySection } from "@/components/SecuritySection";
 import { QuoteSection } from "@/components/QuoteSection";
 import { HowItWorksSection } from "@/components/HowItWorksSection";
+import { MediaSection } from "@/components/media/MediaSection";
 import { FaqSection } from "@/components/FaqSection";
 import { FinalCtaSection } from "@/components/FinalCtaSection";
 import { SiteFooter } from "@/components/SiteFooter";
@@ -40,6 +41,7 @@ export default function Home() {
         </div>
         <QuoteSection />
         <HowItWorksSection />
+        <MediaSection />
         <FaqSection />
         <FinalCtaSection />
       </main>
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
index 44e9b6a..7034243 100644
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -22,6 +22,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
     "/impact",
     "/contact",
     "/donate",
+    "/media",
     "/learn/ml",
     "/learn/vibecoding",
     "/learn/python",
diff --git a/src/components/PageHero.tsx b/src/components/PageHero.tsx
index ef65a23..0d20ca1 100644
--- a/src/components/PageHero.tsx
+++ b/src/components/PageHero.tsx
@@ -17,7 +17,11 @@ export function PageHero({
   return (
     <section className="relative overflow-hidden border-b-[0.5px] border-[var(--home-hairline)] bg-[var(--home-page)] pt-12 pb-14 md:pt-20 md:pb-24">
       <div aria-hidden="true" className="cwp-hero-bg absolute inset-0" />
-      <div className="relative mx-auto grid w-full max-w-[85rem] items-center gap-10 px-5 md:px-10 lg:grid-cols-2">
+      <div
+        className={`relative mx-auto grid w-full max-w-[85rem] items-center gap-10 px-5 md:px-10 ${
+          image ? "lg:grid-cols-2" : "lg:grid-cols-1"
+        }`}
+      >
         <Reveal>
           <h1 className="home-display text-[2rem] leading-[1.05] tracking-[-0.02em] md:text-[2.75rem] lg:text-[3.25rem]">
             {title}
diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx
index 531594e..27eb8bd 100644
--- a/src/components/SiteFooter.tsx
+++ b/src/components/SiteFooter.tsx
@@ -17,6 +17,7 @@ import {
   LEARN_ML_HREF,
   LEARN_PYTHON_HREF,
   LEARN_VIBECODING_HREF,
+  MEDIA_HREF,
   TOOLKIT_HREF,
   X_HREF,
 } from "@/lib/links";
@@ -106,6 +107,11 @@ export function SiteFooter() {
                         Learning Toolkit
                       </a>
                     </li>
+                    <li>
+                      <a href={MEDIA_HREF} className="home-footer-link">
+                        Media
+                      </a>
+                    </li>
                     <li>
                       <a href={ABOUT_HREF} className="home-footer-link">
                         Our Story
diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
new file mode 100644
index 0000000..1fae343
--- /dev/null
+++ b/src/components/media/MediaCard.tsx
@@ -0,0 +1,104 @@
+import { InstagramIcon } from "@/components/icons";
+import type { MediaItem } from "@/lib/media";
+import { getYouTubeEmbedUrl } from "@/lib/media";
+
+interface MediaCardProps {
+  item: MediaItem;
+}
+
+export function MediaCard({ item }: MediaCardProps) {
+  if (item.platform === "youtube") {
+    if (!item.videoId) {
+      throw new Error(`YouTube item ${item.id} is missing its videoId.`);
+    }
+
+    return (
+      <article className="home-card overflow-hidden rounded-[20px]">
+        <div className="aspect-video bg-[var(--home-grey-450)]">
+          <iframe
+            src={getYouTubeEmbedUrl(item.videoId)}
+            title={`${item.title} on YouTube`}
+            loading="lazy"
+            allow="encrypted-media; picture-in-picture"
+            allowFullScreen
+            className="h-full w-full border-0"
+          />
+        </div>
+        <div className="p-6 md:p-7">
+          <p className="text-[11px] uppercase tracking-[0.12em] text-[var(--home-ink-quiet)]">
+            YouTube
+          </p>
+          <h2 className="mt-2 text-xl leading-tight md:text-2xl">{item.title}</h2>
+          <p className="mt-3 text-[15px] leading-[1.55] text-[var(--home-ink-soft)]">
+            {item.description}
+          </p>
+        </div>
+      </article>
+    );
+  }
+
+  return (
+    <article className="home-card home-lift overflow-hidden rounded-[20px]">
+      <a
+        href={item.url}
+        target="_blank"
+        rel="noreferrer"
+        aria-label={`${item.title} — watch on Instagram`}
+        className="group block"
+      >
+        <div className="relative aspect-video overflow-hidden bg-[linear-gradient(135deg,#f4d7d2,#e1d7f3_52%,#d7eedb)]">
+          {item.thumbnail ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={item.thumbnail}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.025]"
+            />
+          ) : (
+            <div className="flex h-full flex-col items-center justify-center gap-3 text-[var(--home-moss)]">
+              <InstagramIcon className="h-12 w-12" />
+              <span className="text-sm font-medium">Watch on Instagram</span>
+            </div>
+          )}
+          <span className="absolute bottom-4 left-4 inline-flex items-center gap-2 rounded-full bg-[var(--home-ink)] px-3 py-1.5 text-xs font-medium text-white shadow-[var(--home-shadow-sm)]">
+            <InstagramIcon className="h-3.5 w-3.5" />
+            Instagram
+          </span>
+        </div>
+        <div className="p-6 md:p-7">
+          <h2 className="text-xl leading-tight md:text-2xl">{item.title}</h2>
+          <p className="mt-3 text-[15px] leading-[1.55] text-[var(--home-ink-soft)]">
+            {item.description}
+          </p>
+          <span className="home-arrow-link mt-5">
+            Watch on Instagram <span className="home-arrow">→</span>
+          </span>
+        </div>
+      </a>
+    </article>
+  );
+}
+
+export function MediaGrid({ items }: { items: readonly MediaItem[] }) {
+  if (items.length === 0) {
+    return (
+      <div className="home-card rounded-[20px] bg-[var(--home-grey-450)] p-8 text-center md:p-12">
+        <h2 className="home-serif text-[1.75rem] md:text-[2.25rem]">New videos are on the way</h2>
+        <p className="mx-auto mt-3 max-w-xl text-[15px] leading-[1.6] text-[var(--home-ink-soft)]">
+          We&apos;re collecting the lessons, workshops, and small moments that make
+          CodeWithPurpose what it is. Check back soon for the first set.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      {items.map((item) => (
+        <MediaCard key={item.id} item={item} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/media/MediaSection.tsx b/src/components/media/MediaSection.tsx
new file mode 100644
index 0000000..2274b2c
--- /dev/null
+++ b/src/components/media/MediaSection.tsx
@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { InstagramIcon } from "@/components/icons";
+import { MediaGrid } from "@/components/media/MediaCard";
+import { getFeaturedMedia } from "@/lib/media";
+import { INSTAGRAM_HREF, MEDIA_HREF } from "@/lib/links";
+
+export function MediaSection() {
+  const featured = getFeaturedMedia();
+
+  return (
+    <section id="media" className="scroll-mt-24">
+      <div className="mx-auto w-full max-w-[85rem] px-5 md:px-10">
+        <div className="flex flex-col gap-4 border-b-[0.5px] border-[var(--home-hairline)] pb-6 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h2 className="home-serif text-[1.75rem] md:text-[2.25rem]">See what we&apos;re making</h2>
+            <p className="mt-3 max-w-2xl text-[var(--home-ink-soft)]">
+              Short lessons, student stories, and the work happening behind free
+              education.
+            </p>
+          </div>
+          <Link href={MEDIA_HREF} className="home-arrow-link shrink-0 self-start sm:self-auto">
+            View all videos <span className="home-arrow">→</span>
+          </Link>
+        </div>
+
+        <div className="mt-8">
+          {featured.length > 0 ? (
+            <MediaGrid items={featured} />
+          ) : (
+            <div className="home-card rounded-[20px] bg-[var(--home-grey-450)] p-7 md:p-9">
+              <div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <h3 className="home-serif text-[1.5rem] md:text-[1.9rem]">New videos are on the way</h3>
+                  <p className="mt-2 max-w-xl text-[15px] leading-[1.6] text-[var(--home-ink-soft)]">
+                    Follow along while we bring our lessons and workshops to the
+                    screen.
+                  </p>
+                </div>
+                <a
+                  href={INSTAGRAM_HREF}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="home-btn home-btn-outline shrink-0"
+                >
+                  <InstagramIcon className="h-4 w-4" />
+                  Follow on Instagram
+                </a>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/lib/links.ts b/src/lib/links.ts
index 27cbecd..d438dfd 100644
--- a/src/lib/links.ts
+++ b/src/lib/links.ts
@@ -22,6 +22,7 @@ export const DASHBOARD_HREF = "/dashboard";
 export const LOGIN_HREF = "/login";
 export const SIGN_UP_HREF = "/sign-up";
 export const LEADERBOARD_HREF = "/leaderboard";
+export const MEDIA_HREF = "/media";
 export const ABOUT_HREF = "/about";
 export const JOIN_HREF = "/join";
 /**
@@ -116,6 +117,7 @@ export const SUBSTACK_EMBED_SRC = "https://codewithpurpose.substack.com/embed";
 
 export const NAV_LINKS = [
   { label: "Courses", href: COURSES_HREF },
+  { label: "Media", href: MEDIA_HREF },
   { label: "About Us", href: ABOUT_HREF },
   { label: "Join Us", href: JOIN_HREF },
   { label: "Stories", href: IMPACT_HREF },
diff --git a/src/lib/media.ts b/src/lib/media.ts
new file mode 100644
index 0000000..e9f2a94
--- /dev/null
+++ b/src/lib/media.ts
@@ -0,0 +1,128 @@
+/**
+ * Repository-owned media entries for the public video library.
+ *
+ * YouTube is embedded directly with its privacy-enhanced host. Instagram is
+ * represented as a lightweight card that links to the original Reel or post;
+ * Instagram's embed script is intentionally not loaded on every page.
+ */
+
+export type MediaPlatform = "youtube" | "instagram";
+
+export interface MediaItem {
+  id: string;
+  platform: MediaPlatform;
+  title: string;
+  description: string;
+  url: string;
+  /** Required for YouTube entries; omitted for Instagram entries. */
+  videoId?: string;
+  /** A local path under /public, used for Instagram preview cards. */
+  thumbnail?: string;
+  featured: boolean;
+}
+
+/** Add published video entries here. Keep this list empty until real URLs exist. */
+export const MEDIA_ITEMS: readonly MediaItem[] = [];
+
+const YOUTUBE_ID = /^[A-Za-z0-9_-]{11}$/;
+
+function isYouTubeUrl(value: string, videoId: string): boolean {
+  try {
+    const url = new URL(value);
+    if (
+      url.protocol === "https:" &&
+      (url.hostname === "youtube.com" ||
+        url.hostname === "www.youtube.com" ||
+        url.hostname === "m.youtube.com" ||
+        url.hostname === "youtu.be")
+    ) {
+      const candidate =
+        url.hostname === "youtu.be"
+          ? url.pathname.slice(1)
+          : url.searchParams.get("v") ?? url.pathname.split("/").filter(Boolean).at(-1);
+      return candidate === videoId;
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+function isInstagramUrl(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return (
+      url.protocol === "https:" &&
+      (url.hostname === "instagram.com" || url.hostname === "www.instagram.com") &&
+      /^\/(reel|p|tv)\/[A-Za-z0-9_-]+\/?$/.test(url.pathname)
+    );
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Fails loudly during development/build instead of rendering a broken card.
+ * An empty list is valid while the team is collecting the first URLs; once
+ * entries exist, the homepage must have exactly three featured items.
+ */
+export function validateMediaItems(items: readonly MediaItem[]): void {
+  const ids = new Set<string>();
+  const featured = items.filter((item) => item.featured);
+
+  if (featured.length !== 0 && featured.length !== 3) {
+    throw new Error(
+      `Media library must have either zero or three featured items; found ${featured.length}.`,
+    );
+  }
+
+  for (const item of items) {
+    if (ids.has(item.id)) {
+      throw new Error(`Media item ids must be unique; duplicate id: ${item.id}.`);
+    }
+    ids.add(item.id);
+
+    if (!item.title.trim()) {
+      throw new Error(`Media item ${item.id} needs a title.`);
+    }
+    if (!item.description.trim()) {
+      throw new Error(`Media item ${item.id} needs a description.`);
+    }
+    if (item.thumbnail && !item.thumbnail.startsWith("/")) {
+      throw new Error(`Media item ${item.id} must use a local thumbnail path.`);
+    }
+
+    if (item.platform === "youtube") {
+      if (!item.videoId || !YOUTUBE_ID.test(item.videoId)) {
+        throw new Error(`YouTube item ${item.id} needs an 11-character videoId.`);
+      }
+      if (!isYouTubeUrl(item.url, item.videoId)) {
+        throw new Error(`YouTube item ${item.id} needs a valid HTTPS YouTube URL.`);
+      }
+    } else {
+      if (item.videoId) {
+        throw new Error(`Instagram item ${item.id} must not define a videoId.`);
+      }
+      if (!isInstagramUrl(item.url)) {
+        throw new Error(`Instagram item ${item.id} needs a valid Reel, post, or TV URL.`);
+      }
+    }
+  }
+}
+
+validateMediaItems(MEDIA_ITEMS);
+
+export function getMediaItems(): readonly MediaItem[] {
+  return MEDIA_ITEMS;
+}
+
+export function getFeaturedMedia(): readonly MediaItem[] {
+  return MEDIA_ITEMS.filter((item) => item.featured);
+}
+
+export function getYouTubeEmbedUrl(videoId: string): string {
+  if (!YOUTUBE_ID.test(videoId)) {
+    throw new Error(`Invalid YouTube videoId: ${videoId}.`);
+  }
+  return `https://www.youtube-nocookie.com/embed/${videoId}`;
+}

From 52bcbd92c2dbfab3d59fef9ec764538365951a81 Mon Sep 17 00:00:00 2001
From: samanyugoyal2010 <samanyu.goyal2010@gmail.com>
Date: Sat, 5 Sep 2026 22:49:58 -0700
Subject: [PATCH 02/11] Sync generated chapter SQL

---
 supabase/chapters.sql | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/supabase/chapters.sql b/supabase/chapters.sql
index 09896fa..1997dca 100644
--- a/supabase/chapters.sql
+++ b/supabase/chapters.sql
@@ -10,7 +10,7 @@
 -- `progress` rows for it in place (they are already written) but stops new
 -- ones being accepted.
 --
--- 189 published chapters across 8 tracks.
+-- 211 published chapters across 9 tracks.
 
 begin;
 
@@ -215,6 +215,28 @@ insert into public.chapters (course_id, chapter_slug) values
   ('html-css', 'styling-the-page'),
   ('html-css', 'accessibility-basics'),
   ('html-css', 'devtools'),
-  ('html-css', 'publishing-your-site');
+  ('html-css', 'publishing-your-site'),
+  ('computer-vision', 'what-is-computer-vision'),
+  ('computer-vision', 'images-as-numbers'),
+  ('computer-vision', 'colour-and-channels'),
+  ('computer-vision', 'convolution'),
+  ('computer-vision', 'edge-detection'),
+  ('computer-vision', 'feature-detectors'),
+  ('computer-vision', 'image-preprocessing'),
+  ('computer-vision', 'image-classification'),
+  ('computer-vision', 'pixels-to-predictions'),
+  ('computer-vision', 'convolutional-neural-networks'),
+  ('computer-vision', 'transfer-learning'),
+  ('computer-vision', 'object-detection'),
+  ('computer-vision', 'bounding-boxes-and-iou'),
+  ('computer-vision', 'non-max-suppression'),
+  ('computer-vision', 'image-segmentation'),
+  ('computer-vision', 'confusion-matrix-for-vision'),
+  ('computer-vision', 'mean-average-precision'),
+  ('computer-vision', 'dataset-bias'),
+  ('computer-vision', 'overfitting-in-vision'),
+  ('computer-vision', 'face-detection-and-privacy'),
+  ('computer-vision', 'vision-in-self-driving-cars'),
+  ('computer-vision', 'from-prototype-to-production');
 
 commit;

From c0cb93d9a2bd3f0db310fa91cb1ed3976f9ba894 Mon Sep 17 00:00:00 2001
From: samanyugoyal2010 <samanyu.goyal2010@gmail.com>
Date: Sat, 5 Sep 2026 22:49:58 -0700
Subject: [PATCH 03/11] Add media library filters

---
 src/app/media/page.tsx                |   4 +-
 src/components/media/MediaCard.tsx    |  15 +++-
 src/components/media/MediaLibrary.tsx | 122 ++++++++++++++++++++++++++
 3 files changed, 135 insertions(+), 6 deletions(-)
 create mode 100644 src/components/media/MediaLibrary.tsx

diff --git a/src/app/media/page.tsx b/src/app/media/page.tsx
index 2ad0e0f..c5ef22f 100644
--- a/src/app/media/page.tsx
+++ b/src/app/media/page.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { MediaGrid } from "@/components/media/MediaCard";
+import { MediaLibrary } from "@/components/media/MediaLibrary";
 import { PageHero, PageSection } from "@/components/PageHero";
 import { PageShell } from "@/components/PageShell";
 import { getMediaItems } from "@/lib/media";
@@ -19,7 +19,7 @@ export default function MediaPage() {
         description="Short lessons, student stories, and the work happening behind free coding education. Watch on the site or follow the original post to join the conversation."
       />
       <PageSection>
-        <MediaGrid items={getMediaItems()} />
+        <MediaLibrary items={getMediaItems()} />
       </PageSection>
     </PageShell>
   );
diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index 1fae343..1977e04 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -81,14 +81,21 @@ export function MediaCard({ item }: MediaCardProps) {
   );
 }
 
-export function MediaGrid({ items }: { items: readonly MediaItem[] }) {
+export function MediaGrid({
+  items,
+  emptyTitle = "New videos are on the way",
+  emptyDescription = "We're collecting the lessons, workshops, and small moments that make CodeWithPurpose what it is. Check back soon for the first set.",
+}: {
+  items: readonly MediaItem[];
+  emptyTitle?: string;
+  emptyDescription?: string;
+}) {
   if (items.length === 0) {
     return (
       <div className="home-card rounded-[20px] bg-[var(--home-grey-450)] p-8 text-center md:p-12">
-        <h2 className="home-serif text-[1.75rem] md:text-[2.25rem]">New videos are on the way</h2>
+        <h2 className="home-serif text-[1.75rem] md:text-[2.25rem]">{emptyTitle}</h2>
         <p className="mx-auto mt-3 max-w-xl text-[15px] leading-[1.6] text-[var(--home-ink-soft)]">
-          We&apos;re collecting the lessons, workshops, and small moments that make
-          CodeWithPurpose what it is. Check back soon for the first set.
+          {emptyDescription}
         </p>
       </div>
     );
diff --git a/src/components/media/MediaLibrary.tsx b/src/components/media/MediaLibrary.tsx
new file mode 100644
index 0000000..1c385ac
--- /dev/null
+++ b/src/components/media/MediaLibrary.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { MediaGrid } from "@/components/media/MediaCard";
+import type { MediaItem, MediaPlatform } from "@/lib/media";
+
+type MediaFilter = "all" | MediaPlatform;
+
+const FILTERS: readonly { label: string; value: MediaFilter }[] = [
+  { label: "All videos", value: "all" },
+  { label: "YouTube", value: "youtube" },
+  { label: "Instagram", value: "instagram" },
+];
+
+function matchesSearch(item: MediaItem, search: string): boolean {
+  if (!search.trim()) return true;
+
+  const query = search.trim().toLowerCase();
+  return `${item.title} ${item.description}`.toLowerCase().includes(query);
+}
+
+export function MediaLibrary({ items }: { items: readonly MediaItem[] }) {
+  const [filter, setFilter] = useState<MediaFilter>("all");
+  const [search, setSearch] = useState("");
+
+  const filteredItems = useMemo(
+    () =>
+      items.filter(
+        (item) =>
+          (filter === "all" || item.platform === filter) &&
+          matchesSearch(item, search),
+      ),
+    [filter, items, search],
+  );
+
+  const hasActiveFilters = filter !== "all" || search.trim().length > 0;
+  const resultLabel = filteredItems.length === 1 ? "video" : "videos";
+
+  return (
+    <div>
+      <div className="home-card rounded-[20px] p-5 md:p-6">
+        <div className="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <p className="text-sm text-[var(--home-ink-soft)]">
+              Browse the library by platform or search the collection.
+            </p>
+            <div
+              aria-label="Filter media by platform"
+              className="mt-4 flex flex-wrap gap-2"
+              role="group"
+            >
+              {FILTERS.map((option) => {
+                const isActive = filter === option.value;
+
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    aria-pressed={isActive}
+                    className={`home-btn ${
+                      isActive ? "home-btn-fill" : "home-btn-outline"
+                    }`}
+                    onClick={() => setFilter(option.value)}
+                  >
+                    {option.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="w-full lg:max-w-xs">
+            <label
+              htmlFor="media-search"
+              className="text-sm font-medium text-[var(--home-ink)]"
+            >
+              Search videos
+            </label>
+            <input
+              id="media-search"
+              type="search"
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder="Try “students”"
+              className="mt-2 min-h-11 w-full rounded-lg border border-[var(--home-hairline-strong)] bg-[var(--home-page)] px-3.5 text-[15px] text-[var(--home-ink)] outline-none transition-shadow placeholder:text-[var(--home-ink-quiet)] focus-visible:ring-2 focus-visible:ring-[var(--home-fern)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--home-white)]"
+            />
+          </div>
+        </div>
+
+        <div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-[var(--home-hairline)] pt-4 text-sm text-[var(--home-ink-soft)]">
+          <p aria-live="polite">
+            Showing {filteredItems.length} {resultLabel}
+          </p>
+          {hasActiveFilters && (
+            <button
+              type="button"
+              className="home-arrow-link text-sm"
+              onClick={() => {
+                setFilter("all");
+                setSearch("");
+              }}
+            >
+              Clear filters
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <MediaGrid
+          items={filteredItems}
+          emptyTitle={items.length === 0 ? undefined : "No videos match those filters"}
+          emptyDescription={
+            items.length === 0
+              ? undefined
+              : "Try a different platform or search term, or clear the filters to see the full library."
+          }
+        />
+      </div>
+    </div>
+  );
+}

From 4c7d9eed41dc688e77472645939bb6a02263fa7d Mon Sep 17 00:00:00 2001
From: 735meis <meisgod735@gmail.com>
Date: Sun, 6 Sep 2026 01:05:00 -0700
Subject: [PATCH 04/11] media: add YouTube Data API client for channel uploads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Server-only fetch layer that resolves a channel's uploads playlist (by
handle or ID) and pulls its recent videos, cached with hourly ISR
revalidation. Fails soft everywhere — no key, no channel, a bad
response, or a network error all just return an empty list rather than
throwing, so a YouTube outage can't take down the site.
---
 src/lib/youtube.ts | 133 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 133 insertions(+)
 create mode 100644 src/lib/youtube.ts

diff --git a/src/lib/youtube.ts b/src/lib/youtube.ts
new file mode 100644
index 0000000..91db66a
--- /dev/null
+++ b/src/lib/youtube.ts
@@ -0,0 +1,133 @@
+import type { MediaItem } from "@/lib/media";
+
+/**
+ * Pulls the channel's recent uploads from the YouTube Data API so the media
+ * library stays current on its own — post a new video and it shows up here
+ * on the next revalidation, no code change or redeploy required.
+ *
+ * YouTube is optional, in the same way Resend and Supabase are: without a key
+ * (or channel) the library just falls back to whatever is in MEDIA_ITEMS,
+ * rather than the build failing or the page throwing for every visitor.
+ *
+ * Server-only. YOUTUBE_API_KEY has no NEXT_PUBLIC_ prefix precisely so it can
+ * never be bundled into the browser — importing this from a client component
+ * is a build error, which is the behaviour we want.
+ */
+const API_KEY = process.env.YOUTUBE_API_KEY;
+const CHANNEL_ID = process.env.YOUTUBE_CHANNEL_ID;
+const CHANNEL_HANDLE = process.env.YOUTUBE_CHANNEL_HANDLE;
+
+export const isYouTubeConfigured = Boolean(API_KEY && (CHANNEL_ID || CHANNEL_HANDLE));
+
+const API_BASE = "https://www.googleapis.com/youtube/v3";
+
+/**
+ * How long an upload list is served from cache before Next.js refetches in
+ * the background. An hour keeps this well under the free 10,000-unit daily
+ * quota (channels.list + playlistItems.list cost 1 unit each, so this is at
+ * most ~48 units/day) while still feeling "automatic" to whoever posts.
+ */
+const REVALIDATE_SECONDS = 60 * 60;
+const MAX_RESULTS = 12;
+const UPLOADS_TAG = "youtube-uploads";
+
+const YOUTUBE_ID = /^[A-Za-z0-9_-]{11}$/;
+
+interface ChannelsResponse {
+  items?: Array<{
+    contentDetails?: { relatedPlaylists?: { uploads?: string } };
+  }>;
+}
+
+interface PlaylistItemsResponse {
+  items?: Array<{
+    snippet?: {
+      title?: string;
+      description?: string;
+      publishedAt?: string;
+      resourceId?: { videoId?: string };
+    };
+  }>;
+}
+
+async function youtubeGet<T>(
+  path: string,
+  params: Record<string, string>,
+): Promise<T | null> {
+  if (!API_KEY) return null;
+
+  const url = new URL(`${API_BASE}${path}`);
+  for (const [key, value] of Object.entries(params)) url.searchParams.set(key, value);
+  url.searchParams.set("key", API_KEY);
+
+  try {
+    const response = await fetch(url, {
+      next: { revalidate: REVALIDATE_SECONDS, tags: [UPLOADS_TAG] },
+    });
+
+    if (!response.ok) {
+      console.warn(
+        `[media] YouTube API request to ${path} failed with ${response.status}: ${await response.text()}`,
+      );
+      return null;
+    }
+
+    return (await response.json()) as T;
+  } catch (error) {
+    console.warn(`[media] YouTube API request to ${path} threw`, error);
+    return null;
+  }
+}
+
+async function getUploadsPlaylistId(): Promise<string | null> {
+  if (!CHANNEL_ID && !CHANNEL_HANDLE) return null;
+
+  const data = await youtubeGet<ChannelsResponse>("/channels", {
+    part: "contentDetails",
+    ...(CHANNEL_ID
+      ? { id: CHANNEL_ID }
+      : { forHandle: (CHANNEL_HANDLE as string).replace(/^@/, "") }),
+  });
+
+  return data?.items?.[0]?.contentDetails?.relatedPlaylists?.uploads ?? null;
+}
+
+function toMediaItem(
+  item: NonNullable<PlaylistItemsResponse["items"]>[number],
+): MediaItem | null {
+  const videoId = item.snippet?.resourceId?.videoId;
+  const title = item.snippet?.title?.trim();
+
+  // Skip anything malformed rather than throwing — one bad entry from the
+  // API should never take the whole library down for every visitor.
+  if (!videoId || !YOUTUBE_ID.test(videoId) || !title) return null;
+
+  return {
+    id: `youtube-${videoId}`,
+    platform: "youtube",
+    title,
+    description: item.snippet?.description?.trim() || title,
+    url: `https://www.youtube.com/watch?v=${videoId}`,
+    videoId,
+    featured: false,
+    publishedAt: item.snippet?.publishedAt,
+  };
+}
+
+/** Fetches the channel's most recent uploads. Fails soft to an empty list. */
+export async function fetchYouTubeUploads(): Promise<MediaItem[]> {
+  if (!isYouTubeConfigured) return [];
+
+  const uploadsPlaylistId = await getUploadsPlaylistId();
+  if (!uploadsPlaylistId) return [];
+
+  const data = await youtubeGet<PlaylistItemsResponse>("/playlistItems", {
+    part: "snippet",
+    playlistId: uploadsPlaylistId,
+    maxResults: String(MAX_RESULTS),
+  });
+
+  return (data?.items ?? [])
+    .map(toMediaItem)
+    .filter((item): item is MediaItem => item !== null);
+}

From c3bb9cb193b240f4e6cb323a814fa0293bbe5445 Mon Sep 17 00:00:00 2001
From: 735meis <meisgod735@gmail.com>
Date: Sun, 6 Sep 2026 01:05:12 -0700
Subject: [PATCH 05/11] docs: document YOUTUBE_* env vars in .env.example
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

YOUTUBE_API_KEY, YOUTUBE_CHANNEL_HANDLE, YOUTUBE_CHANNEL_ID — all
optional, matching the Clerk/Supabase/Resend convention of failing soft
when unset rather than breaking the build.
---
 .env.example | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/.env.example b/.env.example
index 08a7b2d..b34807c 100644
--- a/.env.example
+++ b/.env.example
@@ -62,3 +62,29 @@ RESEND_AUDIENCE_ID=
 # routed to team@codewithpurpose.org, which is a real Google Workspace inbox.
 EMAIL_FROM="CodeWithPurpose <hello@codewithpurpose.org>"
 
+# --- YouTube Data API (media library auto-pull) -----------------------------
+# Powers the YouTube side of /media and the homepage "See what we're making"
+# section: the channel's recent uploads are fetched and refreshed hourly, so
+# a new video appears on the site on its own — no code change, no redeploy.
+#
+# Google Cloud Console -> APIs & Services -> Credentials -> Create API key,
+# with the "YouTube Data API v3" enabled on that project. Restrict the key to
+# that API only. Server-only — no NEXT_PUBLIC_ prefix, so it is never bundled
+# into the browser.
+#
+# Leave these blank and nothing breaks: the library falls back to whatever is
+# hand-curated in lib/media.ts (or the "new videos are on the way" empty state
+# if that's empty too).
+YOUTUBE_API_KEY=
+
+# The channel's @handle (recommended, e.g. "codewithpurpose") or, failing
+# that, its UC... channel ID via YOUTUBE_CHANNEL_ID instead. Only one is
+# needed.
+YOUTUBE_CHANNEL_HANDLE=
+YOUTUBE_CHANNEL_ID=
+
+# Instagram has no equivalent here: its official Graph API needs a
+# Business/Creator account linked to a Facebook Page and a long-lived access
+# token that expires roughly every 60 days, so it isn't wired up as
+# auto-pull yet. Add Instagram entries by hand in lib/media.ts for now.
+

From 31b97cd1699b59c7aba6a37bc2be03471701adbc Mon Sep 17 00:00:00 2001
From: 735meis <meisgod735@gmail.com>
Date: Sun, 6 Sep 2026 01:05:41 -0700
Subject: [PATCH 06/11] media: add publishedAt field, scope MEDIA_ITEMS to
 curated entries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

publishedAt will drive sort order once fetched YouTube uploads are
merged in. MEDIA_ITEMS's role narrows to hand-curated entries — mainly
Instagram, plus pinning a specific YouTube video — now that YouTube
itself is sourced live.
---
 src/lib/media.ts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/lib/media.ts b/src/lib/media.ts
index e9f2a94..928a9b5 100644
--- a/src/lib/media.ts
+++ b/src/lib/media.ts
@@ -1,5 +1,13 @@
 /**
- * Repository-owned media entries for the public video library.
+ * Media entries for the public video library.
+ *
+ * YouTube entries are pulled live from the channel by fetchYouTubeUploads()
+ * (see lib/youtube.ts) so new uploads appear without a code change. This
+ * file's MEDIA_ITEMS is now only for hand-curated entries — chiefly
+ * Instagram, since there is no equivalent auto-pull for it yet (that needs a
+ * Business/Creator account and a Meta Graph API token; see lib/youtube.ts's
+ * comment for why YouTube alone was wired up first). It can also pin a
+ * specific YouTube video that isn't in the channel's recent uploads.
  *
  * YouTube is embedded directly with its privacy-enhanced host. Instagram is
  * represented as a lightweight card that links to the original Reel or post;
@@ -19,9 +27,11 @@ export interface MediaItem {
   /** A local path under /public, used for Instagram preview cards. */
   thumbnail?: string;
   featured: boolean;
+  /** ISO 8601. Set on fetched YouTube entries; optional on hand-curated ones. */
+  publishedAt?: string;
 }
 
-/** Add published video entries here. Keep this list empty until real URLs exist. */
+/** Hand-curated entries — mainly Instagram. Keep this list empty until real URLs exist. */
 export const MEDIA_ITEMS: readonly MediaItem[] = [];
 
 const YOUTUBE_ID = /^[A-Za-z0-9_-]{11}$/;
@@ -63,8 +73,10 @@ function isInstagramUrl(value: string): boolean {
 
 /**
  * Fails loudly during development/build instead of rendering a broken card.
- * An empty list is valid while the team is collecting the first URLs; once
- * entries exist, the homepage must have exactly three featured items.
+ * An empty list is valid while the team is collecting the first URLs. The
+ * "zero or three" rule only governs manually pinned featured items in this
+ * file — see getFeaturedMedia() for how it combines with fetched YouTube
+ * uploads, which are never marked featured here.
  */
 export function validateMediaItems(items: readonly MediaItem[]): void {
   const ids = new Set<string>();

From 1a9b3b44d232db9691571bf7880cf11f54a25d02 Mon Sep 17 00:00:00 2001
From: 735meis <meisgod735@gmail.com>
Date: Sun, 6 Sep 2026 01:06:06 -0700
Subject: [PATCH 07/11] media: merge live YouTube uploads into getMediaItems

getMediaItems() is now async: it fetches the channel's recent uploads,
de-duplicates against hand-curated entries (curated wins on id
collisions), and returns everything newest-first.
---
 src/lib/media.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/lib/media.ts b/src/lib/media.ts
index 928a9b5..6add35e 100644
--- a/src/lib/media.ts
+++ b/src/lib/media.ts
@@ -14,6 +14,8 @@
  * Instagram's embed script is intentionally not loaded on every page.
  */
 
+import { fetchYouTubeUploads } from "@/lib/youtube";
+
 export type MediaPlatform = "youtube" | "instagram";
 
 export interface MediaItem {
@@ -124,8 +126,24 @@ export function validateMediaItems(items: readonly MediaItem[]): void {
 
 validateMediaItems(MEDIA_ITEMS);
 
-export function getMediaItems(): readonly MediaItem[] {
-  return MEDIA_ITEMS;
+function byPublishedDateDesc(a: MediaItem, b: MediaItem): number {
+  if (!a.publishedAt && !b.publishedAt) return 0;
+  if (!a.publishedAt) return 1;
+  if (!b.publishedAt) return -1;
+  return new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime();
+}
+
+/**
+ * The full library: hand-curated entries plus the channel's recent uploads,
+ * newest first. Curated entries win on id collisions (e.g. a pinned YouTube
+ * video that's also in recent uploads), so nothing renders twice.
+ */
+export async function getMediaItems(): Promise<readonly MediaItem[]> {
+  const fetched = await fetchYouTubeUploads();
+  const curatedIds = new Set(MEDIA_ITEMS.map((item) => item.id));
+  const merged = [...MEDIA_ITEMS, ...fetched.filter((item) => !curatedIds.has(item.id))];
+
+  return merged.slice().sort(byPublishedDateDesc);
 }
 
 export function getFeaturedMedia(): readonly MediaItem[] {

From cba290b4f51e662de35d65464cd9f2354de31822 Mon Sep 17 00:00:00 2001
From: 735meis <meisgod735@gmail.com>
Date: Sun, 6 Sep 2026 01:06:18 -0700
Subject: [PATCH 08/11] media: auto-feature latest 3 uploads unless 3 are
 pinned

getFeaturedMedia() now falls back to the 3 most recent items across
the merged library when nothing in MEDIA_ITEMS is manually marked
featured, so the homepage teaser stays current on its own. A manual
pin of exactly 3 still wins outright.
---
 src/lib/media.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/media.ts b/src/lib/media.ts
index 6add35e..f83e6b9 100644
--- a/src/lib/media.ts
+++ b/src/lib/media.ts
@@ -146,8 +146,17 @@ export async function getMediaItems(): Promise<readonly MediaItem[]> {
   return merged.slice().sort(byPublishedDateDesc);
 }
 
-export function getFeaturedMedia(): readonly MediaItem[] {
-  return MEDIA_ITEMS.filter((item) => item.featured);
+/**
+ * The homepage teaser's three items. If exactly three entries in MEDIA_ITEMS
+ * are manually marked featured, those win outright — a deliberate pin. Short
+ * of that, the three most recent items across the whole library are used, so
+ * the homepage stays current without anyone needing to flip a flag.
+ */
+export async function getFeaturedMedia(): Promise<readonly MediaItem[]> {
+  const pinned = MEDIA_ITEMS.filter((item) => item.featured);
+  if (pinned.length === 3) return pinned;
+
+  return (await getMediaItems()).slice(0, 3);
 }
 
 export function getYouTubeEmbedUrl(videoId: string): string {

From 496ef3be7be052dfed740aa4dad0f6de08b0ba68 Mon Sep 17 00:00:00 2001
From: 735meis <meisgod735@gmail.com>
Date: Sun, 6 Sep 2026 01:06:23 -0700
Subject: [PATCH 09/11] media: await featured media in MediaSection

Follows getFeaturedMedia() becoming async.
---
 src/components/media/MediaSection.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/media/MediaSection.tsx b/src/components/media/MediaSection.tsx
index 2274b2c..1ab9993 100644
--- a/src/components/media/MediaSection.tsx
+++ b/src/components/media/MediaSection.tsx
@@ -4,8 +4,8 @@ import { MediaGrid } from "@/components/media/MediaCard";
 import { getFeaturedMedia } from "@/lib/media";
 import { INSTAGRAM_HREF, MEDIA_HREF } from "@/lib/links";
 
-export function MediaSection() {
-  const featured = getFeaturedMedia();
+export async function MediaSection() {
+  const featured = await getFeaturedMedia();
 
   return (
     <section id="media" className="scroll-mt-24">

From c12f13993361c8551c36ab4a7ea942719432761c Mon Sep 17 00:00:00 2001
From: 735meis <meisgod735@gmail.com>
Date: Sun, 6 Sep 2026 01:06:28 -0700
Subject: [PATCH 10/11] media: await media items in /media page

Follows getMediaItems() becoming async. This is the last piece needed
for the auto-pull change to build cleanly end to end.
---
 src/app/media/page.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/media/page.tsx b/src/app/media/page.tsx
index c5ef22f..5d164f9 100644
--- a/src/app/media/page.tsx
+++ b/src/app/media/page.tsx
@@ -11,7 +11,9 @@ export const metadata: Metadata = {
   alternates: { canonical: "/media/" },
 };
 
-export default function MediaPage() {
+export default async function MediaPage() {
+  const items = await getMediaItems();
+
   return (
     <PageShell>
       <PageHero
@@ -19,7 +21,7 @@ export default function MediaPage() {
         description="Short lessons, student stories, and the work happening behind free coding education. Watch on the site or follow the original post to join the conversation."
       />
       <PageSection>
-        <MediaLibrary items={getMediaItems()} />
+        <MediaLibrary items={items} />
       </PageSection>
     </PageShell>
   );

From 09ccbb32e69d96599121efcb856f11e313fd24b1 Mon Sep 17 00:00:00 2001
From: 735meis <meisgod735@gmail.com>
Date: Sun, 6 Sep 2026 01:06:56 -0700
Subject: [PATCH 11/11] media: remove Instagram filter tab until content exists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instagram support (types, validation, card rendering) is untouched —
just not selectable as a filter until real Instagram entries are
added to MEDIA_ITEMS.
---
 src/components/media/MediaLibrary.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/media/MediaLibrary.tsx b/src/components/media/MediaLibrary.tsx
index 1c385ac..8842b68 100644
--- a/src/components/media/MediaLibrary.tsx
+++ b/src/components/media/MediaLibrary.tsx
@@ -6,10 +6,11 @@ import type { MediaItem, MediaPlatform } from "@/lib/media";
 
 type MediaFilter = "all" | MediaPlatform;
 
+// Instagram tab removed until Instagram entries exist in lib/media.ts — add
+// `{ label: "Instagram", value: "instagram" }` back once they do.
 const FILTERS: readonly { label: string; value: MediaFilter }[] = [
   { label: "All videos", value: "all" },
   { label: "YouTube", value: "youtube" },
-  { label: "Instagram", value: "instagram" },
 ];
 
 function matchesSearch(item: MediaItem, search: string): boolean {