create-techtiten-app 0.0.0-stage → 0.1.0

package/templates/mobile/redux/src/state/index.ts

@@ -0,0 +1,16 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { actions, type Appearance, type AppDispatch, type RootState } from './store';
+
+export type { Appearance } from './store';
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();
+
+// The hooks screens use (same names in the Zustand version of this template).
+export function useAppearance() {
+  const dispatch = useAppDispatch();
+  return { appearance: useAppSelector((s) => s.settings.appearance), setAppearance: (a: Appearance) => dispatch(actions.setAppearance(a)) };
+}
+export function useTaps() {
+  const dispatch = useAppDispatch();
+  return { taps: useAppSelector((s) => s.taps.count), addTap: () => dispatch(actions.addTap()) };
+}

package/templates/mobile/redux/src/state/store.ts

@@ -0,0 +1,33 @@
+// App state with Redux Toolkit. Server data (API calls) lives in TanStack Query instead.
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { configureStore, createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+export type Appearance = 'system' | 'light' | 'dark';
+
+const settings = createSlice({
+  name: 'settings',
+  initialState: { appearance: 'system' as Appearance },
+  reducers: { setAppearance: (s, a: PayloadAction<Appearance>) => { s.appearance = a.payload; } },
+});
+
+const taps = createSlice({
+  name: 'taps',
+  initialState: { count: 0 },
+  reducers: { addTap: (s) => { s.count += 1; } },
+});
+
+export const actions = { ...settings.actions, ...taps.actions };
+export const store = configureStore({ reducer: { settings: settings.reducer, taps: taps.reducer } });
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+// Persist settings on this phone (small and explicit; add redux-persist if you need more).
+const KEY = 'settings';
+AsyncStorage.getItem(KEY)
+  .then((raw) => { const s = raw ? JSON.parse(raw) : null; if (s?.appearance) store.dispatch(actions.setAppearance(s.appearance)); })
+  .catch(() => {});
+let last = store.getState().settings;
+store.subscribe(() => {
+  const now = store.getState().settings;
+  if (now !== last) { last = now; AsyncStorage.setItem(KEY, JSON.stringify(now)).catch(() => {}); }
+});

package/templates/mobile/zustand/src/state/Providers.tsx

@@ -0,0 +1,7 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState, type ReactNode } from 'react';
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [client] = useState(() => new QueryClient({ defaultOptions: { queries: { staleTime: 60_000 } } }));
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}

package/templates/mobile/zustand/src/state/index.ts

@@ -0,0 +1,25 @@
+// App state with Zustand. One small store per concern; `persist` saves to the phone.
+// Server data (API calls) lives in TanStack Query instead (see src/api/client.ts).
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+export type Appearance = 'system' | 'light' | 'dark';
+
+type SettingsState = { appearance: Appearance; setAppearance: (a: Appearance) => void };
+export const useSettingsStore = create<SettingsState>()(
+  persist((set) => ({ appearance: 'system', setAppearance: (appearance) => set({ appearance }) }), {
+    name: 'settings',
+    storage: createJSONStorage(() => AsyncStorage),
+  }),
+);
+
+type TapsState = { taps: number; addTap: () => void };
+export const useTapsStore = create<TapsState>()((set) => ({ taps: 0, addTap: () => set((s) => ({ taps: s.taps + 1 })) }));
+
+// The hooks screens use (same names in the Redux version of this template).
+export const useAppearance = () => ({
+  appearance: useSettingsStore((s) => s.appearance),
+  setAppearance: useSettingsStore((s) => s.setAppearance),
+});
+export const useTaps = () => ({ taps: useTapsStore((s) => s.taps), addTap: useTapsStore((s) => s.addTap) });

package/templates/packages/shared/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "__SCOPE__/shared",
+  "version": "0.0.0",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts"
+}

package/templates/packages/shared/src/format.ts

