Daily Quote: Vite/React + MUI M3 frontend, Express API, Postgres, Zitadel auth, observability, backups

2026-07-20 16:43:47 +00:00 · 2026-07-20 16:43:47 +00:00 · 308a53fc08
commit 308a53fc08
43 changed files with 5028 additions and 0 deletions
--- a/.env.example
+++ b/.env.example
@ -0,0 +1,3 @@
+PUBLIC_HOSTNAME=<vm-hostname>.exe.xyz
+ZITADEL_MASTERKEY=<32-char-random-string>
+ZITADEL_DB_PW=<random-password>
--- a/.gitea/workflows/ci.yml
+++ b/.gitea/workflows/ci.yml
@ -0,0 +1,32 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install client deps
+        working-directory: client
+        run: npm ci
+
+      - name: Build client
+        working-directory: client
+        run: npm run build
+
+      - name: Install server deps
+        working-directory: server
+        run: npm ci
+
+      - name: Syntax-check server
+        working-directory: server
+        run: node --check src/index.js
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,9 @@
+node_modules/
+dist/
+.env
+.env.*
+!.env.example
+*.log
+.gitea-admin-pw
+.zitadel-secrets
+.zitadel-demo-user
--- a/README.md
+++ b/README.md
@ -0,0 +1,62 @@
+# Daily Quote
+
+A small full-stack "quote of the day" app, built for the privatecloud VM `private-cloud-daily-quote`.
+
+## Stack
+
+- **Frontend**: Vite + React, styled with [MUI](https://mui.com) using a Material Design 3 theme (color roles, type scale, shape/elevation).
+- **API**: Express (Node.js), serving both `/api/*` and the built SPA on port **3000**.
+- **Database**: Postgres 16, run via Docker Compose (`quotes`, `users`, `favorites` tables — see `db/init.sql`).
+- **Platform auth**: [Zitadel](https://zitadel.com), self-hosted via Docker, OIDC Authorization Code + PKCE. Gates "submit a quote" and "favorites"; browsing is public.
+- **Git hosting**: [Gitea](https://gitea.io), self-hosted via Docker (this repo's `origin`).
+- **CI/CD**: Gitea Actions, using a local `act_runner` container. See `.gitea/workflows/ci.yml`.
+- **Observability**: `prom-client` metrics at `/api/metrics`, scraped by Prometheus, visualized in a provisioned Grafana dashboard.
+- **Backup**: nightly `pg_dump` via a systemd timer (`quoteapp-backup.timer`), 7-day retention, dumps to `~/backups`.
+
+## Local services (Docker)
+
+| Service     | Internal port | Host port | Notes |
+|-------------|---------------|-----------|-------|
+| Postgres    | 5432          | 5432 (loopback only) | app + zitadel databases |
+| Zitadel     | 8080          | 8080      | public via `https://<host>:8080` |
+| Gitea       | 3000          | 3001      | public via `https://<host>:3001` |
+| Gitea SSH   | 22            | 2222 (loopback only) | |
+| act_runner  | -             | -         | registered against Gitea Actions |
+| Prometheus  | 9090          | 9090 (loopback only) | |
+| Grafana     | 3000          | 3002      | public via `https://<host>:3002`, `admin`/`admin` |
+
+Bring the stack up with:
+
+```sh
+docker compose up -d
+```
+
+## Running the app
+
+The app itself runs directly on the VM (not in Docker) as a systemd service on port 3000:
+
+```sh
+sudo systemctl status quote-app
+```
+
+To rebuild after a frontend change:
+
+```sh
+cd client && npm run build
+sudo systemctl restart quote-app
+```
+
+## Auth notes
+
+Zitadel is reachable at `https://<vm-host>:8080`. Since exe.dev's proxy only marks one
+port ("3000", the app) fully public, signing in requires being an authorized user of
+this workspace to reach the Zitadel login page on port 8080 — browsing and reading
+quotes on the main app is public regardless. A demo user (`demo`) was created for
+testing; see `.zitadel-demo-user` (not committed) for its password.
+
+## Backups
+
+```sh
+./backup/backup.sh          # run manually
+systemctl list-timers quoteapp-backup.timer
+```
--- a/backup/backup.sh
+++ b/backup/backup.sh
@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+# Nightly Postgres backup for the Daily Quote app. Invoked by quoteapp-backup.timer.
+set -euo pipefail
+
+BACKUP_DIR="/home/exedev/backups"
+RETENTION_DAYS=7
+TIMESTAMP="$(date -u +%Y%m%dT%H%M%SZ)"
+FILE="$BACKUP_DIR/quoteapp-$TIMESTAMP.sql.gz"
+
+mkdir -p "$BACKUP_DIR"
+
+docker exec quoteapp-postgres pg_dump -U quoteapp -d quoteapp | gzip > "$FILE"
+
+find "$BACKUP_DIR" -name 'quoteapp-*.sql.gz' -mtime +"$RETENTION_DAYS" -delete
+
+echo "Backed up quoteapp database to $FILE"
--- 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", "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,16 @@
+# React + 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 using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and Oxlint's TypeScript related rules in your project.
--- a/client/index.html
+++ b/client/index.html
@ -0,0 +1,13 @@
+<!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" />
+    <title>client</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -0,0 +1,29 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@fontsource/roboto": "^5.3.0",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/material": "^9.2.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "oxlint": "^1.71.0",
+    "vite": "^8.1.1"
+  }
+}
--- a/client/public/favicon.svg
+++ b/client/public/favicon.svg
--- a/client/public/icons.svg
+++ b/client/public/icons.svg
@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@ -0,0 +1,82 @@
+import { NavLink, Route, Routes } from 'react-router-dom';
+import {
+  AppBar,
+  Avatar,
+  Box,
+  Button,
+  Container,
+  Tab,
+  Tabs,
+  Toolbar,
+  Typography,
+} from '@mui/material';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+import Today from './pages/Today';
+import Browse from './pages/Browse';
+import Submit from './pages/Submit';
+import Favorites from './pages/Favorites';
+import { useAuth } from './AuthContext';
+
+const NAV = [
+  { label: 'Today', path: '/' },
+  { label: 'Browse', path: '/browse' },
+  { label: 'Submit', path: '/submit' },
+  { label: 'Favorites', path: '/favorites' },
+];
+
+export default function App() {
+  const { user, logout, loading } = useAuth();
+  const pathToIndex = (pathname) => {
+    const idx = NAV.findIndex((n) => n.path === pathname);
+    return idx === -1 ? 0 : idx;
+  };
+
+  return (
+    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
+      <AppBar position="sticky">
+        <Toolbar sx={{ gap: 2 }}>
+          <AutoAwesomeRoundedIcon color="primary" />
+          <Typography variant="h6" component="div" sx={{ flexGrow: 0, mr: 2 }}>
+            Daily Quote
+          </Typography>
+          <Tabs
+            value={pathToIndex(window.location.pathname)}
+            textColor="primary"
+            indicatorColor="primary"
+            sx={{ flexGrow: 1 }}
+          >
+            {NAV.map((n) => (
+              <Tab key={n.path} label={n.label} component={NavLink} to={n.path} />
+            ))}
+          </Tabs>
+          {!loading && user && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <Avatar sx={{ width: 28, height: 28, bgcolor: 'secondary.main', fontSize: 14 }}>
+                {(user.displayName || user.email || '?')[0].toUpperCase()}
+              </Avatar>
+              <Typography variant="body2" color="text.secondary" sx={{ display: { xs: 'none', sm: 'block' } }}>
+                {user.displayName || user.email}
+              </Typography>
+              <Button size="small" onClick={logout}>
+                Sign out
+              </Button>
+            </Box>
+          )}
+          {!loading && !user && (
+            <Button variant="outlined" href="/api/auth/login">
+              Sign in
+            </Button>
+          )}
+        </Toolbar>
+      </AppBar>
+      <Container maxWidth="md" sx={{ py: 4 }}>
+        <Routes>
+          <Route path="/" element={<Today />} />
+          <Route path="/browse" element={<Browse />} />
+          <Route path="/submit" element={<Submit />} />
+          <Route path="/favorites" element={<Favorites />} />
+        </Routes>
+      </Container>
+    </Box>
+  );
+}
--- a/client/src/AuthContext.jsx
+++ b/client/src/AuthContext.jsx
@ -0,0 +1,39 @@
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { api } from './api';
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    try {
+      const data = await api.me();
+      setUser(data.authenticated ? data.user : null);
+    } catch {
+      setUser(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const logout = useCallback(async () => {
+    await api.logout();
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, loading, refresh, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}
--- a/client/src/api.js
+++ b/client/src/api.js
@ -0,0 +1,25 @@
+const BASE = '/api';
+
+async function request(path, options = {}) {
+  const res = await fetch(`${BASE}${path}`, {
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'same-origin',
+    ...options,
+  });
+  if (res.status === 204) return null;
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.error || `Request failed (${res.status})`);
+  return data;
+}
+
+export const api = {
+  today: () => request('/quotes/today'),
+  list: () => request('/quotes'),
+  submit: (text, author) =>
+    request('/quotes', { method: 'POST', body: JSON.stringify({ text, author }) }),
+  me: () => request('/auth/me'),
+  logout: () => request('/auth/logout', { method: 'POST' }),
+  favorites: () => request('/favorites'),
+  addFavorite: (quoteId) => request(`/favorites/${quoteId}`, { method: 'PUT' }),
+  removeFavorite: (quoteId) => request(`/favorites/${quoteId}`, { method: 'DELETE' }),
+};
--- a/client/src/index.css
+++ b/client/src/index.css
@ -0,0 +1,11 @@
+:root {
+  color-scheme: light;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@ -0,0 +1,25 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+import './index.css';
+import App from './App.jsx';
+import { theme } from './theme.js';
+import { AuthProvider } from './AuthContext.jsx';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <BrowserRouter>
+        <AuthProvider>
+          <App />
+        </AuthProvider>
+      </BrowserRouter>
+    </ThemeProvider>
+  </StrictMode>
+);
--- a/client/src/pages/Browse.jsx
+++ b/client/src/pages/Browse.jsx
@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react';
+import {
+  Alert,
+  Box,
+  Card,
+  CardContent,
+  Grid,
+  IconButton,
+  Skeleton,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import { api } from '../api';
+import { useAuth } from '../AuthContext';
+
+export default function Browse() {
+  const { user } = useAuth();
+  const [quotes, setQuotes] = useState(null);
+  const [favoriteIds, setFavoriteIds] = useState(new Set());
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    api.list().then(setQuotes).catch((err) => setError(err.message));
+  }, []);
+
+  useEffect(() => {
+    if (!user) {
+      setFavoriteIds(new Set());
+      return;
+    }
+    api
+      .favorites()
+      .then((rows) => setFavoriteIds(new Set(rows.map((r) => r.id))))
+      .catch(() => setFavoriteIds(new Set()));
+  }, [user]);
+
+  async function toggleFavorite(quoteId) {
+    if (!user) return;
+    const isFav = favoriteIds.has(quoteId);
+    try {
+      if (isFav) {
+        await api.removeFavorite(quoteId);
+      } else {
+        await api.addFavorite(quoteId);
+      }
+      setFavoriteIds((prev) => {
+        const next = new Set(prev);
+        isFav ? next.delete(quoteId) : next.add(quoteId);
+        return next;
+      });
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  return (
+    <Box>
+      <Typography variant="h4" component="h1" gutterBottom>
+        Browse quotes
+      </Typography>
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError('')}>
+          {error}
+        </Alert>
+      )}
+      <Grid container spacing={2}>
+        {quotes === null &&
+          Array.from({ length: 6 }).map((_, i) => (
+            <Grid key={i} size={{ xs: 12, sm: 6, md: 4 }}>
+              <Skeleton variant="rounded" height={160} />
+            </Grid>
+          ))}
+        {quotes?.map((q) => (
+          <Grid key={q.id} size={{ xs: 12, sm: 6, md: 4 }}>
+            <Card variant="outlined" sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+              <CardContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
+                <Typography variant="body1" sx={{ flexGrow: 1 }}>
+                  “{q.text}”
+                </Typography>
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <Typography variant="body2" color="text.secondary">
+                    — {q.author}
+                  </Typography>
+                  <Tooltip title={user ? 'Toggle favorite' : 'Sign in to favorite'}>
+                    <span>
+                      <IconButton
+                        size="small"
+                        disabled={!user}
+                        onClick={() => toggleFavorite(q.id)}
+                      >
+                        {favoriteIds.has(q.id) ? (
+                          <FavoriteIcon fontSize="small" sx={{ color: 'tertiary.main' }} />
+                        ) : (
+                          <FavoriteBorderIcon fontSize="small" />
+                        )}
+                      </IconButton>
+                    </span>
+                  </Tooltip>
+                </Box>
+              </CardContent>
+            </Card>
+          </Grid>
+        ))}
+      </Grid>
+    </Box>
+  );
+}
--- a/client/src/pages/Favorites.jsx
+++ b/client/src/pages/Favorites.jsx
@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import { Box, Button, Card, CardContent, Stack, Typography } from '@mui/material';
+import { api } from '../api';
+import { useAuth } from '../AuthContext';
+
+export default function Favorites() {
+  const { user, loading } = useAuth();
+  const [favorites, setFavorites] = useState(null);
+
+  useEffect(() => {
+    if (user) api.favorites().then(setFavorites).catch(() => setFavorites([]));
+  }, [user]);
+
+  if (loading) return null;
+
+  if (!user) {
+    return (
+      <Box sx={{ maxWidth: 480, mx: 'auto', mt: 6, textAlign: 'center' }}>
+        <Typography variant="h5" gutterBottom>
+          Sign in to see your favorites
+        </Typography>
+        <Button variant="contained" href="/api/auth/login" sx={{ mt: 2 }}>
+          Sign in
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Typography variant="h4" gutterBottom>
+        Your favorites
+      </Typography>
+      {favorites?.length === 0 && (
+        <Typography color="text.secondary">
+          No favorites yet — browse quotes and tap the heart icon to save one.
+        </Typography>
+      )}
+      <Stack spacing={2}>
+        {favorites?.map((q) => (
+          <Card key={q.id} variant="outlined">
+            <CardContent>
+              <Typography variant="body1">“{q.text}”</Typography>
+              <Typography variant="body2" color="text.secondary">
+                — {q.author}
+              </Typography>
+            </CardContent>
+          </Card>
+        ))}
+      </Stack>
+    </Box>
+  );
+}
--- a/client/src/pages/Submit.jsx
+++ b/client/src/pages/Submit.jsx
@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { Alert, Box, Button, Card, CardContent, Stack, TextField, Typography } from '@mui/material';
+import { api } from '../api';
+import { useAuth } from '../AuthContext';
+
+export default function Submit() {
+  const { user, loading } = useAuth();
+  const [text, setText] = useState('');
+  const [author, setAuthor] = useState('');
+  const [status, setStatus] = useState(null);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setStatus(null);
+    try {
+      await api.submit(text, author);
+      setText('');
+      setAuthor('');
+      setStatus({ severity: 'success', message: 'Thanks! Your quote was added.' });
+    } catch (err) {
+      setStatus({ severity: 'error', message: err.message });
+    }
+  }
+
+  if (loading) return null;
+
+  if (!user) {
+    return (
+      <Box sx={{ maxWidth: 480, mx: 'auto', mt: 6, textAlign: 'center' }}>
+        <Typography variant="h5" gutterBottom>
+          Sign in to submit a quote
+        </Typography>
+        <Typography color="text.secondary" sx={{ mb: 3 }}>
+          Quote submissions are linked to your account via platform auth.
+        </Typography>
+        <Button variant="contained" href="/api/auth/login">
+          Sign in
+        </Button>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ maxWidth: 560, mx: 'auto' }}>
+      <Typography variant="h4" gutterBottom>
+        Submit a quote
+      </Typography>
+      <Card variant="outlined">
+        <CardContent>
+          <Box component="form" onSubmit={handleSubmit}>
+            <Stack spacing={2}>
+              {status && <Alert severity={status.severity}>{status.message}</Alert>}
+              <TextField
+                label="Quote"
+                multiline
+                minRows={3}
+                required
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+              />
+              <TextField
+                label="Author"
+                placeholder="Anonymous"
+                value={author}
+                onChange={(e) => setAuthor(e.target.value)}
+              />
+              <Button type="submit" variant="contained" size="large">
+                Submit
+              </Button>
+            </Stack>
+          </Box>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+}
--- a/client/src/pages/Today.jsx
+++ b/client/src/pages/Today.jsx
@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { Box, Card, CardContent, CircularProgress, Stack, Typography } from '@mui/material';
+import FormatQuoteRoundedIcon from '@mui/icons-material/FormatQuoteRounded';
+import { api } from '../api';
+
+export default function Today() {
+  const [quote, setQuote] = useState(undefined);
+
+  useEffect(() => {
+    api.today().then(setQuote).catch(() => setQuote(null));
+  }, []);
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', mt: { xs: 4, sm: 8 } }}>
+      {quote === undefined && <CircularProgress />}
+      {quote === null && <Typography color="text.secondary">No quotes yet.</Typography>}
+      {quote && (
+        <Card
+          elevation={2}
+          sx={{
+            maxWidth: 640,
+            width: '100%',
+            bgcolor: 'primary.light',
+            px: { xs: 3, sm: 5 },
+            py: { xs: 4, sm: 6 },
+          }}
+        >
+          <CardContent>
+            <Stack spacing={3} alignItems="center" textAlign="center">
+              <Typography variant="overline" color="text.secondary" letterSpacing={2}>
+                Quote of the Day
+              </Typography>
+              <FormatQuoteRoundedIcon sx={{ fontSize: 40, color: 'primary.main' }} />
+              <Typography variant="h3" component="p">
+                {quote.text}
+              </Typography>
+              <Typography variant="h5" color="text.secondary">
+                — {quote.author}
+              </Typography>
+            </Stack>
+          </CardContent>
+        </Card>
+      )}
+    </Box>
+  );
+}
--- a/client/src/theme.js
+++ b/client/src/theme.js
@ -0,0 +1,93 @@
+import { createTheme } from '@mui/material/styles';
+
+// Material Design 3 baseline color roles (M3 "Purple" seed color),
+// mapped onto MUI's theme palette + a custom `tertiary` role.
+const m3 = {
+  primary: '#6750A4',
+  onPrimary: '#FFFFFF',
+  primaryContainer: '#EADDFF',
+  secondary: '#625B71',
+  secondaryContainer: '#E8DEF8',
+  tertiary: '#7D5260',
+  tertiaryContainer: '#FFD8E4',
+  error: '#B3261E',
+  errorContainer: '#F9DEDC',
+  background: '#FFFBFE',
+  surface: '#FFFBFE',
+  surfaceVariant: '#E7E0EC',
+  outline: '#79747E',
+  onSurface: '#1C1B1F',
+  onSurfaceVariant: '#49454F',
+};
+
+export const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: { main: m3.primary, contrastText: m3.onPrimary, light: m3.primaryContainer },
+    secondary: { main: m3.secondary, light: m3.secondaryContainer },
+    tertiary: { main: m3.tertiary, light: m3.tertiaryContainer },
+    error: { main: m3.error, light: m3.errorContainer },
+    background: { default: m3.background, paper: m3.surface },
+    text: { primary: m3.onSurface, secondary: m3.onSurfaceVariant },
+    divider: m3.outline,
+  },
+  shape: {
+    borderRadius: 16,
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    h1: { fontSize: '3.5rem', fontWeight: 400, lineHeight: 1.15, letterSpacing: '-0.25px' }, // Display Large
+    h2: { fontSize: '2.25rem', fontWeight: 400, lineHeight: 1.2 }, // Headline Large
+    h3: { fontSize: '1.75rem', fontWeight: 400, lineHeight: 1.25 }, // Headline Medium
+    h4: { fontSize: '1.5rem', fontWeight: 500, lineHeight: 1.3 }, // Title Large
+    h5: { fontSize: '1.25rem', fontWeight: 500 }, // Title Medium
+    h6: { fontSize: '1rem', fontWeight: 500 }, // Title Small
+    body1: { fontSize: '1rem', lineHeight: 1.5 },
+    body2: { fontSize: '0.875rem', lineHeight: 1.43 },
+    button: { textTransform: 'none', fontWeight: 500 },
+  },
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: m3.surface,
+          color: m3.onSurface,
+          boxShadow: 'none',
+          borderBottom: `1px solid ${m3.surfaceVariant}`,
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 20,
+        },
+      },
+      defaultProps: {
+        elevation: 1,
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 100, // M3 "full" shape for buttons
+        },
+      },
+      defaultProps: {
+        disableElevation: true,
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: { borderRadius: 8 },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+        },
+      },
+    },
+  },
+});
--- a/client/vite.config.js
+++ b/client/vite.config.js
@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000',
+    },
+  },
+})
--- a/db/init.sql
+++ b/db/init.sql
@ -0,0 +1,68 @@
+-- Daily Quote app schema
+
+CREATE TABLE IF NOT EXISTS users (
+  id SERIAL PRIMARY KEY,
+  sub TEXT UNIQUE NOT NULL,
+  email TEXT,
+  display_name TEXT,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS quotes (
+  id SERIAL PRIMARY KEY,
+  text TEXT NOT NULL,
+  author TEXT NOT NULL DEFAULT 'Unknown',
+  submitted_by INTEGER REFERENCES users(id) ON DELETE SET NULL,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);
+
+CREATE TABLE IF NOT EXISTS favorites (
+  user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  quote_id INTEGER NOT NULL REFERENCES quotes(id) ON DELETE CASCADE,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now(),
+  PRIMARY KEY (user_id, quote_id)
+);
+
+INSERT INTO quotes (text, author) VALUES
+('The only way to do great work is to love what you do.', 'Steve Jobs'),
+('Life is what happens to you while you''re busy making other plans.', 'John Lennon'),
+('In the middle of difficulty lies opportunity.', 'Albert Einstein'),
+('It does not matter how slowly you go as long as you do not stop.', 'Confucius'),
+('The journey of a thousand miles begins with a single step.', 'Lao Tzu'),
+('That which does not kill us makes us stronger.', 'Friedrich Nietzsche'),
+('Whether you think you can or you think you can''t, you''re right.', 'Henry Ford'),
+('The best way to predict the future is to invent it.', 'Alan Kay'),
+('Simplicity is the ultimate sophistication.', 'Leonardo da Vinci'),
+('Not all those who wander are lost.', 'J.R.R. Tolkien'),
+('The unexamined life is not worth living.', 'Socrates'),
+('I think, therefore I am.', 'René Descartes'),
+('What we think, we become.', 'Buddha'),
+('The only impossible journey is the one you never begin.', 'Tony Robbins'),
+('Believe you can and you''re halfway there.', 'Theodore Roosevelt'),
+('It always seems impossible until it''s done.', 'Nelson Mandela'),
+('The future belongs to those who believe in the beauty of their dreams.', 'Eleanor Roosevelt'),
+('Success is not final, failure is not fatal: it is the courage to continue that counts.', 'Winston Churchill'),
+('You miss 100% of the shots you don''t take.', 'Wayne Gretzky'),
+('The only limit to our realization of tomorrow is our doubts of today.', 'Franklin D. Roosevelt'),
+('Do one thing every day that scares you.', 'Eleanor Roosevelt'),
+('Everything you''ve ever wanted is on the other side of fear.', 'George Addair'),
+('Act as if what you do makes a difference. It does.', 'William James'),
+('Turn your wounds into wisdom.', 'Oprah Winfrey'),
+('Your time is limited, so don''t waste it living someone else''s life.', 'Steve Jobs'),
+('The mind is everything. What you think you become.', 'Buddha'),
+('Twenty years from now you will be more disappointed by the things you didn''t do than by the ones you did do.', 'Mark Twain'),
+('Either you run the day, or the day runs you.', 'Jim Rohn'),
+('The only person you are destined to become is the person you decide to be.', 'Ralph Waldo Emerson'),
+('Go confidently in the direction of your dreams. Live the life you have imagined.', 'Henry David Thoreau'),
+('Do not wait to strike till the iron is hot; but make it hot by striking.', 'William Butler Yeats'),
+('When one door of happiness closes, another opens.', 'Helen Keller'),
+('Everything has beauty, but not everyone can see.', 'Confucius'),
+('You can never cross the ocean until you have the courage to lose sight of the shore.', 'Christopher Columbus'),
+('Change your thoughts and you change your world.', 'Norman Vincent Peale'),
+('Nothing is impossible, the word itself says ''I''m possible''!', 'Audrey Hepburn'),
+('The best revenge is massive success.', 'Frank Sinatra'),
+('If you set your goals ridiculously high and it''s a failure, you will fail above everyone else''s success.', 'James Cameron'),
+('Life is 10% what happens to you and 90% how you react to it.', 'Charles R. Swindoll'),
+('The way to get started is to quit talking and begin doing.', 'Walt Disney'),
+('Don''t let yesterday take up too much of today.', 'Will Rogers')
+ON CONFLICT DO NOTHING;
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,121 @@
+services:
+  postgres:
+    image: postgres:16-alpine
+    container_name: quoteapp-postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: quoteapp
+      POSTGRES_PASSWORD: quoteapp
+      POSTGRES_DB: quoteapp
+    ports:
+      - "127.0.0.1:5432:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+      - ./db/init.sql:/docker-entrypoint-initdb.d/01-init.sql:ro
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U quoteapp"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+  zitadel:
+    image: ghcr.io/zitadel/zitadel:latest
+    container_name: quoteapp-zitadel
+    restart: unless-stopped
+    command: 'start-from-init --masterkeyFromEnv --tlsMode external'
+    depends_on:
+      postgres:
+        condition: service_healthy
+    environment:
+      ZITADEL_MASTERKEY: ${ZITADEL_MASTERKEY}
+      ZITADEL_DATABASE_POSTGRES_HOST: postgres
+      ZITADEL_DATABASE_POSTGRES_PORT: "5432"
+      ZITADEL_DATABASE_POSTGRES_DATABASE: zitadel
+      ZITADEL_DATABASE_POSTGRES_USER_USERNAME: zitadel
+      ZITADEL_DATABASE_POSTGRES_USER_PASSWORD: ${ZITADEL_DB_PW}
+      ZITADEL_DATABASE_POSTGRES_USER_SSL_MODE: disable
+      ZITADEL_DATABASE_POSTGRES_ADMIN_USERNAME: quoteapp
+      ZITADEL_DATABASE_POSTGRES_ADMIN_PASSWORD: quoteapp
+      ZITADEL_DATABASE_POSTGRES_ADMIN_SSL_MODE: disable
+      ZITADEL_EXTERNALDOMAIN: ${PUBLIC_HOSTNAME}
+      ZITADEL_EXTERNALPORT: "8080"
+      ZITADEL_EXTERNALSECURE: "true"
+      ZITADEL_FIRSTINSTANCE_ORG_NAME: quoteapp
+      ZITADEL_FIRSTINSTANCE_ORG_MACHINE_MACHINE_USERNAME: bootstrap-admin
+      ZITADEL_FIRSTINSTANCE_ORG_MACHINE_MACHINE_NAME: Bootstrap Admin
+      ZITADEL_FIRSTINSTANCE_ORG_MACHINE_PAT_EXPIRATIONDATE: "2030-01-01T00:00:00Z"
+      ZITADEL_FIRSTINSTANCE_PATPATH: /bootstrap/admin.pat
+      ZITADEL_MACHINE_IDENTIFICATION_HOSTNAME_ENABLED: "true"
+    ports:
+      - "8080:8080"
+    volumes:
+      - zitadel_bootstrap:/bootstrap
+
+  gitea:
+    image: gitea/gitea:1.22
+    container_name: quoteapp-gitea
+    restart: unless-stopped
+    environment:
+      GITEA__server__DOMAIN: ${PUBLIC_HOSTNAME}
+      GITEA__server__ROOT_URL: https://${PUBLIC_HOSTNAME}:3001/
+      GITEA__server__HTTP_PORT: 3000
+      GITEA__server__SSH_PORT: 2222
+      GITEA__security__INSTALL_LOCK: "true"
+      GITEA__service__DISABLE_REGISTRATION: "true"
+      GITEA__database__DB_TYPE: sqlite3
+      GITEA__actions__ENABLED: "true"
+    ports:
+      - "3001:3000"
+      - "127.0.0.1:2222:22"
+    volumes:
+      - gitea_data:/data
+
+  gitea-runner:
+    image: gitea/act_runner:latest
+    container_name: quoteapp-gitea-runner
+    restart: unless-stopped
+    depends_on:
+      - gitea
+    environment:
+      GITEA_INSTANCE_URL: http://gitea:3000
+      GITEA_RUNNER_REGISTRATION_TOKEN_FILE: /data/token
+      GITEA_RUNNER_NAME: vm-runner
+    volumes:
+      - gitea_runner_data:/data
+      - /var/run/docker.sock:/var/run/docker.sock
+
+  prometheus:
+    image: prom/prometheus:latest
+    container_name: quoteapp-prometheus
+    restart: unless-stopped
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
+    volumes:
+      - ./observability/prometheus.yml:/etc/prometheus/prometheus.yml:ro
+      - prometheus_data:/prometheus
+    ports:
+      - "127.0.0.1:9090:9090"
+
+  grafana:
+    image: grafana/grafana:latest
+    container_name: quoteapp-grafana
+    restart: unless-stopped
+    environment:
+      GF_SECURITY_ADMIN_USER: admin
+      GF_SECURITY_ADMIN_PASSWORD: admin
+      GF_USERS_ALLOW_SIGN_UP: "false"
+    volumes:
+      - ./observability/grafana/provisioning:/etc/grafana/provisioning:ro
+      - grafana_data:/var/lib/grafana
+    ports:
+      - "3002:3000"
+    depends_on:
+      - prometheus
+
+volumes:
+  postgres_data:
+  zitadel_bootstrap:
+  gitea_data:
+  gitea_runner_data:
+  prometheus_data:
+  grafana_data:
--- a/observability/grafana/provisioning/dashboards/daily-quote.json
+++ b/observability/grafana/provisioning/dashboards/daily-quote.json
@ -0,0 +1,49 @@
+{
+  "title": "Daily Quote — App Metrics",
+  "uid": "daily-quote-app",
+  "timezone": "browser",
+  "schemaVersion": 39,
+  "version": 1,
+  "refresh": "30s",
+  "time": { "from": "now-6h", "to": "now" },
+  "panels": [
+    {
+      "id": 1,
+      "title": "HTTP requests / sec",
+      "type": "timeseries",
+      "gridPos": { "h": 8, "w": 12, "x": 0, "y": 0 },
+      "targets": [
+        {
+          "expr": "sum(rate(http_request_duration_seconds_count[5m])) by (route)",
+          "legendFormat": "{{route}}"
+        }
+      ]
+    },
+    {
+      "id": 2,
+      "title": "p95 request latency (s)",
+      "type": "timeseries",
+      "gridPos": { "h": 8, "w": 12, "x": 12, "y": 0 },
+      "targets": [
+        {
+          "expr": "histogram_quantile(0.95, sum(rate(http_request_duration_seconds_bucket[5m])) by (le, route))",
+          "legendFormat": "{{route}}"
+        }
+      ]
+    },
+    {
+      "id": 3,
+      "title": "Quotes submitted (total)",
+      "type": "stat",
+      "gridPos": { "h": 8, "w": 6, "x": 0, "y": 8 },
+      "targets": [{ "expr": "quotes_submitted_total" }]
+    },
+    {
+      "id": 4,
+      "title": "Node.js process memory (RSS)",
+      "type": "timeseries",
+      "gridPos": { "h": 8, "w": 18, "x": 6, "y": 8 },
+      "targets": [{ "expr": "process_resident_memory_bytes", "legendFormat": "RSS" }]
+    }
+  ]
+}
--- a/observability/grafana/provisioning/dashboards/dashboards.yml
+++ b/observability/grafana/provisioning/dashboards/dashboards.yml
@ -0,0 +1,11 @@
+apiVersion: 1
+
+providers:
+  - name: default
+    orgId: 1
+    folder: ''
+    type: file
+    disableDeletion: false
+    updateIntervalSeconds: 30
+    options:
+      path: /etc/grafana/provisioning/dashboards
--- a/observability/grafana/provisioning/datasources/prometheus.yml
+++ b/observability/grafana/provisioning/datasources/prometheus.yml
@ -0,0 +1,9 @@
+apiVersion: 1
+
+datasources:
+  - name: Prometheus
+    type: prometheus
+    access: proxy
+    url: http://prometheus:9090
+    isDefault: true
+    editable: true
--- a/observability/prometheus.yml
+++ b/observability/prometheus.yml
@ -0,0 +1,8 @@
+global:
+  scrape_interval: 15s
+
+scrape_configs:
+  - job_name: quote-app
+    metrics_path: /api/metrics
+    static_configs:
+      - targets: ['host.docker.internal:3000']
--- a/server/.env.example
+++ b/server/.env.example
@ -0,0 +1,18 @@
+PORT=3000
+NODE_ENV=production
+
+PGHOST=localhost
+PGPORT=5432
+PGDATABASE=quoteapp
+PGUSER=quoteapp
+PGPASSWORD=quoteapp
+
+SESSION_SECRET=change-me
+
+# Platform auth (Zitadel). EXTERNAL_BASE is the browser-facing HTTPS URL
+# (through the exe.dev proxy); INTERNAL_BASE is the plain-HTTP address the
+# server uses directly on the VM for token exchange / userinfo calls.
+ZITADEL_EXTERNAL_BASE=https://<vm-hostname>.exe.xyz:8080
+ZITADEL_INTERNAL_BASE=http://<vm-hostname>.exe.xyz:8080
+ZITADEL_CLIENT_ID=
+ZITADEL_REDIRECT_URI=https://<vm-hostname>.exe.xyz/api/auth/callback
--- a/server/package-lock.json
+++ b/server/package-lock.json
--- a/server/package.json
+++ b/server/package.json
@ -0,0 +1,19 @@
+{
+  "name": "quote-app-server",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "node src/index.js"
+  },
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "express": "^4.21.1",
+    "express-session": "^1.18.1",
+    "morgan": "^1.10.0",
+    "openid-client": "^5.7.0",
+    "pg": "^8.13.1",
+    "prom-client": "^15.1.3"
+  }
+}
--- a/server/src/auth.js
+++ b/server/src/auth.js
@ -0,0 +1,36 @@
+import { Issuer, generators } from 'openid-client';
+
+// Zitadel sits behind exe.dev's per-port HTTPS proxy: browsers must be sent to
+// the public https://<host>:8080 URL, but server-to-server calls (token
+// exchange, userinfo) stay on the VM and talk to Zitadel's plain-HTTP
+// listener directly over the private address exe.dev already maps in
+// /etc/hosts — hence two base URLs instead of a single discovered issuer.
+const EXTERNAL_BASE = process.env.ZITADEL_EXTERNAL_BASE;
+const INTERNAL_BASE = process.env.ZITADEL_INTERNAL_BASE;
+
+let client = null;
+
+export function getOidcClient() {
+  if (!EXTERNAL_BASE || !INTERNAL_BASE || !process.env.ZITADEL_CLIENT_ID) {
+    return Promise.resolve(null);
+  }
+  if (!client) {
+    const issuer = new Issuer({
+      issuer: EXTERNAL_BASE,
+      authorization_endpoint: `${EXTERNAL_BASE}/oauth/v2/authorize`,
+      token_endpoint: `${INTERNAL_BASE}/oauth/v2/token`,
+      userinfo_endpoint: `${INTERNAL_BASE}/oidc/v1/userinfo`,
+      jwks_uri: `${INTERNAL_BASE}/oauth/v2/keys`,
+      end_session_endpoint: `${EXTERNAL_BASE}/oidc/v1/end_session`,
+    });
+    client = new issuer.Client({
+      client_id: process.env.ZITADEL_CLIENT_ID,
+      redirect_uris: [process.env.ZITADEL_REDIRECT_URI],
+      response_types: ['code'],
+      token_endpoint_auth_method: 'none',
+    });
+  }
+  return Promise.resolve(client);
+}
+
+export { generators };
--- a/server/src/db.js
+++ b/server/src/db.js
@ -0,0 +1,21 @@
+import pg from 'pg';
+
+const { Pool } = pg;
+
+export const pool = new Pool({
+  host: process.env.PGHOST || 'localhost',
+  port: Number(process.env.PGPORT || 5432),
+  database: process.env.PGDATABASE || 'quoteapp',
+  user: process.env.PGUSER || 'quoteapp',
+  password: process.env.PGPASSWORD || 'quoteapp',
+});
+
+export async function findOrCreateUser({ sub, email, displayName }) {
+  const existing = await pool.query('SELECT * FROM users WHERE sub = $1', [sub]);
+  if (existing.rows.length > 0) return existing.rows[0];
+  const inserted = await pool.query(
+    'INSERT INTO users (sub, email, display_name) VALUES ($1, $2, $3) RETURNING *',
+    [sub, email || null, displayName || null]
+  );
+  return inserted.rows[0];
+}
--- a/server/src/index.js
+++ b/server/src/index.js
@ -0,0 +1,61 @@
+import 'dotenv/config';
+import express from 'express';
+import session from 'express-session';
+import morgan from 'morgan';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { pool } from './db.js';
+import { register, metricsMiddleware } from './metrics.js';
+import { quotesRouter } from './routes/quotes.js';
+import { favoritesRouter } from './routes/favorites.js';
+import { authRouter } from './routes/auth.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const app = express();
+const PORT = Number(process.env.PORT || 3000);
+
+app.set('trust proxy', 1);
+app.use(morgan(process.env.NODE_ENV === 'production' ? 'combined' : 'dev'));
+app.use(express.json());
+app.use(
+  session({
+    secret: process.env.SESSION_SECRET || 'dev-secret-change-me',
+    resave: false,
+    saveUninitialized: false,
+    cookie: { maxAge: 7 * 24 * 60 * 60 * 1000, sameSite: 'lax' },
+  })
+);
+app.use(metricsMiddleware);
+
+app.use('/api/quotes', quotesRouter);
+app.use('/api/favorites', favoritesRouter);
+app.use('/api/auth', authRouter);
+
+app.get('/api/health', async (req, res) => {
+  try {
+    await pool.query('SELECT 1');
+    res.json({ status: 'ok', db: true });
+  } catch (err) {
+    res.status(503).json({ status: 'degraded', db: false, error: err.message });
+  }
+});
+
+app.get('/api/metrics', async (req, res) => {
+  res.set('Content-Type', register.contentType);
+  res.end(await register.metrics());
+});
+
+app.use((err, req, res, next) => {
+  console.error(err);
+  res.status(500).json({ error: 'Internal server error' });
+});
+
+const clientDist = path.join(__dirname, '../../client/dist');
+app.use(express.static(clientDist));
+app.get(/^(?!\/api).*/, (req, res) => {
+  res.sendFile(path.join(clientDist, 'index.html'));
+});
+
+app.listen(PORT, () => {
+  console.log(`Daily Quote server listening on port ${PORT}`);
+});
--- a/server/src/metrics.js
+++ b/server/src/metrics.js
@ -0,0 +1,27 @@
+import client from 'prom-client';
+
+export const register = new client.Registry();
+client.collectDefaultMetrics({ register });
+
+export const httpRequestDuration = new client.Histogram({
+  name: 'http_request_duration_seconds',
+  help: 'Duration of HTTP requests in seconds',
+  labelNames: ['method', 'route', 'status'],
+  buckets: [0.01, 0.05, 0.1, 0.3, 0.5, 1, 2, 5],
+});
+register.registerMetric(httpRequestDuration);
+
+export const quotesSubmittedTotal = new client.Counter({
+  name: 'quotes_submitted_total',
+  help: 'Total number of quotes submitted by users',
+});
+register.registerMetric(quotesSubmittedTotal);
+
+export function metricsMiddleware(req, res, next) {
+  const end = httpRequestDuration.startTimer();
+  res.on('finish', () => {
+    const route = req.route?.path ? req.baseUrl + req.route.path : req.path;
+    end({ method: req.method, route, status: res.statusCode });
+  });
+  next();
+}
--- a/server/src/routes/auth.js
+++ b/server/src/routes/auth.js
@ -0,0 +1,62 @@
+import { Router } from 'express';
+import { getOidcClient, generators } from '../auth.js';
+import { findOrCreateUser } from '../db.js';
+
+export const authRouter = Router();
+
+authRouter.get('/me', (req, res) => {
+  res.json({ authenticated: Boolean(req.session.user), user: req.session.user || null });
+});
+
+authRouter.get('/login', async (req, res) => {
+  try {
+    const client = await getOidcClient();
+    if (!client) return res.status(503).send('Platform auth (Zitadel) is not configured yet.');
+    const codeVerifier = generators.codeVerifier();
+    const state = generators.state();
+    req.session.oidc = { codeVerifier, state };
+    const url = client.authorizationUrl({
+      scope: 'openid profile email',
+      code_challenge: generators.codeChallenge(codeVerifier),
+      code_challenge_method: 'S256',
+      state,
+    });
+    res.redirect(url);
+  } catch (err) {
+    console.error('OIDC login error', err);
+    res.status(503).send('Platform auth (Zitadel) is unreachable right now.');
+  }
+});
+
+authRouter.get('/callback', async (req, res) => {
+  try {
+    const client = await getOidcClient();
+    if (!client || !req.session.oidc) return res.redirect('/');
+    const params = client.callbackParams(req);
+    const tokenSet = await client.callback(process.env.ZITADEL_REDIRECT_URI, params, {
+      code_verifier: req.session.oidc.codeVerifier,
+      state: req.session.oidc.state,
+    });
+    const claims = tokenSet.claims();
+    const dbUser = await findOrCreateUser({
+      sub: claims.sub,
+      email: claims.email,
+      displayName: claims.name || claims.preferred_username || claims.email,
+    });
+    req.session.user = {
+      id: dbUser.id,
+      sub: dbUser.sub,
+      email: dbUser.email,
+      displayName: dbUser.display_name,
+    };
+    delete req.session.oidc;
+    res.redirect('/');
+  } catch (err) {
+    console.error('OIDC callback error', err);
+    res.redirect('/?auth_error=1');
+  }
+});
+
+authRouter.post('/logout', (req, res) => {
+  req.session.destroy(() => res.status(204).end());
+});
--- a/server/src/routes/favorites.js
+++ b/server/src/routes/favorites.js
@ -0,0 +1,46 @@
+import { Router } from 'express';
+import { pool } from '../db.js';
+
+export const favoritesRouter = Router();
+
+function requireAuth(req, res, next) {
+  if (!req.session.user) return res.status(401).json({ error: 'Sign in required.' });
+  next();
+}
+
+favoritesRouter.get('/', requireAuth, async (req, res, next) => {
+  try {
+    const { rows } = await pool.query(
+      `SELECT q.* FROM favorites f JOIN quotes q ON q.id = f.quote_id
+       WHERE f.user_id = $1 ORDER BY f.created_at DESC`,
+      [req.session.user.id]
+    );
+    res.json(rows);
+  } catch (err) {
+    next(err);
+  }
+});
+
+favoritesRouter.put('/:quoteId', requireAuth, async (req, res, next) => {
+  try {
+    await pool.query(
+      'INSERT INTO favorites (user_id, quote_id) VALUES ($1, $2) ON CONFLICT DO NOTHING',
+      [req.session.user.id, req.params.quoteId]
+    );
+    res.status(204).end();
+  } catch (err) {
+    next(err);
+  }
+});
+
+favoritesRouter.delete('/:quoteId', requireAuth, async (req, res, next) => {
+  try {
+    await pool.query('DELETE FROM favorites WHERE user_id = $1 AND quote_id = $2', [
+      req.session.user.id,
+      req.params.quoteId,
+    ]);
+    res.status(204).end();
+  } catch (err) {
+    next(err);
+  }
+});
--- a/server/src/routes/quotes.js
+++ b/server/src/routes/quotes.js
@ -0,0 +1,50 @@
+import { Router } from 'express';
+import { pool } from '../db.js';
+import { quotesSubmittedTotal } from '../metrics.js';
+
+export const quotesRouter = Router();
+
+quotesRouter.get('/today', async (req, res, next) => {
+  try {
+    const { rows } = await pool.query('SELECT id FROM quotes ORDER BY id');
+    if (rows.length === 0) return res.json(null);
+    const dayNumber = Math.floor(Date.now() / 86400000); // days since epoch, UTC
+    const index = dayNumber % rows.length;
+    const quoteId = rows[index].id;
+    const quote = await pool.query('SELECT * FROM quotes WHERE id = $1', [quoteId]);
+    res.json(quote.rows[0]);
+  } catch (err) {
+    next(err);
+  }
+});
+
+quotesRouter.get('/', async (req, res, next) => {
+  try {
+    const { rows } = await pool.query(
+      `SELECT q.*, u.display_name AS submitted_by_name
+       FROM quotes q LEFT JOIN users u ON u.id = q.submitted_by
+       ORDER BY q.created_at DESC`
+    );
+    res.json(rows);
+  } catch (err) {
+    next(err);
+  }
+});
+
+quotesRouter.post('/', async (req, res, next) => {
+  try {
+    if (!req.session.user) return res.status(401).json({ error: 'Sign in required to submit a quote.' });
+    const { text, author } = req.body;
+    if (!text || typeof text !== 'string' || !text.trim()) {
+      return res.status(400).json({ error: 'Quote text is required.' });
+    }
+    const { rows } = await pool.query(
+      'INSERT INTO quotes (text, author, submitted_by) VALUES ($1, $2, $3) RETURNING *',
+      [text.trim().slice(0, 1000), (author || 'Anonymous').trim().slice(0, 200), req.session.user.id]
+    );
+    quotesSubmittedTotal.inc();
+    res.status(201).json(rows[0]);
+  } catch (err) {
+    next(err);
+  }
+});
--- a/systemd/quote-app.service
+++ b/systemd/quote-app.service
@ -0,0 +1,16 @@
+[Unit]
+Description=Daily Quote app (Vite/React + Express + Postgres)
+After=network.target docker.service
+Wants=docker.service
+
+[Service]
+Type=simple
+User=exedev
+WorkingDirectory=/home/exedev/quote-app/server
+EnvironmentFile=/home/exedev/quote-app/server/.env
+ExecStart=/usr/bin/node /home/exedev/quote-app/server/src/index.js
+Restart=always
+RestartSec=3
+
+[Install]
+WantedBy=multi-user.target
--- a/systemd/quoteapp-backup.service
+++ b/systemd/quoteapp-backup.service
@ -0,0 +1,8 @@
+[Unit]
+Description=Daily Quote app - Postgres backup
+After=docker.service
+
+[Service]
+Type=oneshot
+User=exedev
+ExecStart=/home/exedev/quote-app/backup/backup.sh
--- a/systemd/quoteapp-backup.timer
+++ b/systemd/quoteapp-backup.timer
@ -0,0 +1,9 @@
+[Unit]
+Description=Nightly backup of the Daily Quote Postgres database
+
+[Timer]
+OnCalendar=*-*-* 03:15:00
+Persistent=true
+
+[Install]
+WantedBy=timers.target