Implement Todo management features and enhance dashboard application

.github/workflows/api-deployment.yaml

@@ -14,7 +14,7 @@ on:
       - "!**/README*"
 
 concurrency:
-  group: preview-${{ github.event.pull_request.number }}-${{ github.sha }}
+  group: api-${{ github.event.pull_request.number }}-${{ github.sha }}
   cancel-in-progress: false
 
 env:

.github/workflows/dashboard-deployment.yaml

@@ -0,0 +1,117 @@
+name: Dashboard Deployment
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - main
+    paths:
+      - "apps/dashboard/**"
+      - "packages/**"
+      - "package.json"
+      - "pnpm-lock.yaml"
+      - "!**/*.md"
+      - "!**/README*"
+
+concurrency:
+  group: dashboard-${{ github.event.pull_request.number }}-${{ github.sha }}
+  cancel-in-progress: false
+
+env:
+  STAGE: ${{ github.event_name == 'pull_request' && format('pr-{0}', github.event.number) || (github.ref == 'refs/heads/main' && 'prod' || github.ref_name) }}
+
+jobs:
+  deploy:
+    if: ${{ github.event.action != 'closed' }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v5
+        with:
+          version: "10.14.0"
+
+      - name: Cache pnpm store
+        uses: actions/cache@v5
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Deploy
+        working-directory: apps/dashboard
+        run: pnpm dlx alchemy deploy --stage ${{ env.STAGE }}
+        env:
+          ALCHEMY_PASSWORD: ${{ secrets.ALCHEMY_PASSWORD }}
+          ALCHEMY_STATE_TOKEN: ${{ secrets.ALCHEMY_STATE_TOKEN }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_EMAIL: ${{ secrets.CLOUDFLARE_EMAIL }}
+          PULL_REQUEST: ${{ github.event.number }}
+          GITHUB_SHA: ${{ github.sha }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_ENV: production
+
+  cleanup:
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'pull_request' && github.event.action == 'closed' }}
+    permissions:
+      id-token: write
+      contents: read
+      pull-requests: write
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v5
+        with:
+          version: "10.14.0"
+
+      - name: Cache pnpm store
+        uses: actions/cache@v5
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Safety Check
+        run: |-
+          if [ "${{ env.STAGE }}" = "prod" ]; then
+            echo "ERROR: Cannot destroy prod environment in cleanup job"
+            exit 1
+          fi
+
+      - name: Destroy Preview Environment
+        working-directory: apps/dashboard
+        run: pnpm dlx alchemy destroy --stage ${{ env.STAGE }}
+        env:
+          ALCHEMY_PASSWORD: ${{ secrets.ALCHEMY_PASSWORD }}
+          ALCHEMY_STATE_TOKEN: ${{ secrets.ALCHEMY_STATE_TOKEN }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          CLOUDFLARE_EMAIL: ${{ secrets.CLOUDFLARE_EMAIL }}
+          PULL_REQUEST: ${{ github.event.number }}
+          NODE_ENV: production

.github/workflows/preview-www-deployment.yaml

@@ -14,7 +14,7 @@ on:
       - '!**/README*'
 
 concurrency:
-  group: preview-${{ github.event.pull_request.number }}-${{ github.sha }}
+  group: preview-www-${{ github.event.pull_request.number }}-${{ github.sha }}
   cancel-in-progress: false
 
 jobs:

.github/workflows/production-www-deployment.yaml

@@ -14,7 +14,7 @@ on:
       - '!**/README*'
 
 concurrency:
-  group: production-main
+  group: production-www
   cancel-in-progress: true
 
 jobs:

.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, KVNamespace, Worker } from "alchemy/cloudflare";
 import { GitHubComment } from "alchemy/github";
 import { CloudflareStateStore } from "alchemy/state";
 
@@ -14,12 +14,27 @@ const app = await alchemy("realm-api", {
   password: process.env.ALCHEMY_PASSWORD,
 });
 
+const db = await D1Database("db", {
+  name: `realm-db-${app.stage}`,
+  migrationsDir: "./node_modules/@realm/db/migrations",
+});
+
+const kv = await KVNamespace("kv", {
+  title: `realm-kv-${app.stage}`,
+});
+
 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,
+    KV: kv,
+  },
+  bundle: {
+    external: ["bun:sqlite", "@libsql/client"],
+  },
   observability: {
     enabled: true,
     logs: {
@@ -34,7 +49,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,12 @@
     "dev": "alchemy dev --app realm-api"
   },
   "dependencies": {
+    "@hono/trpc-server": "^0.4.2",
+    "@realm/api": "workspace:*",
+    "@realm/db": "workspace:*",
+    "@realm/kv": "workspace:*",
+    "@realm/logger": "workspace:*",
+    "@realm/utils": "workspace:*",
     "alchemy": "catalog:",
     "hono": "^4.7.9"
   },

apps/api/src/index.ts

@@ -1,8 +1,68 @@
+import { trpcServer } from "@hono/trpc-server";
+import { createContext, trpcRouter } from "@realm/api";
+import type { D1Database } from "@realm/db";
+import type { KVNamespaceType } from "@realm/kv";
+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;
+    KV: KVNamespaceType;
+  };
+}>();
+
+app.use(logger());
+app.use(
+  "/*",
+  cors({
+    origin: (origin) => {
+      // TODO: This is a temporary solution to allow CORS for localhost and our deployed domains. We should have a better solution for this in the future.
+      const allowedOrigins = [
+        "localhost",
+        "ahargunyllib.dev",
+        "ahargunyllib.workers.dev",
+      ];
+      if (
+        allowedOrigins.some((allowedOrigin) => origin.includes(allowedOrigin))
+      ) {
+        return origin;
+      }
+    },
+    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,
+          kv: c.env.KV,
+        },
+        fetchCreateContextFnOptions: opts,
+        logger: customLogger,
+        requestId,
+        waitUntil: c.executionCtx.waitUntil,
+      });
+    },
+  })
+);
+
+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>