@@ -0,0 +1,18 @@
+export function formatCurrency(amount: number, currency = 'INR', locale = 'en-IN'): string {
+  return new Intl.NumberFormat(locale, { style: 'currency', currency, maximumFractionDigits: 2 }).format(amount);
+}
+
+export function formatDate(d: Date | number | string, locale = 'en-IN'): string {
+  return new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short', year: 'numeric' }).format(new Date(d));
+}
+
+/** "just now", "5 min ago", "3 h ago", "2 d ago" */
+export function timeAgo(d: Date | number | string, now = Date.now()): string {
+  const s = Math.max(0, Math.round((now - new Date(d).getTime()) / 1000));
+  if (s < 45) return 'just now';
+  if (s < 3600) return `${Math.round(s / 60)} min ago`;
+  if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+  return `${Math.round(s / 86400)} d ago`;
+}
+
+export const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));

package/templates/packages/shared/src/index.ts

@@ -0,0 +1,5 @@
+// Logic both apps use: money/date helpers, shared types and zod schemas.
+// The same schema validates input in the API and parses responses in the app.
+export * from './format';
+export * from './money';
+export * from './schemas';

package/templates/packages/shared/src/money.ts

@@ -0,0 +1,13 @@
+/**
+ * Split an amount (in paise/cents, an integer) into `parts` shares that add up exactly.
+ * splitEvenly(1000, 3) -> [334, 333, 333]
+ */
+export function splitEvenly(total: number, parts: number): number[] {
+  if (!Number.isInteger(total) || !Number.isInteger(parts) || parts <= 0) throw new Error('splitEvenly: integers only, parts > 0');
+  const base = Math.floor(total / parts);
+  const extra = total - base * parts;
+  return Array.from({ length: parts }, (_, i) => base + (i < extra ? 1 : 0));
+}
+
+export const toMinor = (amount: number) => Math.round(amount * 100);
+export const fromMinor = (minor: number) => minor / 100;

package/templates/packages/shared/src/schemas.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+/** GET /api/health response. Used by the API (to build it) and the app (to parse it). */
+export const healthSchema = z.object({
+  ok: z.boolean(),
+  app: z.string(),
+  time: z.string(),
+});
+export type Health = z.infer<typeof healthSchema>;

package/templates/packages/theme/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "__SCOPE__/theme",
+  "version": "0.0.0",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts"
+}

package/templates/packages/theme/src/index.ts

@@ -0,0 +1,53 @@
+// One theme for the phone app and the website. Change a color here and both update.
+export type Mode = 'light' | 'dark';
+
+export const palette = {
+  brand: '#00C389',
+  brandStrong: '#00A372',
+  accent: '#7C5CFF',
+  danger: '#E5484D',
+  warning: '#E9A049',
+  success: '#2EAD5B',
+} as const;
+
+export const colors = {
+  light: {
+    background: '#F7F8FA',
+    surface: '#FFFFFF',
+    surfaceAlt: '#EEF0F3',
+    border: '#E2E5EA',
+    text: '#0B0D12',
+    textMuted: '#5B6270',
+    onBrand: '#FFFFFF',
+    ...palette,
+  },
+  dark: {
+    background: '#0B0B12',
+    surface: '#15151F',
+    surfaceAlt: '#1D1D2A',
+    border: '#2A2A38',
+    text: '#ECEDF2',
+    textMuted: '#9A9CAB',
+    onBrand: '#04110C',
+    ...palette,
+  },
+} as const;
+
+export type ColorName = keyof (typeof colors)['light'];
+export type Colors = Record<ColorName, string>;
+
+export const spacing = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24, xxl: 32 } as const;
+export const radius = { sm: 8, md: 12, lg: 16, xl: 24, full: 999 } as const;
+export const fontSize = { xs: 12, sm: 14, md: 16, lg: 18, xl: 22, xxl: 28, display: 36 } as const;
+export const fontWeight = { regular: '400', medium: '500', bold: '700', black: '800' } as const;
+
+export const theme = (mode: Mode) => ({ mode, colors: colors[mode] as Colors, spacing, radius, fontSize, fontWeight });
+export type Theme = ReturnType<typeof theme>;
+
+/** CSS custom properties for the web app: `--color-brand`, `--color-text`… */
+export function cssVariables(mode: Mode): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const [k, v] of Object.entries(colors[mode])) out[`--color-${k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase())}`] = v;
+  for (const [k, v] of Object.entries(radius)) out[`--radius-${k}`] = `${v}px`;
+  return out;
+}

