Scaffold Next.js frontend with generated OpenAPI client and core views

Next.js (App Router) + React 19 + TypeScript + Tailwind v4, with shadcn-style UI primitives (Button, Input, Card, Label via cva/tailwind-merge). A typed API client is generated from the backend OpenAPI spec with openapi-typescript + openapi-fetch (npm run gen:api); the committed openapi.json/schema.d.ts are the snapshot. Views: landing, login, register, tree list + create, and tree detail with person list + create. Auth rides the same-origin HttpOnly session cookie the backend sets (Caddy proxies /api/*), so no token handling in JS. Built as a standalone container. Mobile-first; next build is clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Justin Paul <justin@jpaul.me>
2026-06-06 11:03:07 -04:00
parent e2edd4b2f1
commit a5a79f01a7
24 changed files with 4281 additions and 0 deletions
@@ -0,0 +1,19 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Provenance",
+  description: "Where it came from matters — family and land, every fact sourced.",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <header className="border-b border-neutral-200">
+          <div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
+            <Link href="/" className="font-semibold">
+              Provenance
+            </Link>
+            <nav className="flex gap-4 text-sm">
+              <Link href="/trees" className="hover:underline">
+                Trees
+              </Link>
+              <Link href="/login" className="hover:underline">
+                Sign in
+              </Link>
+            </nav>
+          </div>
+        </header>
+        <main className="mx-auto max-w-3xl px-4 py-8">{children}</main>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,74 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { api } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    const { error } = await api.POST("/api/v1/auth/login", { body: { email, password } });
+    setLoading(false);
+    if (error) {
+      setError("Invalid email or password.");
+      return;
+    }
+    router.push("/trees");
+  }
+
+  return (
+    <Card className="mx-auto max-w-md">
+      <CardHeader>
+        <CardTitle>Sign in</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div className="space-y-1">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+          {error && <p className="text-sm text-red-600">{error}</p>}
+          <Button type="submit" disabled={loading} className="w-full">
+            {loading ? "Signing in…" : "Sign in"}
+          </Button>
+        </form>
+        <p className="mt-4 text-sm text-neutral-600">
+          No account?{" "}
+          <Link href="/register" className="underline">
+            Create one
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function Home() {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h1 className="text-3xl font-bold">Provenance</h1>
+        <p className="text-neutral-600">
+          Trace where you come from — your family and your land — with every fact linked to a
+          source, on infrastructure you control.
+        </p>
+      </div>
+      <div className="flex gap-3">
+        <Link href="/register">
+          <Button>Create an account</Button>
+        </Link>
+        <Link href="/login">
+          <Button variant="outline">Sign in</Button>
+        </Link>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,82 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { api } from "@/lib/api/client";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    const { error } = await api.POST("/api/v1/auth/register", {
+      body: { email, password, display_name: displayName || null },
+    });
+    setLoading(false);
+    if (error) {
+      setError("Could not register. The email may already be in use, or the password is too short (min 8).");
+      return;
+    }
+    router.push("/trees");
+  }
+
+  return (
+    <Card className="mx-auto max-w-md">
+      <CardHeader>
+        <CardTitle>Create your account</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={onSubmit} className="space-y-4">
+          <div className="space-y-1">
+            <Label htmlFor="name">Name</Label>
+            <Input id="name" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+            />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              minLength={8}
+              required
+            />
+          </div>
+          {error && <p className="text-sm text-red-600">{error}</p>}
+          <Button type="submit" disabled={loading} className="w-full">
+            {loading ? "Creating…" : "Create account"}
+          </Button>
+        </form>
+        <p className="mt-4 text-sm text-neutral-600">
+          Already have an account?{" "}
+          <Link href="/login" className="underline">
+            Sign in
+          </Link>
+        </p>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,96 @@
+"use client";
+
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+
+import { api } from "@/lib/api/client";
+import type { components } from "@/lib/api/schema";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+type Person = components["schemas"]["PersonRead"];
+
+export default function TreeDetailPage() {
+  const router = useRouter();
+  const params = useParams<{ id: string }>();
+  const treeId = params.id;
+
+  const [persons, setPersons] = useState<Person[]>([]);
+  const [given, setGiven] = useState("");
+  const [surname, setSurname] = useState("");
+  const [ready, setReady] = useState(false);
+
+  const load = useCallback(async () => {
+    const { data, response } = await api.GET("/api/v1/trees/{tree_id}/persons", {
+      params: { path: { tree_id: treeId } },
+    });
+    if (response.status === 401) {
+      router.push("/login");
+      return;
+    }
+    setPersons(data ?? []);
+    setReady(true);
+  }, [router, treeId]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function addPerson(e: React.FormEvent) {
+    e.preventDefault();
+    if (!given.trim() && !surname.trim()) return;
+    const { error } = await api.POST("/api/v1/trees/{tree_id}/persons", {
+      params: { path: { tree_id: treeId } },
+      body: { given: given || null, surname: surname || null },
+    });
+    if (!error) {
+      setGiven("");
+      setSurname("");
+      load();
+    }
+  }
+
+  if (!ready) return <p className="text-neutral-500">Loading…</p>;
+
+  return (
+    <div className="space-y-6">
+      <Link href="/trees" className="text-sm text-neutral-500 hover:underline">
+        ← All trees
+      </Link>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Add a person</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={addPerson} className="flex gap-2">
+            <Input placeholder="Given name" value={given} onChange={(e) => setGiven(e.target.value)} />
+            <Input placeholder="Surname" value={surname} onChange={(e) => setSurname(e.target.value)} />
+            <Button type="submit">Add</Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      <div>
+        <h2 className="mb-2 text-lg font-semibold">People</h2>
+        {persons.length === 0 ? (
+          <p className="text-neutral-500">No people yet.</p>
+        ) : (
+          <ul className="space-y-2">
+            {persons.map((person) => (
+              <li key={person.id}>
+                <Card>
+                  <CardContent className="p-4">
+                    {person.primary_name ?? <span className="text-neutral-400">Unnamed</span>}
+                  </CardContent>
+                </Card>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,99 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+
+import { api } from "@/lib/api/client";
+import type { components } from "@/lib/api/schema";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+type Tree = components["schemas"]["TreeRead"];
+
+export default function TreesPage() {
+  const router = useRouter();
+  const [trees, setTrees] = useState<Tree[]>([]);
+  const [name, setName] = useState("");
+  const [ready, setReady] = useState(false);
+
+  const load = useCallback(async () => {
+    const { data, response } = await api.GET("/api/v1/trees");
+    if (response.status === 401) {
+      router.push("/login");
+      return;
+    }
+    setTrees(data ?? []);
+    setReady(true);
+  }, [router]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  async function createTree(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+    const { error } = await api.POST("/api/v1/trees", { body: { name } });
+    if (!error) {
+      setName("");
+      load();
+    }
+  }
+
+  async function logout() {
+    await api.POST("/api/v1/auth/logout");
+    router.push("/login");
+  }
+
+  if (!ready) return <p className="text-neutral-500">Loading…</p>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Your trees</h1>
+        <Button variant="ghost" size="sm" onClick={logout}>
+          Sign out
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">New tree</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={createTree} className="flex gap-2">
+            <Input
+              placeholder="Family name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+            <Button type="submit">Create</Button>
+          </form>
+        </CardContent>
+      </Card>
+
+      {trees.length === 0 ? (
+        <p className="text-neutral-500">No trees yet — create your first one above.</p>
+      ) : (
+        <ul className="space-y-2">
+          {trees.map((tree) => (
+            <li key={tree.id}>
+              <Link href={`/trees/${tree.id}`}>
+                <Card className="transition-colors hover:bg-neutral-50">
+                  <CardContent className="flex items-center justify-between p-4">
+                    <span className="font-medium">{tree.name}</span>
+                    <span className="text-xs uppercase tracking-wide text-neutral-400">
+                      {tree.visibility}
+                    </span>
+                  </CardContent>
+                </Card>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}