Implement Todo management features and enhance dashboard application

.gitignore

@@ -266,3 +266,6 @@ $RECYCLE.BIN/
 
 # Alchemy
 *.alchemy
+
+# Tanstack
+*.tanstack

.vscode/settings.json

@@ -34,5 +34,14 @@
   },
   "[graphql]": {
     "editor.defaultFormatter": "biomejs.biome"
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
   }
 }

apps/api/alchemy.run.ts

@@ -1,5 +1,5 @@
 import alchemy from "alchemy";
-import { Worker } from "alchemy/cloudflare";
+import { D1Database, Worker } from "alchemy/cloudflare";
 import { GitHubComment } from "alchemy/github";
 import { CloudflareStateStore } from "alchemy/state";
 
@@ -14,12 +14,22 @@ const app = await alchemy("realm-api", {
   password: process.env.ALCHEMY_PASSWORD,
 });
 
+const db = await D1Database("db", {
+  name: "realm-db",
+  migrationsDir: "./node_modules/@realm/db/migrations",
+});
+
 export const worker = await Worker("api", {
-  name: "realm-api",
+  name: `realm-api-${app.stage}`,
   entrypoint: "./src/index.ts",
-  url: true,
-  adopt: true,
-  bindings: {},
+  compatibilityDate: "2026-04-01",
+  compatibilityFlags: ["nodejs_compat"],
+  bindings: {
+    DB: db,
+  },
+  bundle: {
+    external: ["bun:sqlite", "@libsql/client"],
+  },
   observability: {
     enabled: true,
     logs: {
@@ -34,7 +44,7 @@ export const worker = await Worker("api", {
       persist: true,
     },
   },
-  domains: ["api.ahargunyllib.dev"],
+  domains: app.stage === "prod" ? ["api.ahargunyllib.dev"] : undefined,
   dev: {
     port: 3000,
   },

apps/api/package.json

@@ -7,6 +7,11 @@
     "dev": "alchemy dev --app realm-api"
   },
   "dependencies": {
+    "@hono/trpc-server": "^0.4.2",
+    "@realm/api": "workspace:*",
+    "@realm/db": "workspace:*",
+    "@realm/logger": "workspace:*",
+    "@realm/utils": "workspace:*",
     "alchemy": "catalog:",
     "hono": "^4.7.9"
   },

apps/api/src/index.ts

@@ -1,8 +1,52 @@
+import { trpcServer } from "@hono/trpc-server";
+import { createContext, trpcRouter } from "@realm/api";
+import type { D1Database } from "@realm/db";
+import { createLogger } from "@realm/logger";
+import { createNanoId } from "@realm/utils";
 import { Hono } from "hono";
+import { cors } from "hono/cors";
+import { logger } from "hono/logger";
 
-const app = new Hono();
+const app = new Hono<{
+  Bindings: {
+    DB: D1Database;
+  };
+}>();
+
+app.use(logger());
+app.use(
+  "/*",
+  cors({
+    origin: "http://localhost:5173",
+    allowMethods: ["GET", "POST", "OPTIONS"],
+    allowHeaders: ["Content-Type", "Authorization", "trpc-accept"],
+    credentials: true,
+  })
+);
 
 app.get("/", (c) => c.text("Hello World"));
 app.get("/health", (c) => c.json({ status: "ok" }));
 
-export default app;
+app.use(
+  "/trpc/*",
+  trpcServer({
+    router: trpcRouter,
+    createContext: (opts, c) => {
+      const requestId = createNanoId();
+      const customLogger = createLogger({ requestId });
+
+      return createContext({
+        env: {
+          db: c.env.DB,
+        },
+        fetchCreateContextFnOptions: opts,
+        logger: customLogger,
+        requestId,
+      });
+    },
+  })
+);
+
+export default {
+  fetch: app.fetch,
+};

apps/dashboard/.env.example

@@ -0,0 +1,3 @@
+# openssl rand -base64 32
+ALCHEMY_STATE_TOKEN=your-generated-token-here
+ALCHEMY_PASSWORD=your-generated-password-here

apps/dashboard/alchemy.run.ts

@@ -0,0 +1,42 @@
+import alchemy from "alchemy";
+import { Vite } from "alchemy/cloudflare";
+import { GitHubComment } from "alchemy/github";
+import { CloudflareStateStore } from "alchemy/state";
+
+const app = await alchemy("realm-dashboard", {
+  stateStore:
+    process.env.NODE_ENV === "production"
+      ? (scope) =>
+          new CloudflareStateStore(scope, {
+            scriptName: "realm-api-state-store",
+          })
+      : undefined, // Uses default FileSystemStateStore
+  password: process.env.ALCHEMY_PASSWORD,
+});
+
+const worker = await Vite("dashboard", {
+  name: `realm-dashboard-${app.stage}`,
+  bindings: {
+    VITE_PUBLIC_API_URL: process.env.API_URL || "http://localhost:3000",
+  },
+  domains: app.stage === "prod" ? ["dash.ahargunyllib.dev"] : undefined,
+});
+
+if (process.env.PULL_REQUEST) {
+  // if this is a PR, add a comment to the PR with the preview URL
+  // it will auto-update with each push
+  await GitHubComment("preview-comment", {
+    owner: "ahargunyllib",
+    repository: "realm",
+    issueNumber: Number(process.env.PULL_REQUEST),
+    body: `### Preview Deployment
+
+**Commit:** \`${process.env.GITHUB_SHA}\`
+**Preview URL:** ${worker.url}
+**Deployed at:** ${new Date().toUTCString()}`,
+  });
+}
+
+console.log(`Dashboard deployed at: ${worker.url}`);
+
+await app.finalize();

apps/dashboard/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Realm Dashboard</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" async src="/src/main.tsx"></script>
+  </body>
+</html>

apps/dashboard/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "dashboard",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "alchemy dev --app realm-dashboard",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@realm/api": "workspace:*",
+    "@realm/ui": "workspace:*",
+    "@tailwindcss/vite": "catalog:",
+    "@tanstack/react-form": "^1.28.6",
+    "@tanstack/react-query": "^5.96.1",
+    "@tanstack/react-router": "^1.168.10",
+    "@tanstack/react-router-devtools": "^1.166.11",
+    "@trpc/client": "catalog:",
+    "@trpc/tanstack-react-query": "^11.16.0",
+    "alchemy": "catalog:",
+    "lucide-react": "^1.7.0",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "sonner": "^2.0.7",
+    "superjson": "^2.2.6",
+    "tailwindcss": "catalog:",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@realm/tsconfig": "workspace:*",
+    "@tanstack/devtools-vite": "^0.6.0",
+    "@tanstack/router-plugin": "^1.167.12",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "^6.0.1",
+    "typescript": "catalog:",
+    "vite": "^8.0.3",
+    "vite-tsconfig-paths": "^6.1.1"
+  }
+}

apps/dashboard/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

apps/dashboard/src/features/todo/components/create-todo-form.tsx

@@ -0,0 +1,61 @@
+import { Button } from "@realm/ui/components/button";
+import { Field, FieldError, FieldGroup } from "@realm/ui/components/field";
+import { Input } from "@realm/ui/components/input";
+import { LoaderCircleIcon, PlusIcon } from "lucide-react";
+import { useCreateTodoForm } from "../hooks/use-create-todo-form";
+
+export function CreateTodoForm() {
+  const { form } = useCreateTodoForm();
+
+  return (
+    <form
+      className="flex flex-row gap-2"
+      id="create-todo-form"
+      onSubmit={(e) => {
+        e.preventDefault();
+        form.handleSubmit(e);
+      }}
+    >
+      <FieldGroup>
+        <form.Field name="title">
+          {(field) => {
+            const isInvalid =
+              field.state.meta.isTouched && !field.state.meta.isValid;
+
+            return (
+              <Field data-invalid={isInvalid}>
+                <Input
+                  aria-invalid={isInvalid}
+                  autoComplete="off"
+                  id={field.name}
+                  name={field.name}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  placeholder="New todo"
+                  value={field.state.value}
+                />
+                {isInvalid && <FieldError errors={field.state.meta.errors} />}
+              </Field>
+            );
+          }}
+        </form.Field>
+      </FieldGroup>
+      <form.Subscribe>
+        {({ isSubmitting }) => (
+          <Button
+            disabled={isSubmitting}
+            size="icon"
+            type="submit"
+            variant="outline"
+          >
+            {isSubmitting ? (
+              <LoaderCircleIcon className="animate-spin" />
+            ) : (
+              <PlusIcon />
+            )}
+          </Button>
+        )}
+      </form.Subscribe>
+    </form>
+  );
+}

apps/dashboard/src/features/todo/components/todo-card.tsx

@@ -0,0 +1,87 @@
+import { Button } from "@realm/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@realm/ui/components/card";
+import { Checkbox } from "@realm/ui/components/checkbox";
+import { Label } from "@realm/ui/components/label";
+import { LoaderCircleIcon, TrashIcon } from "lucide-react";
+import { useDeleteTodoForm } from "../hooks/use-delete-todo-form";
+import { useIsCompleteToggle } from "../hooks/use-is-complete-toggle";
+
+type Props = {
+  todo: {
+    id: string;
+    title: string;
+    isCompleted: boolean;
+    createdAt: string;
+    updatedAt: string;
+  };
+};
+
+export function TodoCard({ todo }: Props) {
+  const { toggle, isCompleted } = useIsCompleteToggle({ todo });
+  const { onDelete, isDeleting } = useDeleteTodoForm({ id: todo.id });
+
+  const formattedDate = new Date(todo.createdAt).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <span className={todo.isCompleted ? "line-through opacity-60" : ""}>
+            {todo.title}
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              checked={isCompleted}
+              id="isCompleted"
+              name="isCompleted"
+              onCheckedChange={() => {
+                toggle();
+              }}
+            />
+            <Label
+              className="text-muted-foreground text-xs"
+              htmlFor="isCompleted"
+            >
+              {isCompleted ? "Completed" : "Mark as complete"}
+            </Label>
+          </div>
+          <p className="text-muted-foreground text-xs">
+            Created: {formattedDate}
+          </p>
+        </div>
+      </CardContent>
+      <CardFooter className="justify-end">
+        <Button
+          disabled={isDeleting}
+          onClick={onDelete}
+          size="sm"
+          type="button"
+          variant="destructive"
+        >
+          {isDeleting ? (
+            <LoaderCircleIcon className="size-4 animate-spin" />
+          ) : (
+            <TrashIcon className="size-4" />
+          )}
+          Delete
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}