package/templates/root/AGENTS.md

@@ -0,0 +1,16 @@
+# __APP_NAME__: rules for every agent (Claude Code, Cowork, Codex, Cursor)
+
+**Start of a session:** read `STATUS.md`, then check `git status`, the branch and HEAD vs `origin/main`. Say so if it doesn't match.
+**End of a session:** update `STATUS.md` (Now, Next, to-dos, one dated Log line).
+
+## Layout
+- `apps/mobile`: Expo (Expo Router). Screens in `app/`, logic in `src/`. No `android/`/`ios/` in git: they're generated (`npx expo prebuild`).
+- `apps/web`: Next.js App Router. Website `src/app/(site)`, admin `src/app/admin`, API `src/app/api`. Runs on Vercel (serverless: short requests, no websockets; heavy jobs go in batches or a separate worker).
+- `packages/theme` and `packages/shared`: used by both apps. Put colors and shared logic here, never copy-paste between apps.
+
+## Rules
+- Ship flow: branch from `origin/main` → PR → merge. **A merge to `main` deploys** (Vercel for web; the Android workflow for mobile, only when `apps/mobile/**` or `packages/**` change).
+- `git add` exact files, never `-A`. Never commit `.env*`, keystores, `credentials/`, `google-services.json` or service-account JSON.
+- Expo and Next.js here are newer than most training data: read the versioned docs (`node_modules/next/dist/docs/`, docs.expo.dev for this SDK) before writing API code.
+- Native packages need a new store build; they can't go out as an OTA update.
+- Add Expo packages with `npx expo install`, so versions match the SDK.

package/templates/root/README.md

@@ -0,0 +1,22 @@
+# __APP_NAME__
+
+Made with `create-techtiten-app`.
+
+| Folder | What |
+|---|---|
+| `apps/mobile` | Expo app (Android/iOS), Expo Router, __STATE__ |
+| `apps/web` | Next.js: website, `/admin` panel, `/api` backend (if enabled) |
+| `packages/theme` | Colors, spacing, radius, font sizes: one source for both apps |
+| `packages/shared` | Functions, types and zod schemas used by both apps |
+
+## Run
+```
+npm install
+npm run mobile     # Expo (press a for Android)
+npm run web        # Next.js on http://localhost:3000
+npm run typecheck  # every workspace
+```
+
+## Add a package
+- Native/Expo package: `cd apps/mobile && npx expo install <pkg>` (picks the SDK-matched version)
+- Anything else: `npm install <pkg> -w __SCOPE__/mobile` (or `__SCOPE__/web`, `__SCOPE__/shared`)

package/templates/root/STATUS.md

@@ -0,0 +1,13 @@
+# STATUS: __APP_NAME__
+
+## Now
+- Fresh project from create-techtiten-app.
+
+## Next
+- [ ] Replace the starter screens.
+- [ ] Set GitHub secrets for the Android release (see `.github/workflows/android.yml`).
+
+## Open to-dos
+
+## Log
+- __YEAR__: project created.

package/templates/root/_github/workflows/android.yml

