Add school profile frontend with fit summary

Author: codysj

README.md

@@ -2,7 +2,7 @@
 
 College Exploration Platform is a full-stack decision-support product for helping prospective and admitted students discover, compare, rank, and justify college choices with transparent data and deterministic scoring.
 
-Status: V1.9 deterministic ranking engine complete. Redis, pgvector, saved schools, comparisons, and deployment are intentionally not implemented yet.
+Status: V1.10 school profile frontend complete. Redis, pgvector, persisted saved schools, comparisons, and deployment are intentionally not implemented yet.
 
 ## Project Thesis
 
@@ -156,6 +156,7 @@ Useful local URL:
 - Web app: `http://localhost:3000`
 - Onboarding: `http://localhost:3000/onboarding`
 - Search UI: `http://localhost:3000/search`
+- School profile: `http://localhost:3000/schools/1`
 
 Frontend environment:
 
@@ -221,12 +222,15 @@ Expected future commands:
 ## Limitations
 
 - `/health`, `/ready`, `/schools/search`, `/schools/{id}`, and `/rankings` exist. Preference persistence, saved-school, and comparison endpoints are not implemented yet.
-- The frontend has a landing page, onboarding, search UI, route shell, UI primitives, and typed API client, but no backend preference persistence, persisted saved-school flows, comparison workflow, or profile pages yet.
+- The frontend has a landing page, onboarding, search UI, school profile pages, route shell, UI primitives, and typed API client, but no backend preference persistence, persisted saved-school flows, or full comparison workflow yet.
 - Onboarding stores a typed `PreferenceProfile` in browser `localStorage` and forwards supported filters such as state, setting, school type, and max net price to `/search`.
 - Search supports structured filters, sort controls, URL state, pagination, local save/compare state, loading/empty/error states, and API-backed result cards.
+- School profiles call `GET /schools/{id}`, render fit summary placeholders, academics, cost, outcomes, campus life, data-quality metadata, and a V2 similar-schools placeholder.
 - The "Best fit" sort is a UI placeholder until the frontend calls `POST /rankings`.
+- Profile fit score, category scores, top reasons, top tradeoffs, and ranking version remain unavailable on `GET /schools/{id}` unless the backend later adds or composes ranking output. The profile page labels these states explicitly as unavailable and uses `data_confidence_score` only as data-completeness confidence.
 - No Redis cache, pgvector integration, or deployment exists yet.
 - No performance metrics are available.
 - Seed data is synthetic and intended for deterministic local development, not factual school reporting.
-- End-to-end validation will be added after the product workflows exist.
+- Playwright smoke coverage exists for search, onboarding, and school profiles.
+- README screenshot checklist for V1.13: landing page, onboarding completion, search with filters, school profile fit summary, profile missing-data state, and compare tray.
 - Documentation is intentionally concise and should be updated as each implementation step lands.

apps/web/app/schools/[id]/error.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function Error({ reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  return (
+    <main className="mx-auto flex min-h-screen w-full max-w-3xl items-center justify-center px-5 py-12">
+      <div className="rounded-lg border border-border bg-white p-8 shadow-soft">
+        <h1 className="text-2xl font-semibold tracking-normal text-foreground">
+          School profile failed to load
+        </h1>
+        <p className="mt-3 text-sm leading-6 text-muted-foreground">
+          The profile page could not render. Keep the API server running and try again.
+        </p>
+        <div className="mt-6 flex gap-3">
+          <Button type="button" onClick={reset}>Try again</Button>
+          <Button asChild variant="secondary">
+            <Link href="/search">Back to search</Link>
+          </Button>
+        </div>
+      </div>
+    </main>
+  );
+}

apps/web/app/schools/[id]/loading.tsx

@@ -0,0 +1,30 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+  return (
+    <main className="mx-auto min-h-screen w-full max-w-7xl px-5 pb-16 pt-8 sm:px-8">
+      <Skeleton className="h-5 w-32" />
+      <section className="mt-6 rounded-lg border border-border bg-white p-6 shadow-soft">
+        <Skeleton className="h-6 w-36" />
+        <Skeleton className="mt-5 h-12 w-3/4" />
+        <Skeleton className="mt-3 h-5 w-72" />
+      </section>
+      <div className="mt-6 grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
+        <div className="space-y-6">
+          {Array.from({ length: 4 }, (_, index) => (
+            <Card key={index}>
+              <CardHeader>
+                <Skeleton className="h-7 w-48" />
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-40 w-full" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <Skeleton className="h-64 w-full" />
+      </div>
+    </main>
+  );
+}

apps/web/app/schools/[id]/page.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+
+import { SchoolProfilePage } from "@/components/schools/school-profile";
+import { getSchoolProfile } from "@/lib/schools";
+
+type SchoolPageProps = {
+  params: Promise<{
+    id: string;
+  }>;
+};
+
+export async function generateMetadata({ params }: SchoolPageProps): Promise<Metadata> {
+  const { id } = await params;
+  const schoolId = Number(id);
+
+  if (!Number.isInteger(schoolId) || schoolId <= 0) {
+    return {
+      title: "School Profile",
+      description: "Explore a structured school profile.",
+    };
+  }
+
+  try {
+    const profile = await getSchoolProfile(schoolId);
+    return {
+      title: profile.name,
+      description: `${profile.name} profile, fit summary, academics, cost, outcomes, and campus life.`,
+    };
+  } catch {
+    return {
+      title: "School Profile",
+      description: "Explore a structured school profile.",
+    };
+  }
+}
+
+export default async function SchoolPage({ params }: SchoolPageProps) {
+  const { id } = await params;
+  const schoolId = Number(id);
+
+  return <SchoolProfilePage schoolId={Number.isInteger(schoolId) && schoolId > 0 ? schoolId : 0} />;
+}