Initial commit: installable PWA hello world

React + TypeScript + Tailwind v4 + shadcn/ui frontend (client), Express + better-sqlite3 backend (server) in a pnpm workspace. Includes vite-plugin-pwa manifest, service worker, and iOS install meta tags. GET /api/hello increments a visit counter in SQLite; backend serves the built client in production.
2026-08-03 22:45:19 +02:00
commit 3785d08e97
38 changed files with 8405 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,34 @@
+# Dependencies
+node_modules/
+.pnpm-store/
+
+# Build output
+dist/
+build/
+*.tsbuildinfo
+
+# Local env
+.env
+.env.*
+!.env.example
+
+# SQLite database
+server/data/
+*.db
+*.sqlite
+*.sqlite3
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+
+# Editor / OS
+.vscode/*
+!.vscode/extensions.json
+.idea/
+.DS_Store
+*.swp
+
+# Local tool state (Kilo)
+.kilo/
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+auto-install-peers=true
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,154 @@
+# AGENTS.md — How to work in this project
+
+A guide for AI agents (and humans) contributing to **Pocket Pascal**, a small
+installable PWA with a React/shadcn frontend and an Express + SQLite backend.
+
+## 1. Overview
+
+- **Frontend (`client/`):** Vite + React + TypeScript, Tailwind CSS v4, shadcn/ui,
+  `vite-plugin-pwa` for the service worker + web manifest.
+- **Backend (`server/`):** Express + TypeScript (`tsx` in dev, `tsc` for the
+  production build) with `better-sqlite3` as the database.
+- **Workspace:** a single pnpm workspace with two packages: `client` and `server`.
+
+### Runtime model
+
+- **Dev:** run `pnpm dev` from the repo root. It starts both packages in parallel.
+  The Vite dev server (default `http://localhost:5173`) proxies `/api/*` to the
+  backend (`http://localhost:3001`), so there are no CORS issues.
+- **Prod / install test:** run `pnpm build && pnpm start`. The backend serves the
+  built client from `client/dist` (static files + SPA fallback), so a single
+  process on `http://localhost:3001` serves the whole app. This is the easiest way
+  to test PWA "Add to Home Screen".
+
+## 2. Prerequisites
+
+- **Node.js >= 22** (developed on Node 22).
+- **pnpm** (developed on 10.25). The root `package.json` pins the version via
+  `packageManager`.
+
+> `better-sqlite3` ships a native module. It is listed under
+> `pnpm.onlyBuiltDependencies` in the root `package.json`, so a normal
+> `pnpm install` compiles/fetches it automatically. If it ever fails to load, run
+> `pnpm rebuild better-sqlite3` (or from its `.pnpm` dir: `npx prebuild-install -r node`).
+
+## 3. First-time setup
+
+```bash
+pnpm install
+```
+
+## 4. Common commands
+
+Run these from the **repo root**:
+
+| Command         | What it does                                                        |
+| --------------- | ------------------------------------------------------------------- |
+| `pnpm dev`      | Start client + backend in parallel (concurrently).                  |
+| `pnpm build`    | Build the server (`tsc`) then the client (`tsc -b && vite build`).  |
+| `pnpm start`    | Run the production server (`node server/dist/index.js`).            |
+| `pnpm lint`     | Lint every workspace package.                                       |
+| `pnpm typecheck`| Type-check every workspace package (`tsc`).                         |
+
+Run these against a **single package** with the filter flag, e.g.:
+
+```bash
+pnpm --filter client dev
+pnpm --filter server dev
+pnpm --filter client build
+```
+
+## 5. Project layout
+
+```
+pocket-pascal/
+├─ package.json            # workspace root + orchestration scripts
+├─ pnpm-workspace.yaml     # packages: client, server
+├─ AGENTS.md
+├─ README.md
+├─ client/                 # Vite + React + Tailwind v4 + shadcn/ui (PWA)
+│  ├─ components.json      # shadcn config
+│  ├─ pwa-assets.config.ts # @vite-pwa/assets-generator config
+│  ├─ vite.config.ts       # react + tailwind + pwa + /api proxy + "@" alias
+│  └─ src/
+│     ├─ App.tsx           # Hello World UI (fetches /api/hello)
+│     ├─ lib/api.ts        # typed fetch helpers
+│     ├─ lib/utils.ts      # cn() helper (shadcn)
+│     └─ components/ui/    # shadcn components live here
+└─ server/                 # Express + better-sqlite3 (ESM, TypeScript)
+   ├─ .env.example
+   └─ src/
+      ├─ index.ts          # express app; serves client/dist in prod
+      ├─ db.ts             # opens SQLite, creates schema, exposes helpers
+      └─ routes/hello.ts   # GET /api/hello
+```
+
+## 6. Conventions
+
+- **Language:** TypeScript everywhere. The server is ESM (`"type": "module"`).
+- **Path alias (client):** `@/*` maps to `client/src/*` (configured in
+  `tsconfig.json`, `tsconfig.app.json`, and `vite.config.ts`). Prefer
+  `@/components/...`, `@/lib/...`.
+- **API contract:** all backend endpoints are prefixed with `/api`
+  (e.g. `GET /api/hello`, `GET /api/health`). The frontend calls them with
+  relative URLs (`fetch("/api/hello")`) so the Vite proxy and the prod static
+  server both work without extra config.
+- **Environment:** the backend reads `process.env.PORT` (default `3001`).
+  See `server/.env.example`.
+- **Styling:** Tailwind v4 + shadcn theme tokens (CSS variables in
+  `client/src/index.css`). Use shadcn primitives; reach for `cn()` in
+  `@/lib/utils` when composing classes.
+
+## 7. Database
+
+- The SQLite file lives at **`server/data/app.db`** (auto-created on first run;
+  the whole `server/data/` directory is gitignored).
+- There is **no migration tool**. Schema changes use idempotent statements
+  (`CREATE TABLE IF NOT EXISTS ...`) in `server/src/db.ts`, which runs on boot.
+- The demo `visits` table has a single enforced row (`id = 1`) holding a counter
+  that `GET /api/hello` increments.
+
+## 8. Adding a shadcn/ui component
+
+Run from the `client/` directory (it reads `components.json`):
+
+```bash
+cd client
+pnpm dlx shadcn@latest add <component>   # e.g. card, input, dialog
+```
+
+The component is written to `client/src/components/ui/`. shadcn was initialized
+with the **neutral** base color and the **base-nova** style.
+
+## 9. Regenerating PWA icons
+
+Icons are generated from `client/public/icon.svg` via `@vite-pwa/assets-generator`:
+
+```bash
+cd client
+pnpm dlx @vite-pwa/assets-generator        # uses pwa-assets.config.ts
+```
+
+Outputs land in `client/public/` (`pwa-*.png`, `maskable-icon-*.png`,
+`apple-touch-icon-*.png`). The manifest in `vite.config.ts` references them.
+
+## 10. PWA / install notes
+
+- iOS Safari needs the meta tags already in `client/index.html`
+  (`apple-mobile-web-app-capable`, `apple-touch-icon`, etc.) and a valid icon set.
+- Service worker + manifest are produced by `vite-plugin-pwa`. To verify
+  installability: `pnpm build && pnpm start`, open `http://localhost:3001`, then
+  DevTools → Application → Manifest / Service Workers. Real-device install off
+  localhost requires HTTPS.
+
+## 11. Before you finish a change
+
+Always run, from the repo root:
+
+```bash
+pnpm typecheck
+pnpm lint
+pnpm build
+```
+
+Then sanity-check `pnpm dev` (or `pnpm build && pnpm start`) end to end.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,47 @@
+# Pocket Pascal
+
+A minimal, installable **Progressive Web App** that renders "Hello, World!" and
+reads/writes a visit counter in **SQLite** via a small Express backend.
+
+- **Frontend:** Vite + React + TypeScript + Tailwind v4 + shadcn/ui
+- **Backend:** Express + TypeScript + better-sqlite3
+- **PWA:** installable on Android (Chrome) and iOS (Safari), works offline
+
+## Quick start
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Open <http://localhost:5173>. The Vite dev server proxies `/api` to the backend on
+port 3001, and the visit counter increments on each load (proving the SQLite
+round-trip).
+
+## Production / install test
+
+```bash
+pnpm build
+pnpm start
+```
+
+Open <http://localhost:3001> — the backend serves the built client. Use
+DevTools → Application → Manifest to confirm PWA installability, then
+"Add to Home Screen". (On a real device, off localhost, HTTPS is required.)
+
+## Scripts
+
+| Command         | Description                                    |
+| --------------- | ---------------------------------------------- |
+| `pnpm dev`      | Run client + backend concurrently              |
+| `pnpm build`    | Build both packages                            |
+| `pnpm start`    | Run the production backend (serves the client) |
+| `pnpm lint`     | Lint all packages                              |
+| `pnpm typecheck`| Type-check all packages                        |
+
+See [`AGENTS.md`](./AGENTS.md) for the full contributor guide.
+
+## Requirements
+
+- Node.js >= 22
+- pnpm
--- a/client/.gitignore
+++ b/client/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/client/.oxlintrc.json
+++ b/client/.oxlintrc.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
--- a/client/README.md
+++ b/client/README.md
@@ -0,0 +1,32 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the Oxlint configuration
+
+If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+
+```json
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "options": {
+    "typeAware": true
+  },
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["warn", { "allowConstantExport": true }]
+  }
+}
+```
+
+See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
--- a/client/components.json
+++ b/client/components.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
--- a/client/index.html
+++ b/client/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <meta name="description" content="A simple Hello World PWA with a React frontend and SQLite backend." />
+
+    <!-- PWA / iOS -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="Pocket Pascal" />
+    <meta name="theme-color" content="#0a0a0a" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
+    <link rel="manifest" href="/manifest.webmanifest" />
+
+    <title>Pocket Pascal</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/client/package.json
+++ b/client/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "oxlint",
+    "typecheck": "tsc -b",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.28.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "shadcn": "^4.16.1",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
+    "vite-plugin-pwa": "^1.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.4",
+    "oxlint": "^1.75.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.0"
+  }
+}
--- a/client/public/apple-touch-icon-180x180.png
+++ b/client/public/apple-touch-icon-180x180.png
--- a/client/public/favicon.ico
+++ b/client/public/favicon.ico
--- a/client/public/favicon.svg
+++ b/client/public/favicon.svg
--- a/client/public/icon.svg
+++ b/client/public/icon.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
+  <rect width="1024" height="1024" rx="224" fill="#0a0a0a" />
+  <path
+    d="M372 712V312h168c92 0 152 44 152 124 0 82-62 130-156 130h-66v146h-98zm98-220h64c42 0 64-20 64-56 0-36-22-54-64-54h-64v110z"
+    fill="#fafafa"
+  />
+</svg>
--- a/client/public/maskable-icon-512x512.png
+++ b/client/public/maskable-icon-512x512.png
--- a/client/public/pwa-192x192.png
+++ b/client/public/pwa-192x192.png
--- a/client/public/pwa-512x512.png
+++ b/client/public/pwa-512x512.png
--- a/client/public/pwa-64x64.png
+++ b/client/public/pwa-64x64.png
--- a/client/pwa-assets.config.ts
+++ b/client/pwa-assets.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig, minimal2023Preset } from '@vite-pwa/assets-generator/config'
+
+export default defineConfig({
+  preset: minimal2023Preset,
+  images: ['public/icon.svg'],
+})
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -0,0 +1,66 @@
+import { useCallback, useEffect, useState } from "react"
+import { RefreshCw } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { fetchHello, type HelloResponse } from "@/lib/api"
+
+export default function App() {
+  const [data, setData] = useState<HelloResponse | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      setData(await fetchHello())
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong")
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  return (
+    <main className="dark:bg-background dark:text-foreground flex min-h-svh flex-col items-center justify-center bg-background gap-6 p-6 text-center">
+      <div className="flex max-w-sm flex-col items-center gap-6">
+        <span className="bg-primary/10 text-primary rounded-full px-3 py-1 text-xs font-medium">
+          Pocket Pascal
+        </span>
+
+        <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
+          {data?.message ?? "Hello, World!"}
+        </h1>
+
+        <p className="text-muted-foreground text-sm">
+          A minimal installable PWA. React + shadcn/ui on the front, Express +
+          SQLite on the back.
+        </p>
+
+        <div className="bg-muted text-muted-foreground flex w-full flex-col gap-1 rounded-lg border p-4 text-sm">
+          {loading ? (
+            <span>Asking the server…</span>
+          ) : error ? (
+            <span className="text-destructive">{error}</span>
+          ) : (
+            <>
+              <span className="text-foreground text-2xl font-semibold">
+                {data?.visits.toLocaleString()}
+              </span>
+              <span>times this hello has been said</span>
+            </>
+          )}
+        </div>
+
+        <Button onClick={() => void load()} disabled={loading}>
+          <RefreshCw className={loading ? "animate-spin" : undefined} />
+          Say it again
+        </Button>
+      </div>
+    </main>
+  )
+}
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+}
--- a/client/src/lib/api.ts
+++ b/client/src/lib/api.ts
@@ -0,0 +1,13 @@
+export type HelloResponse = {
+  message: string
+  visits: number
+  ts: string
+}
+
+export async function fetchHello(signal?: AbortSignal): Promise<HelloResponse> {
+  const res = await fetch("/api/hello", { signal })
+  if (!res.ok) {
+    throw new Error(`Request failed with status ${res.status}`)
+  }
+  return (await res.json()) as HelloResponse
+}
--- a/client/src/lib/utils.ts
+++ b/client/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/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Path aliases */
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/client/tsconfig.node.json
+++ b/client/tsconfig.node.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -0,0 +1,62 @@
+import path from 'node:path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import { VitePWA } from 'vite-plugin-pwa'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'favicon.ico', 'apple-touch-icon-180x180.png'],
+      manifest: {
+        name: 'Pocket Pascal',
+        short_name: 'Pocket Pascal',
+        description: 'A simple Hello World PWA with a React frontend and SQLite backend.',
+        theme_color: '#0a0a0a',
+        background_color: '#0a0a0a',
+        display: 'standalone',
+        start_url: '/',
+        icons: [
+          {
+            src: 'pwa-64x64.png',
+            sizes: '64x64',
+            type: 'image/png',
+          },
+          {
+            src: 'pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: 'pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: 'maskable-icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
+        ],
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(import.meta.dirname, './src'),
+    },
+  },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3001',
+        changeOrigin: true,
+      },
+    },
+  },
+})
--- a/package.json
+++ b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "pocket-pascal",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "concurrently -n client,server -c blue,green \"pnpm --filter client dev\" \"pnpm --filter server dev\"",
+    "build": "pnpm --filter server build && pnpm --filter client build",
+    "start": "pnpm --filter server start",
+    "lint": "pnpm -r lint",
+    "typecheck": "pnpm -r typecheck"
+  },
+  "devDependencies": {
+    "concurrently": "^9.1.0"
+  },
+  "packageManager": "pnpm@10.25.0",
+  "engines": {
+    "node": ">=22"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": ["better-sqlite3", "esbuild"]
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - client
+  - server
--- a/server/.env.example
+++ b/server/.env.example
@@ -0,0 +1,2 @@
+# Port the backend listens on (defaults to 3001)
+PORT=3001
--- a/server/package.json
+++ b/server/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "server",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "better-sqlite3": "^11.8.1",
+    "express": "^4.21.2"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/express": "^5.0.0",
+    "@types/node": "^24.13.3",
+    "tsx": "^4.19.3",
+    "typescript": "^5.7.3"
+  }
+}
--- a/server/src/db.ts
+++ b/server/src/db.ts
@@ -0,0 +1,35 @@
+import Database from "better-sqlite3"
+import fs from "node:fs"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const dataDir = path.resolve(__dirname, "../data")
+fs.mkdirSync(dataDir, { recursive: true })
+
+const dbPath = path.join(dataDir, "app.db")
+
+export const db = new Database(dbPath)
+db.pragma("journal_mode = WAL")
+
+db.exec(`
+  CREATE TABLE IF NOT EXISTS visits (
+    id INTEGER PRIMARY KEY CHECK (id = 1),
+    count INTEGER NOT NULL DEFAULT 0
+  )
+`)
+
+const existing = db
+  .prepare("SELECT count FROM visits WHERE id = 1")
+  .get() as { count: number } | undefined
+
+if (!existing) {
+  db.prepare("INSERT INTO visits (id, count) VALUES (1, 0)").run()
+}
+
+export function incrementAndGetVisits(): number {
+  db.prepare("UPDATE visits SET count = count + 1 WHERE id = 1").run()
+  const row = db.prepare("SELECT count FROM visits WHERE id = 1").get() as { count: number }
+  return row.count
+}
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -0,0 +1,32 @@
+import express from "express"
+import fs from "node:fs"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { helloRouter } from "./routes/hello.js"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const app = express()
+const PORT = process.env.PORT ? Number(process.env.PORT) : 3001
+
+app.use(express.json())
+
+app.get("/api/health", (_req, res) => {
+  res.json({ ok: true })
+})
+
+app.use("/api", helloRouter)
+
+// In production, serve the built client (client/dist) and fall back to index.html.
+const clientDist = path.resolve(__dirname, "../../client/dist")
+if (fs.existsSync(clientDist)) {
+  app.use(express.static(clientDist))
+  app.get("*", (_req, res) => {
+    res.sendFile(path.join(clientDist, "index.html"))
+  })
+}
+
+app.listen(PORT, () => {
+  console.log(`Pocket Pascal server listening on http://localhost:${PORT}`)
+})
--- a/server/src/routes/hello.ts
+++ b/server/src/routes/hello.ts
@@ -0,0 +1,14 @@
+import { Router } from "express"
+
+import { incrementAndGetVisits } from "../db.js"
+
+export const helloRouter = Router()
+
+helloRouter.get("/hello", (_req, res) => {
+  const visits = incrementAndGetVisits()
+  res.json({
+    message: "Hello, World!",
+    visits,
+    ts: new Date().toISOString(),
+  })
+})
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2023"],
+    "types": ["node"],
+
+    "rootDir": "src",
+    "outDir": "dist",
+    "sourceMap": true,
+    "declaration": false,
+
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}