@@ -0,0 +1,79 @@
+name: Android Build & Release
+
+# Push to main (or run by hand) -> build a signed AAB on GitHub's runner -> upload to Google Play.
+# No EAS servers: `expo prebuild` generates android/ on the runner, then plain Gradle builds it.
+# Only mobile changes trigger it, so a web/API fix never starts a Play release.
+on:
+  push:
+    branches: [main]
+    paths:
+      - "apps/mobile/**"
+      - "packages/**"
+      - "package-lock.json"
+      - "!**/*.md"
+  workflow_dispatch:
+    inputs:
+      track:
+        description: "Play track (internal / alpha / beta / production)"
+        required: false
+        default: ""
+
+env:
+  # New apps start on the internal track. Switch to production once the app is live and tested.
+  PLAY_TRACK: internal
+
+jobs:
+  android:
+    name: Build & Release Android
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-java@v4
+        with: { distribution: zulu, java-version: "17" }
+      - uses: gradle/actions/setup-gradle@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: "22", cache: npm }
+
+      - name: Install
+        run: npm ci
+
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Expo prebuild (generate android/)
+        working-directory: apps/mobile
+        env:
+          BUILD_NUMBER: ${{ github.run_number }}
+          EXPO_NO_TELEMETRY: "1"
+        run: npx expo prebuild --platform android --clean --no-install
+
+      # After prebuild: --clean wipes android/
+      - name: Decode keystore
+        working-directory: apps/mobile
+        env:
+          ANDROID_KEYSTORE_BASE64: ${{ secrets.ANDROID_KEYSTORE_BASE64 }}
+        run: echo "$ANDROID_KEYSTORE_BASE64" | base64 --decode > android/app/release.keystore
+
+      - name: Build release bundle (AAB)
+        working-directory: apps/mobile/android
+        env:
+          ANDROID_KEYSTORE_PATH: release.keystore # read by plugins/withSigning.js (relative to android/app)
+          ANDROID_KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}
+          ANDROID_KEYSTORE_PASSWORD: ${{ secrets.ANDROID_KEYSTORE_PASSWORD }}
+          ANDROID_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
+        run: ./gradlew bundleRelease --no-daemon
+
+      - name: Upload to Google Play
+        uses: r0adkll/upload-google-play@v1
+        with:
+          serviceAccountJsonPlainText: ${{ secrets.ANDROID_SERVICE_ACCOUNT_JSON }}
+          packageName: __PACKAGE_ID__
+          releaseFiles: apps/mobile/android/app/build/outputs/bundle/release/app-release.aab
+          track: ${{ github.event.inputs.track || env.PLAY_TRACK }}
+          status: completed
+          whatsNewDirectory: apps/mobile/distribution/whatsnew
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: app-release-bundle
+          path: apps/mobile/android/app/build/outputs/bundle/release/app-release.aab

package/templates/root/_github/workflows/web-check.yml

@@ -0,0 +1,19 @@
+name: Web check
+
+# Typecheck + build the Next.js app on every PR (Vercel deploys it on merge).
+on:
+  pull_request:
+    paths: ["apps/web/**", "packages/**", "package-lock.json"]
+
+jobs:
+  web:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: "22", cache: npm }
+      - run: npm ci
+      - run: npm run typecheck
+      - run: npm run build:web
+        env:
+          NEXT_TELEMETRY_DISABLED: "1"

package/templates/root/_gitignore

@@ -0,0 +1,33 @@
+# deps / builds
+node_modules/
+.expo/
+dist/
+web-build/
+.next/
+out/
+build/
+*.tsbuildinfo
+next-env.d.ts
+
+# generated native projects (CNG: made by `expo prebuild` at build time)
+apps/mobile/android/
+apps/mobile/ios/
+
+# secrets: never commit these
+.env
+.env.*
+credentials/
+*.keystore
+*.jks
+*.p8
+*.p12
+*.mobileprovision
+google-services.json
+GoogleService-Info.plist
+*service-account*.json
+*-firebase-adminsdk-*.json
+
+# misc
+.DS_Store
+.vercel
+*.log

package/templates/root/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "__APP_SLUG__",
+  "private": true,
+  "workspaces": ["apps/*", "packages/*"],
+  "scripts": {
+    "mobile": "npm run start -w __SCOPE__/mobile",
+    "android": "npm run android -w __SCOPE__/mobile",
+    "web": "npm run dev -w __SCOPE__/web",
+    "build:web": "npm run build -w __SCOPE__/web",
+    "typecheck": "npm run typecheck --workspaces --if-present"
+  },
+  "engines": { "node": ">=20.19" }
+}

