wire up pages

frontend/src/app/patterns/[slug]/page.tsx

@@ -0,0 +1,63 @@
+import { getPattern, getQuestions } from "@/lib/api";
+import { QuestionCard } from "@/components/questions/question-card";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { notFound } from "next/navigation";
+
+export default async function PatternDetailPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+
+  let pattern;
+  let questions;
+  try {
+    [pattern, questions] = await Promise.all([
+      getPattern(slug),
+      getQuestions({ pattern: slug, limit: 50 }),
+    ]);
+  } catch {
+    notFound();
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">{pattern.name}</h1>
+        <p className="text-[var(--muted-foreground)]">
+          {pattern.question_count} questions using this pattern
+        </p>
+      </div>
+
+      {pattern.description && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Description</CardTitle>
+          </CardHeader>
+          <CardContent>{pattern.description}</CardContent>
+        </Card>
+      )}
+
+      {pattern.when_to_use && (
+        <Card>
+          <CardHeader>
+            <CardTitle>When to Use</CardTitle>
+          </CardHeader>
+          <CardContent className="whitespace-pre-wrap">
+            {pattern.when_to_use}
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="space-y-4">
+        <h2 className="text-xl font-semibold">Questions</h2>
+        <div className="grid gap-4">
+          {questions.items.map((question) => (
+            <QuestionCard key={question.id} question={question} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/app/patterns/page.tsx

@@ -0,0 +1,38 @@
+import { getPatterns } from "@/lib/api";
+import Link from "next/link";
+
+export default async function PatternsPage() {
+  const { items: patterns } = await getPatterns();
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-3xl font-bold">Algorithmic Patterns</h1>
+      <p className="text-[var(--muted-foreground)]">
+        Master common problem-solving patterns to recognize and apply them in
+        interviews.
+      </p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {patterns.map((pattern) => (
+          <Link
+            key={pattern.id}
+            href={`/patterns/${pattern.slug}`}
+            className="p-6 rounded-lg border border-[var(--border)] bg-[var(--card)] hover:border-[var(--primary)] transition-colors"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="font-semibold">{pattern.name}</h3>
+              <span className="text-sm text-[var(--muted-foreground)]">
+                {pattern.question_count} questions
+              </span>
+            </div>
+            {pattern.description && (
+              <p className="text-sm text-[var(--muted-foreground)] mb-3">
+                {pattern.description}
+              </p>
+            )}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}