feat: Reimplement the October counter application using Next.js, tRPC, and shadcn/ui, replacing the original static HTML/JS setup.

2026-02-05 08:16:38 -05:00 · 2026-02-03 19:40:14 -05:00
parent a32888cf14
commit 2fb4ffebf5
38 changed files with 2519 additions and 529 deletions
--- a/src/.DS_Store
+++ b/src/.DS_Store
--- a/src/app/.DS_Store
+++ b/src/app/.DS_Store
--- a/src/app/_components/post.tsx
+++ b/src/app/_components/post.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useState } from "react";
+
+import { api } from "~/trpc/react";
+
+export function LatestPost() {
+  const [latestPost] = api.post.getLatest.useSuspenseQuery();
+
+  const utils = api.useUtils();
+  const [name, setName] = useState("");
+  const createPost = api.post.create.useMutation({
+    onSuccess: async () => {
+      await utils.post.invalidate();
+      setName("");
+    },
+  });
+
+  return (
+    <div className="w-full max-w-xs">
+      {latestPost ? (
+        <p className="truncate">Your most recent post: {latestPost.name}</p>
+      ) : (
+        <p>You have no posts yet.</p>
+      )}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          createPost.mutate({ name });
+        }}
+        className="flex flex-col gap-2"
+      >
+        <input
+          type="text"
+          placeholder="Title"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="w-full rounded-full bg-white/10 px-4 py-2 text-white"
+        />
+        <button
+          type="submit"
+          className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
+          disabled={createPost.isPending}
+        >
+          {createPost.isPending ? "Submitting..." : "Submit"}
+        </button>
+      </form>
+    </div>
+  );
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,43 @@
+import "~/styles/globals.css";
+
+import { type Metadata } from "next";
+import { Inter, Playfair_Display } from "next/font/google";
+
+export const metadata: Metadata = {
+  title: "October Today",
+  description: "October Today",
+  icons: [{ rel: "icon", url: "/favicon.ico" }],
+};
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const playfair = Playfair_Display({
+  subsets: ["latin"],
+  variable: "--font-heading",
+});
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
+      <body>
+        <div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
+          <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
+          <div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
+        </div>
+        {children}
+        {process.env.NEXT_PUBLIC_UMAMI_URL && process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
+          <script
+            defer
+            src={process.env.NEXT_PUBLIC_UMAMI_URL}
+            data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
+          ></script>
+        )}
+      </body>
+    </html>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,9 @@
+import OctoberCounter from "~/components/OctoberCounter";
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-4">
+      <OctoberCounter />
+    </main>
+  );
+}
--- a/src/components/OctoberCounter.tsx
+++ b/src/components/OctoberCounter.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
+
+export default function OctoberCounter() {
+    const [day, setDay] = useState(0);
+    const [ordinal, setOrdinal] = useState("th");
+    const [isAnimating, setIsAnimating] = useState(true);
+
+    useEffect(() => {
+        // Set the start date - October 1, 2019
+        const startDate = new Date(2019, 9, 1); // Month is 0-indexed, so 9 = October
+        const today = new Date();
+
+        // Calculate days difference
+        const diffTime = Math.abs(today.getTime() - startDate.getTime());
+        const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+
+        // Add 1 because October 1 is the first day
+        const octoberDay = diffDays + 1;
+
+        // Check for API request
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.get("api") === "json") {
+            const response = {
+                day: octoberDay,
+                ordinal: getOrdinalSuffix(octoberDay),
+                formatted: `${octoberDay}${getOrdinalSuffix(octoberDay)}`,
+                text: `happy october ${octoberDay}${getOrdinalSuffix(octoberDay)}`,
+            };
+
+            // Replace entire document body to match legacy behavior exactly
+            document.body.innerHTML = `<pre>${JSON.stringify(response, null, 2)}</pre>`;
+            document.body.style.fontFamily = "monospace";
+            document.body.style.padding = "20px";
+            document.body.style.backgroundColor = "#f5f5f5";
+            document.body.style.color = "black";
+            return; // Stop animation loop setup
+        }
+
+        // Start animation
+        const targetNumber = octoberDay;
+        let currentNumber = Math.max(1, targetNumber - 50);
+
+        setDay(currentNumber);
+
+        const interval = setInterval(() => {
+            currentNumber++;
+            setDay(currentNumber);
+
+            if (currentNumber >= targetNumber) {
+                clearInterval(interval);
+                setIsAnimating(false);
+                // Set ordinal suffix
+                setOrdinal(getOrdinalSuffix(targetNumber));
+                // Update document title
+                document.title = `October ${targetNumber}${getOrdinalSuffix(targetNumber)}, 2019`;
+            }
+        }, 30);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    const getOrdinalSuffix = (number: number) => {
+        if (number % 100 >= 11 && number % 100 <= 13) {
+            return "th";
+        }
+        switch (number % 10) {
+            case 1:
+                return "st";
+            case 2:
+                return "nd";
+            case 3:
+                return "rd";
+            default:
+                return "th";
+        }
+    };
+
+    const handleShare = () => {
+        const message = `happy october ${day}${ordinal}`;
+        const smsLink = `sms:?&body=${encodeURIComponent(message)}`;
+        window.open(smsLink, "_blank");
+    };
+
+    return (
+        <Card className="group relative z-10 mx-auto mb-8 w-full max-w-[600px] overflow-hidden rounded-3xl border-none bg-background/80 shadow-sm backdrop-blur-md transition-all duration-300 hover:-translate-y-[5px] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)]">
+            <div className="absolute inset-0 -z-10 bg-gradient-to-br from-transparent from-0% via-white/5 via-50% to-transparent to-100% opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
+            <CardContent className="p-8 sm:p-12 text-center">
+                <h1 className="mb-8 text-2xl font-medium tracking-tight sm:text-[2rem]">Today is</h1>
+
+                <div className="date my-8">
+                    <h2 className="mb-1 text-[2.5rem] tracking-tight sm:text-[3.5rem] leading-none">
+                        October{" "}
+                        <span className="relative inline-block font-bold text-primary">
+                            {day}
+                            <span className="absolute bottom-[-5px] left-0 h-[3px] w-full origin-left scale-x-0 bg-primary transition-transform duration-300 ease-out group-hover:scale-x-100"></span>
+                        </span>
+                        <sup className="text-[0.6em]">{ordinal}</sup>
+                    </h2>
+                    <p className="year text-2xl tracking-tight text-muted-foreground sm:text-[1.5rem]">2019.</p>
+                </div>
+
+                <div className="buttons mt-6 flex flex-col justify-center gap-3 sm:flex-row sm:gap-2">
+                    <Button
+                        onClick={handleShare}
+                        className="rounded-xl gap-2 transition-all duration-200 hover:-translate-y-[2px] group/btn"
+                    >
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="transition-transform duration-200 group-hover/btn:-translate-y-[2px]"
+                        >
+                            <path d="M7 11l5-5 5 5" />
+                            <path d="M12 6v13" />
+                        </svg>
+                        Share via SMS
+                    </Button>
+
+                    <Button
+                        asChild
+                        className="rounded-xl gap-2 transition-all duration-200 hover:-translate-y-[2px] group/link cursor-pointer"
+                    >
+                        <Link
+                            href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                            target="_blank"
+                        >
+                            <svg
+                                width="18"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="transition-transform duration-200 group-hover/link:rotate-12"
+                            >
+                                <circle cx="12" cy="12" r="10" />
+                                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+                                <path d="M12 17h.01" />
+                            </svg>
+                            Why?
+                        </Link>
+                    </Button>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "~/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/src/env.ts
+++ b/src/env.ts
@@ -0,0 +1,44 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    NODE_ENV: z.enum(["development", "test", "production"]),
+  },
+
+  /**
+   * Specify your client-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars. To expose them to the client, prefix them with
+   * `NEXT_PUBLIC_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID: z.string().optional(),
+    NEXT_PUBLIC_UMAMI_URL: z.string().url().optional(),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID: process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
+    NEXT_PUBLIC_UMAMI_URL: process.env.NEXT_PUBLIC_UMAMI_URL,
+  },
+  /**
+   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
+   * useful for Docker builds.
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+  /**
+   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
+   * `SOME_VAR=''` will throw an error.
+   */
+  emptyStringAsUndefined: true,
+});
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/server/api/root.ts
+++ b/src/server/api/root.ts
@@ -0,0 +1,23 @@
+import { postRouter } from "~/server/api/routers/post";
+import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
+
+/**
+ * This is the primary router for your server.
+ *
+ * All routers added in /api/routers should be manually added here.
+ */
+export const appRouter = createTRPCRouter({
+  post: postRouter,
+});
+
+// export type definition of API
+export type AppRouter = typeof appRouter;
+
+/**
+ * Create a server-side caller for the tRPC API.
+ * @example
+ * const trpc = createCaller(createContext);
+ * const res = await trpc.post.all();
+ *       ^? Post[]
+ */
+export const createCaller = createCallerFactory(appRouter);
--- a/src/server/api/routers/post.ts
+++ b/src/server/api/routers/post.ts
@@ -0,0 +1,40 @@
+import { z } from "zod";
+
+import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
+
+// Mocked DB
+interface Post {
+  id: number;
+  name: string;
+}
+const posts: Post[] = [
+  {
+    id: 1,
+    name: "Hello World",
+  },
+];
+
+export const postRouter = createTRPCRouter({
+  hello: publicProcedure
+    .input(z.object({ text: z.string() }))
+    .query(({ input }) => {
+      return {
+        greeting: `Hello ${input.text}`,
+      };
+    }),
+
+  create: publicProcedure
+    .input(z.object({ name: z.string().min(1) }))
+    .mutation(async ({ input }) => {
+      const post: Post = {
+        id: posts.length + 1,
+        name: input.name,
+      };
+      posts.push(post);
+      return post;
+    }),
+
+  getLatest: publicProcedure.query(() => {
+    return posts.at(-1) ?? null;
+  }),
+});
--- a/src/server/api/trpc.ts
+++ b/src/server/api/trpc.ts
@@ -0,0 +1,103 @@
+/**
+ * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
+ * 1. You want to modify request context (see Part 1).
+ * 2. You want to create a new middleware or type of procedure (see Part 3).
+ *
+ * TL;DR - This is where all the tRPC server stuff is created and plugged in. The pieces you will
+ * need to use are documented accordingly near the end.
+ */
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+import { ZodError } from "zod";
+
+/**
+ * 1. CONTEXT
+ *
+ * This section defines the "contexts" that are available in the backend API.
+ *
+ * These allow you to access things when processing a request, like the database, the session, etc.
+ *
+ * This helper generates the "internals" for a tRPC context. The API handler and RSC clients each
+ * wrap this and provides the required context.
+ *
+ * @see https://trpc.io/docs/server/context
+ */
+export const createTRPCContext = async (opts: { headers: Headers }) => {
+  return {
+    ...opts,
+  };
+};
+
+/**
+ * 2. INITIALIZATION
+ *
+ * This is where the tRPC API is initialized, connecting the context and transformer. We also parse
+ * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation
+ * errors on the backend.
+ */
+const t = initTRPC.context<typeof createTRPCContext>().create({
+  transformer: superjson,
+  errorFormatter({ shape, error }) {
+    return {
+      ...shape,
+      data: {
+        ...shape.data,
+        zodError:
+          error.cause instanceof ZodError ? error.cause.flatten() : null,
+      },
+    };
+  },
+});
+
+/**
+ * Create a server-side caller.
+ *
+ * @see https://trpc.io/docs/server/server-side-calls
+ */
+export const createCallerFactory = t.createCallerFactory;
+
+/**
+ * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
+ *
+ * These are the pieces you use to build your tRPC API. You should import these a lot in the
+ * "/src/server/api/routers" directory.
+ */
+
+/**
+ * This is how you create new routers and sub-routers in your tRPC API.
+ *
+ * @see https://trpc.io/docs/router
+ */
+export const createTRPCRouter = t.router;
+
+/**
+ * Middleware for timing procedure execution and adding an artificial delay in development.
+ *
+ * You can remove this if you don't like it, but it can help catch unwanted waterfalls by simulating
+ * network latency that would occur in production but not in local development.
+ */
+const timingMiddleware = t.middleware(async ({ next, path }) => {
+  const start = Date.now();
+
+  if (t._config.isDev) {
+    // artificial delay in dev
+    const waitMs = Math.floor(Math.random() * 400) + 100;
+    await new Promise((resolve) => setTimeout(resolve, waitMs));
+  }
+
+  const result = await next();
+
+  const end = Date.now();
+  console.log(`[TRPC] ${path} took ${end - start}ms to execute`);
+
+  return result;
+});
+
+/**
+ * Public (unauthenticated) procedure
+ *
+ * This is the base piece you use to build new queries and mutations on your tRPC API. It does not
+ * guarantee that a user querying is authorized, but you can still access user session data if they
+ * are logged in.
+ */
+export const publicProcedure = t.procedure.use(timingMiddleware);
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -0,0 +1,217 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-heading: var(--font-heading), ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+
+  --animate-blob: blob 7s infinite;
+
+  @keyframes blob {
+    0% {
+      transform: translate(0px, 0px) scale(1);
+    }
+
+    33% {
+      transform: translate(30px, -50px) scale(1.1);
+    }
+
+    66% {
+      transform: translate(-20px, 20px) scale(0.9);
+    }
+
+    100% {
+      transform: translate(0px, 0px) scale(1);
+    }
+  }
+}
+
+/* Base styles */
+body {
+  background-size: 20px 20px;
+  background-position: center;
+}
+
+@theme inline {
+  --radius-xs: calc(var(--radius) - 8px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Font Family utilities */
+  --font-sans: var(--font-sans);
+  --font-heading: var(--font-heading);
+}
+
+:root {
+  --radius: 1rem;
+  /* 16px base radius */
+
+  /* Light mode variables - Monochrome Zinc */
+  --background: hsl(0, 0%, 100%);
+  /* #FFFFFF */
+  --foreground: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --card: hsl(0, 0%, 100%);
+  /* #FFFFFF */
+  --card-foreground: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --popover: hsl(0, 0%, 100%);
+  /* #FFFFFF */
+  --popover-foreground: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --primary: hsl(240, 5.9%, 10%);
+  /* #18181B */
+  --primary-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --secondary: hsl(240, 4.8%, 95.9%);
+  /* #F4F4F5 (Zinc-100) used for secondary/muted approx */
+  --secondary-foreground: hsl(240, 5.9%, 10%);
+  /* #18181B */
+  --muted: hsl(240, 4.8%, 95.9%);
+  /* #F4F4F5 */
+  --muted-foreground: hsl(240, 3.8%, 46.1%);
+  /* #71717A */
+  --accent: hsl(240, 4.8%, 95.9%);
+  /* #F4F4F5 */
+  --accent-foreground: hsl(240, 5.9%, 10%);
+  /* #18181B */
+  --destructive: hsl(0, 84.2%, 60.2%);
+  /* #EF4444 */
+  --destructive-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --border: hsl(240, 5.9%, 90%);
+  /* #E4E4E7 */
+  --input: hsl(240, 5.9%, 90%);
+  /* #E4E4E7 */
+  --ring: hsl(240, 5.9%, 10%);
+  /* #18181B */
+
+  --chart-1: hsl(12, 76%, 61%);
+  --chart-2: hsl(173, 58%, 39%);
+  --chart-3: hsl(197, 37%, 24%);
+  --chart-4: hsl(43, 74%, 66%);
+  --chart-5: hsl(27, 87%, 67%);
+
+  --sidebar: hsl(0, 0%, 98%);
+  --sidebar-foreground: hsl(240, 5.3%, 26.1%);
+  --sidebar-primary: hsl(240, 5.9%, 10%);
+  --sidebar-primary-foreground: hsl(0, 0%, 98%);
+  --sidebar-accent: hsl(240, 4.8%, 95.9%);
+  --sidebar-accent-foreground: hsl(240, 5.9%, 10%);
+  --sidebar-border: hsl(220, 13%, 91%);
+  --sidebar-ring: hsl(217.2, 91.2%, 59.8%);
+}
+
+.dark {
+  /* Dark mode overrides - Monochrome Zinc */
+  --background: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --card: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --card-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --popover: hsl(240, 10%, 3.9%);
+  /* #09090B */
+  --popover-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --primary: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --primary-foreground: hsl(240, 5.9%, 10%);
+  /* #18181B */
+  --secondary: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --secondary-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --muted: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --muted-foreground: hsl(240, 5%, 64.9%);
+  /* #A1A1AA */
+  --accent: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --accent-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --destructive: hsl(0, 62.8%, 30.6%);
+  /* #7F1D1D */
+  --destructive-foreground: hsl(0, 0%, 98%);
+  /* #FAFAFA */
+  --border: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --input: hsl(240, 3.7%, 15.9%);
+  /* #27272A */
+  --ring: hsl(240, 4.9%, 83.9%);
+  /* #D4D4D8 */
+
+  --chart-1: hsl(220, 70%, 50%);
+  --chart-2: hsl(160, 60%, 45%);
+  --chart-3: hsl(30, 80%, 55%);
+  --chart-4: hsl(280, 65%, 60%);
+  --chart-5: hsl(340, 75%, 55%);
+
+  --sidebar: hsl(240, 5.9%, 10%);
+  --sidebar-foreground: hsl(240, 4.8%, 95.9%);
+  --sidebar-primary: hsl(224.3, 76.3%, 48%);
+  --sidebar-primary-foreground: hsl(0, 0%, 100%);
+  --sidebar-accent: hsl(240, 3.7%, 15.9%);
+  --sidebar-accent-foreground: hsl(240, 4.8%, 95.9%);
+  --sidebar-border: hsl(240, 3.7%, 15.9%);
+  --sidebar-ring: hsl(217.2, 91.2%, 59.8%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-heading;
+  }
+}
--- a/src/styles/globals.css.bak
+++ b/src/styles/globals.css.bak
@@ -0,0 +1,74 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  /* Light mode variables */
+  --color-background: hsl(200, 30%, 97%);
+  --color-foreground: hsl(200, 50%, 20%);
+  --color-card: hsla(0, 0%, 100%, 0.5);
+  --color-card-foreground: hsl(200, 50%, 20%);
+  --color-primary: hsl(200, 85%, 45%);
+  --color-primary-foreground: hsl(0, 0%, 100%);
+  --color-secondary: hsl(37, 95%, 58%);
+  --color-secondary-foreground: hsl(200, 50%, 20%);
+  --color-muted: hsl(200, 30%, 96%);
+  --color-muted-foreground: hsl(200, 30%, 40%);
+  --color-accent: hsl(200, 85%, 45%);
+  --color-accent-foreground: hsl(0, 0%, 100%);
+  --color-border: hsla(200, 30%, 90%, 0.2);
+  --radius: 0.75rem;
+
+  --animate-gradient-move-1: gradient-move-1 30s ease-in-out infinite;
+
+  @keyframes gradient-move-1 {
+    0% {
+      transform: translate(-50%, -50%) scale(1) rotate(0deg);
+    }
+
+    25% {
+      transform: translate(-50%, -50%) scale(1.05) rotate(90deg);
+    }
+
+    50% {
+      transform: translate(-50%, -50%) scale(0.95) rotate(180deg);
+    }
+
+    75% {
+      transform: translate(-50%, -50%) scale(1.05) rotate(270deg);
+    }
+
+    100% {
+      transform: translate(-50%, -50%) scale(1) rotate(360deg);
+    }
+  }
+}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: hsl(200, 30%, 8%);
+    --color-foreground: hsl(200, 20%, 96%);
+    --color-card: hsla(200, 25%, 15%, 0.4);
+    --color-card-foreground: hsl(200, 15%, 85%);
+    --color-primary: hsl(200, 70%, 40%);
+    --color-primary-foreground: hsl(0, 0%, 100%);
+    --color-secondary: hsl(37, 92%, 50%);
+    --color-secondary-foreground: hsl(200, 20%, 96%);
+    --color-muted: hsl(200, 30%, 20%);
+    --color-muted-foreground: hsl(200, 30%, 65%);
+    --color-accent: hsl(200, 70%, 40%);
+    --color-accent-foreground: hsl(0, 0%, 100%);
+    --color-border: hsla(200, 30%, 20%, 0.2);
+  }
+}
+
+/* Base styles */
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  background-image: url('/grid.svg');
+  background-size: 20px 20px;
+  background-position: center;
+}
--- a/src/trpc/query-client.ts
+++ b/src/trpc/query-client.ts
@@ -0,0 +1,25 @@
+import {
+  defaultShouldDehydrateQuery,
+  QueryClient,
+} from "@tanstack/react-query";
+import SuperJSON from "superjson";
+
+export const createQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 30 * 1000,
+      },
+      dehydrate: {
+        serializeData: SuperJSON.serialize,
+        shouldDehydrateQuery: (query) =>
+          defaultShouldDehydrateQuery(query) ||
+          query.state.status === "pending",
+      },
+      hydrate: {
+        deserializeData: SuperJSON.deserialize,
+      },
+    },
+  });
--- a/src/trpc/react.tsx
+++ b/src/trpc/react.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
+import { httpBatchStreamLink, loggerLink } from "@trpc/client";
+import { createTRPCReact } from "@trpc/react-query";
+import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
+import { useState } from "react";
+import SuperJSON from "superjson";
+
+import { type AppRouter } from "~/server/api/root";
+import { createQueryClient } from "./query-client";
+
+let clientQueryClientSingleton: QueryClient | undefined = undefined;
+const getQueryClient = () => {
+  if (typeof window === "undefined") {
+    // Server: always make a new query client
+    return createQueryClient();
+  }
+  // Browser: use singleton pattern to keep the same query client
+  clientQueryClientSingleton ??= createQueryClient();
+
+  return clientQueryClientSingleton;
+};
+
+export const api = createTRPCReact<AppRouter>();
+
+/**
+ * Inference helper for inputs.
+ *
+ * @example type HelloInput = RouterInputs['example']['hello']
+ */
+export type RouterInputs = inferRouterInputs<AppRouter>;
+
+/**
+ * Inference helper for outputs.
+ *
+ * @example type HelloOutput = RouterOutputs['example']['hello']
+ */
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
+
+export function TRPCReactProvider(props: { children: React.ReactNode }) {
+  const queryClient = getQueryClient();
+
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      links: [
+        loggerLink({
+          enabled: (op) =>
+            process.env.NODE_ENV === "development" ||
+            (op.direction === "down" && op.result instanceof Error),
+        }),
+        httpBatchStreamLink({
+          transformer: SuperJSON,
+          url: getBaseUrl() + "/api/trpc",
+          headers: () => {
+            const headers = new Headers();
+            headers.set("x-trpc-source", "nextjs-react");
+            return headers;
+          },
+        }),
+      ],
+    }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <api.Provider client={trpcClient} queryClient={queryClient}>
+        {props.children}
+      </api.Provider>
+    </QueryClientProvider>
+  );
+}
+
+function getBaseUrl() {
+  if (typeof window !== "undefined") return window.location.origin;
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
+  return `http://localhost:${process.env.PORT ?? 3000}`;
+}
--- a/src/trpc/server.ts
+++ b/src/trpc/server.ts
@@ -0,0 +1,30 @@
+import "server-only";
+
+import { createHydrationHelpers } from "@trpc/react-query/rsc";
+import { headers } from "next/headers";
+import { cache } from "react";
+
+import { createCaller, type AppRouter } from "~/server/api/root";
+import { createTRPCContext } from "~/server/api/trpc";
+import { createQueryClient } from "./query-client";
+
+/**
+ * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
+ * handling a tRPC call from a React Server Component.
+ */
+const createContext = cache(async () => {
+  const heads = new Headers(await headers());
+  heads.set("x-trpc-source", "rsc");
+
+  return createTRPCContext({
+    headers: heads,
+  });
+});
+
+const getQueryClient = cache(createQueryClient);
+const caller = createCaller(createContext);
+
+export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
+  caller,
+  getQueryClient,
+);