package/templates/web/src/app/(site)/page.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+// The public website / web version of the app. Shares colors with the phone app (packages/theme).
+export default function Home() {
+  return (
+    <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col justify-center gap-8 px-6 py-16">
+      <div className="flex flex-col gap-4">
+        <span className="w-fit rounded-full bg-surface-alt px-3 py-1 text-sm text-text-muted">by Techtiten</span>
+        <h1 className="text-5xl font-black tracking-tight">__APP_NAME__</h1>
+        <p className="text-lg text-text-muted">This is the website. Edit <code>src/app/(site)/page.tsx</code>. The admin panel is at <code>/admin</code> and the API at <code>/api</code>.</p>
+      </div>
+      <div className="flex flex-wrap gap-3">
+        <Link href="/admin" className="rounded-xl bg-brand px-5 py-3 font-bold text-on-brand">Open admin</Link>
+        <a href="/api/health" className="rounded-xl border border-border px-5 py-3 font-bold">API health</a>
+      </div>
+    </main>
+  );
+}

package/templates/web/src/app/admin/layout.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+
+// Everything under /admin is behind HTTP basic auth (src/proxy.ts, ADMIN_USER / ADMIN_PASSWORD).
+export default function AdminLayout({ children }: LayoutProps<'/admin'>) {
+  return (
+    <div className="flex min-h-full flex-1">
+      <aside className="w-56 shrink-0 border-r border-border bg-surface p-5">
+        <div className="mb-6 text-lg font-black">__APP_NAME__ <span className="text-text-muted font-medium">admin</span></div>
+        <nav className="flex flex-col gap-1 text-sm">
+          <Link href="/admin" className="rounded-lg px-3 py-2 hover:bg-surface-alt">Dashboard</Link>
+          <Link href="/" className="rounded-lg px-3 py-2 hover:bg-surface-alt">View site</Link>
+        </nav>
+      </aside>
+      <main className="flex-1 p-8">{children}</main>
+    </div>
+  );
+}

package/templates/web/src/app/admin/page.tsx

@@ -0,0 +1,32 @@
+import { JOBS } from '@/server/jobs';
+
+const cards = [
+  { label: 'Users', value: '—', hint: 'connect your database' },
+  { label: 'Active today', value: '—', hint: 'connect your database' },
+  { label: 'Scheduled jobs', value: String(Object.keys(JOBS).length), hint: 'src/server/jobs.ts' },
+];
+
+export default function AdminHome() {
+  return (
+    <div className="flex flex-col gap-8">
+      <h1 className="text-3xl font-black">Dashboard</h1>
+      <div className="grid gap-4 sm:grid-cols-3">
+        {cards.map((c) => (
+          <div key={c.label} className="rounded-2xl border border-border bg-surface p-5">
+            <div className="text-sm text-text-muted">{c.label}</div>
+            <div className="mt-1 text-3xl font-black">{c.value}</div>
+            <div className="mt-2 text-xs text-text-muted">{c.hint}</div>
+          </div>
+        ))}
+      </div>
+      <div className="rounded-2xl border border-border bg-surface p-5">
+        <h2 className="mb-3 font-bold">Jobs</h2>
+        <ul className="flex flex-col gap-2 text-sm">
+          {Object.entries(JOBS).map(([name, job]) => (
+            <li key={name} className="flex justify-between gap-4"><code>/api/cron/{name}</code><span className="text-text-muted">{job.description}</span></li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/templates/web/src/app/api/cron/[job]/route.ts

@@ -0,0 +1,17 @@
+import { JOBS } from '@/server/jobs';
+
+// Scheduled jobs. Vercel functions are short-lived, so an outside timer calls this:
+//   cron-job.org or a GitHub Actions schedule ->
+//   POST https://<your-app>/api/cron/<job>   header  x-cron-key: <CRON_API_KEY>
+// Keep each run short; for big work, do it in batches and save where you stopped.
+export async function POST(request: Request, ctx: RouteContext<'/api/cron/[job]'>) {
+  const key = process.env.CRON_API_KEY;
+  if (!key) return Response.json({ error: 'CRON_API_KEY is not set' }, { status: 503 });
+  if (request.headers.get('x-cron-key') !== key) return Response.json({ error: 'Not allowed' }, { status: 401 });
+  const { job } = await ctx.params;
+  const run = JOBS[job];
+  if (!run) return Response.json({ error: `Unknown job: ${job}` }, { status: 404 });
+  const started = Date.now();
+  const result = await run.handler();
+  return Response.json({ ok: true, job, ms: Date.now() - started, result });
+}

package/templates/web/src/app/api/health/route.ts

@@ -0,0 +1,8 @@
+import { connection } from 'next/server';
+import { healthSchema } from '__SCOPE__/shared';
+
+// GET /api/health. The response shape is the shared zod schema, so the phone app parses the same type.
+export async function GET() {
+  await connection(); // run per request (not prerendered at build time)
+  return Response.json(healthSchema.parse({ ok: true, app: '__APP_SLUG__', time: new Date().toISOString() }));
+}

package/templates/web/src/app/globals.css

@@ -0,0 +1,23 @@
+@import "tailwindcss";
+
+/* Colors are CSS variables written by app/layout.tsx from packages/theme.
+   Use them as Tailwind classes: bg-background, text-text, bg-brand, border-border… */
+@theme inline {
+  --color-background: var(--color-background);
+  --color-surface: var(--color-surface);
+  --color-surface-alt: var(--color-surface-alt);
+  --color-border: var(--color-border);
+  --color-text: var(--color-text);
+  --color-text-muted: var(--color-text-muted);
+  --color-brand: var(--color-brand);
+  --color-brand-strong: var(--color-brand-strong);
+  --color-accent: var(--color-accent);
+  --color-on-brand: var(--color-on-brand);
+  --color-danger: var(--color-danger);
+}
+
+body {
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}

package/templates/web/src/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from 'next';
+import { cssVariables } from '__SCOPE__/theme';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: '__APP_NAME__',
+  description: '__APP_NAME__ by Techtiten',
+};
+
+// Theme colors come from packages/theme (same as the phone app), as CSS variables.
+const toCss = (vars: Record<string, string>) => Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(';');
+const themeCss = `:root{${toCss(cssVariables('light'))}}@media (prefers-color-scheme: dark){:root{${toCss(cssVariables('dark'))}}}`;
+
+export default function RootLayout({ children }: LayoutProps<'/'>) {
+  return (
+    <html lang="en" className="h-full antialiased">
+      <head>
+        <style dangerouslySetInnerHTML={{ __html: themeCss }} />
+      </head>
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

package/templates/web/src/proxy.ts

@@ -0,0 +1,26 @@
+import { NextResponse, type NextRequest } from 'next/server';
+
+// HTTP basic auth for the admin panel and admin APIs. Set ADMIN_USER and ADMIN_PASSWORD
+// in Vercel (and in apps/web/.env.local for development). Swap for real auth later if you need it.
+export function proxy(request: NextRequest) {
+  const user = process.env.ADMIN_USER;
+  const pass = process.env.ADMIN_PASSWORD;
+  if (!user || !pass) return new NextResponse('Admin is locked: set ADMIN_USER and ADMIN_PASSWORD.', { status: 503 });
+
+  const header = request.headers.get('authorization') ?? '';
+  const [scheme, encoded] = header.split(' ');
+  if (scheme === 'Basic' && encoded) {
+    const [u, ...rest] = atob(encoded).split(':');
+    if (same(u, user) && same(rest.join(':'), pass)) return NextResponse.next();
+  }
+  return new NextResponse('Login required', { status: 401, headers: { 'WWW-Authenticate': 'Basic realm="admin"' } });
+}
+
+// Compare without exiting early, so the time taken doesn't reveal how much matched.
+function same(a: string, b: string) {
+  let diff = a.length ^ b.length;
+  for (let i = 0; i < Math.max(a.length, b.length); i++) diff |= (a.charCodeAt(i) || 0) ^ (b.charCodeAt(i) || 0);
+  return diff === 0;
+}
+
+export const config = { matcher: ['/admin/:path*', '/api/admin/:path*'] };

package/templates/web/src/server/jobs.ts

@@ -0,0 +1,9 @@
+// Server-only jobs, called by /api/cron/[job]. Add yours here.
+type Job = { description: string; handler: () => Promise<unknown> };
+
+export const JOBS: Record<string, Job> = {
+  'daily-summary': {
+    description: 'Example job: replace with your own (reminders, cleanup, reports).',
+    handler: async () => ({ processed: 0 }),
+  },
+};