create-techtiten-app 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,89 @@
-# Temporary Holding Version
+# create-techtiten-app
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+One command for a new app, with the same structure every time:
+
+```
+npx create-techtiten-app my-app
+```
+
+![What you get: the starter phone screens, website and admin panel](https://raw.githubusercontent.com/codewitharun/create-techtiten-app/main/docs/screens.png)
+
+```
+my-app/
+├─ apps/mobile        Expo (latest SDK), Expo Router, TypeScript
+├─ apps/web           Next.js (latest): website + /admin panel + /api backend   (optional)
+├─ packages/theme     colors, spacing, radius, font sizes, shared by both apps
+├─ packages/shared    functions, types, zod schemas, shared by both apps
+├─ .github/workflows  Android build → Google Play (only when mobile changes) + web check
+└─ AGENTS.md, STATUS.md, .gitignore (secrets blocked)
+```
+
+## Options
+Run `npx create-techtiten-app --help` any time to see them all. It asks these questions, or you pass them as flags:
+
+| Question | Flag | Choices |
+|---|---|---|
+| Display name | `--name="My App"` | anything |
+| Package id | `--package=com.techtiten.myapp` | permanent once on Play |
+| Web app | `--web` / `--no-web` | Next.js: website + `/admin` + `/api` |
+| Navigation | `--nav=stack` / `--nav=tabs` | stack, bottom tabs |
+| State | `--state=zustand` / `--state=redux` | both with TanStack Query |
+| Color theme | `--theme=<preset>` | `techtiten`, `ocean`, `sunset`, `royal`, `mono`, `retro` (green LCD) |
+| Brand color | `--brand=#FF3366` | optional, replaces the preset's brand color |
+| Font | `--font=<font>` | `system`, `inter`, `poppins`, `space-grotesk`, `pixel` (Press Start 2P) |
+| Ads | `--ads` / `--no-ads` | AdMob banner, test ads in development |
+
+Other flags: `--yes` (no questions), `--skip-install`, `--no-git`, `--help`, `--version`.
+
+### Defaults (what you get if you just press Enter, or pass `--yes`)
+| Option | Default |
+|---|---|
+| Display name | folder name in Title Case (`my-app` → `My App`) |
+| Package id | `com.techtiten.` + folder name without dashes (`com.techtiten.myapp`) |
+| Web app | yes |
+| Navigation | stack |
+| State | Zustand + TanStack Query |
+| Theme | `techtiten` (light + dark, follows the phone's setting) |
+| Brand color | from the theme |
+| Font | system |
+| Ads | no |
+
+### Color themes
+![Color theme presets in light and dark](https://raw.githubusercontent.com/codewitharun/create-techtiten-app/main/docs/themes.png)
+
+Your colors end up in `packages/theme/src/colors.ts`: one file, used by the phone app and the website. Change any value there later.
+
+### Fonts
+![Font options](https://raw.githubusercontent.com/codewitharun/create-techtiten-app/main/docs/fonts.png)
+
+
+```
+npx create-techtiten-app retro-games --yes --no-web --ads --theme=retro --font=pixel --nav=tabs
+npx create-techtiten-app shop --yes --web --theme=sunset --brand=#FF3366 --font=poppins --state=redux
+```
+
+Every generated project also has `npm run format` (Prettier), `npm run upgrade:mobile` (latest Expo SDK) and `npm run upgrade:web` (latest Next.js).
+
+## Add an option to this CLI
+All options live in one list (`OPTIONS` in `bin/index.mjs`). Theme presets and fonts are in `bin/presets.mjs`. Add an entry and it appears in the questions, the flags and `--help`.
+
+## Always the latest
+- The base apps come from `create-expo-app@latest` and `create-next-app@latest`, so a new project starts on the newest Expo SDK and Next.js.
+- Native packages are added with `npx expo install`, which picks the versions that match that SDK. Nothing is pinned in this package.
+- No `android/` or `ios/` folders are stored: they are generated at build time (`expo prebuild`), so the native side always matches the SDK.
+- The Expo template's own `app.json` values (icons, splash, defaults) are kept in `apps/mobile/config/base.json`; your settings go on top in `app.config.ts`.
+- One React version for the whole repo (web is pinned to the version Expo installed), so hooks never break.
+
+## What you get
+**Mobile:** Reanimated 4 + Worklets + Gesture Handler (SDK-matched, root view already wrapped), theme provider (system/light/dark, saved), UI primitives (Screen, Card, Text, Button with haptics), state demo, API client + TanStack Query hook, release signing plugin (CI secrets or `credentials/signing.properties`), optional AdMob banner.
+
+**Web:** landing page using the same theme colors, `/admin` dashboard behind `ADMIN_USER`/`ADMIN_PASSWORD` (`src/proxy.ts`), `GET /api/health` (shared zod schema), `POST /api/cron/[job]` protected by `CRON_API_KEY` for outside schedulers (Vercel functions are short-lived).
+
+**CI:** `android.yml` builds a signed AAB and uploads to Play (internal track by default). Secrets: `ANDROID_KEYSTORE_BASE64`, `ANDROID_KEY_ALIAS`, `ANDROID_KEYSTORE_PASSWORD`, `ANDROID_KEY_PASSWORD`, `ANDROID_SERVICE_ACCOUNT_JSON`.
+
+## Develop this package
+```
+npm install
+node bin/index.mjs test-app --yes        # try it
+npm publish                              # first time: npm login
+```

package/bin/index.mjs

@@ -0,0 +1,345 @@
+#!/usr/bin/env node
+// create-techtiten-app: scaffolds an npm-workspaces monorepo
+//   apps/mobile      Expo (latest SDK, Expo Router, typed)        always
+//   apps/web         Next.js (latest): website + /admin + /api    optional
+//   packages/theme   colors (preset), spacing, radius, fonts      shared
+//   packages/shared  functions, types, zod schemas                shared
+// Latest versions every time: the base apps come from create-expo-app / create-next-app,
+// and native-aware packages are added with `npx expo install` (SDK-matched). Nothing native
+// is committed: android/ and ios/ are generated at build time (CNG).
+//
+// Every option lives in OPTIONS below: the prompts, the flags and --help are all built from it,
+// so a new feature only has to be added once.
+import * as p from '@clack/prompts';
+import pc from 'picocolors';
+import { spawnSync } from 'node:child_process';
+import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, statSync, writeFileSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { FONTS, THEMES, buildColors, isHex } from './presets.mjs';
+
+const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const TPL = join(ROOT, 'templates');
+const VERSION = JSON.parse(readFileSync(join(ROOT, 'package.json'), 'utf8')).version;
+
+const slugify = (s) => s.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+const titleCase = (s) => s.replace(/[-_]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+const choices = (obj) => Object.entries(obj).map(([value, o]) => ({ value, label: o.label, hint: o.hint }));
+
+// ---------------------------------------------------------------- options (single source of truth)
+const OPTIONS = [
+  { key: 'name', kind: 'text', flag: '--name=<text>', help: 'App display name (under the icon)', def: (a) => titleCase(a.slug), message: 'App display name' },
+  {
+    key: 'package', kind: 'text', flag: '--package=<id>', help: 'Android package / iOS bundle id (permanent once on Play)',
+    def: (a) => `com.techtiten.${a.slug.replace(/-/g, '')}`, message: 'Android package / iOS bundle id',
+    validate: (v) => (/^[a-z][a-z0-9_]*(\.[a-z][a-z0-9_]*)+$/.test(v ?? '') ? undefined : 'Like com.techtiten.myapp (lowercase, dots)'),
+  },
+  { key: 'web', kind: 'bool', flag: '--web / --no-web', help: 'Next.js app next to the phone app: website + /admin panel + /api backend', def: () => true, message: 'Add a Next.js app (website + admin panel + API)?' },
+  {
+    key: 'nav', kind: 'select', flag: '--nav=<stack|tabs>', help: 'Navigation layout', def: () => 'stack', message: 'Navigation',
+    options: [{ value: 'stack', label: 'Stack', hint: 'screens push on top of each other' }, { value: 'tabs', label: 'Bottom tabs', hint: 'Home + Settings tabs, add more in app/(tabs)' }],
+  },
+  {
+    key: 'state', kind: 'select', flag: '--state=<zustand|redux>', help: 'State management (both come with TanStack Query for API data)', def: () => 'zustand', message: 'State management',
+    options: [{ value: 'zustand', label: 'Zustand + TanStack Query', hint: 'recommended: tiny stores' }, { value: 'redux', label: 'Redux Toolkit + TanStack Query', hint: 'more structure, Redux DevTools' }],
+  },
+  { key: 'theme', kind: 'select', flag: '--theme=<preset>', help: 'Color theme preset (light + dark)', def: () => 'techtiten', message: 'Color theme', options: choices(THEMES) },
+  {
+    key: 'brand', kind: 'text', flag: '--brand=<#RRGGBB>', help: 'Optional: your own brand color instead of the preset\'s', def: () => '', message: 'Custom brand color? (#RRGGBB, empty = use the preset)',
+    validate: (v) => (!v || isHex(v) ? undefined : 'Like #00C389, or leave empty'),
+  },
+  { key: 'font', kind: 'select', flag: '--font=<font>', help: 'App font (phone app and website)', def: () => 'system', message: 'Font', options: choices(FONTS) },
+  { key: 'ads', kind: 'bool', flag: '--ads / --no-ads', help: 'Google AdMob banner (test ads in development)', def: () => false, message: 'Google AdMob ads?' },
+];
+
+const TOOL_FLAGS = [
+  ['--yes, -y', 'Skip the questions, use defaults (or the flags you pass)'],
+  ['--skip-install', 'Only write files, don\'t run npm install'],
+  ['--no-git', 'Don\'t run git init / first commit'],
+  ['--help, -h', 'Show this help'],
+  ['--version, -v', 'Show the version'],
+];
+
+function printHelp() {
+  const line = (a, b) => `  ${pc.cyan(a.padEnd(28))} ${b}`;
+  console.log(`
+${pc.bold('create-techtiten-app')} v${VERSION}
+Scaffold an Expo app (+ optional Next.js web/admin/API) with a shared theme and shared logic.
+Always uses the latest Expo SDK and Next.js.
+
+${pc.bold('Usage')}
+  npx create-techtiten-app ${pc.dim('<folder>')} ${pc.dim('[options]')}
+
+${pc.bold('Options')}
+${OPTIONS.map((o) => line(o.flag, `${o.help}${o.options ? '' : ''}`)).join('\n')}
+
+${pc.bold('Choices')}
+${line('themes', Object.entries(THEMES).map(([k, t]) => `${k} (${t.label})`).join(', '))}
+${line('fonts', Object.keys(FONTS).join(', '))}
+
+${pc.bold('Other')}
+${TOOL_FLAGS.map(([a, b]) => line(a, b)).join('\n')}
+
+${pc.bold('Examples')}
+  npx create-techtiten-app my-app
+  npx create-techtiten-app retro-games --yes --no-web --ads --theme=retro --font=pixel --nav=tabs
+  npx create-techtiten-app shop --yes --web --theme=sunset --brand=#FF3366 --font=poppins --state=redux
+`);
+}
+
+// ---------------------------------------------------------------- args
+const argv = process.argv.slice(2);
+const has = (...names) => names.some((n) => argv.includes(n));
+const val = (name) => argv.find((a) => a.startsWith(`--${name}=`))?.split('=').slice(1).join('=');
+const positional = argv.find((a) => !a.startsWith('-'));
+const YES = has('--yes', '-y');
+
+function fromFlags(o) {
+  if (o.kind === 'bool') return has(`--${o.key}`) ? true : has(`--no-${o.key}`) ? false : undefined;
+  return val(o.key);
+}
+
+function checkFlag(o, v) {
+  if (v === undefined) return;
+  if (o.kind === 'select' && !o.options.some((x) => x.value === v)) fail(`--${o.key}=${v} isn't valid. Choose: ${o.options.map((x) => x.value).join(', ')}`);
+  const err = o.validate?.(v);
+  if (err) fail(`--${o.key}: ${err}`);
+}
+
+function fail(msg) { p.cancel(msg); process.exit(1); }
+const cancel = (v) => { if (p.isCancel(v)) fail('Cancelled.'); return v; };
+
+async function ask(o, answers) {
+  const given = fromFlags(o);
+  checkFlag(o, given);
+  if (given !== undefined) return given;
+  const def = o.def(answers);
+  if (YES) return def;
+  if (o.kind === 'bool') return cancel(await p.confirm({ message: o.message, initialValue: def }));
+  if (o.kind === 'select') return cancel(await p.select({ message: o.message, options: o.options, initialValue: def }));
+  return cancel(await p.text({ message: o.message, initialValue: def, placeholder: def || undefined, validate: o.validate }));
+}
+
+// ---------------------------------------------------------------- helpers
+function run(cmd, args, cwd, { quiet = false, env = {} } = {}) {
+  const r = spawnSync(cmd, args, { cwd, stdio: quiet ? 'pipe' : 'inherit', shell: process.platform === 'win32', env: { ...process.env, CI: '1', EXPO_NO_TELEMETRY: '1', NEXT_TELEMETRY_DISABLED: '1', ...env } });
+  if (r.status !== 0) {
+    if (quiet) process.stderr.write(String(r.stderr ?? '') + String(r.stdout ?? ''));
+    throw new Error(`Command failed: ${cmd} ${args.join(' ')} (in ${cwd})`);
+  }
+  return String(r.stdout ?? '');
+}
+
+// Copy a template folder, replacing __TOKENS__ in text files. "_gitignore" -> ".gitignore",
+// "_github" -> ".github" (npm drops real dot-files like .gitignore from published packages).
+function copyTemplate(from, to, vars) {
+  if (!existsSync(from)) return;
+  for (const name of readdirSync(from)) {
+    const src = join(from, name);
+    let outName = name.replace(/\.tpl$/, '');
+    if (outName === '_gitignore') outName = '.gitignore';
+    if (outName === '_github') outName = '.github';
+    const dest = join(to, outName);
+    if (statSync(src).isDirectory()) { mkdirSync(dest, { recursive: true }); copyTemplate(src, dest, vars); continue; }
+    mkdirSync(dirname(dest), { recursive: true });
+    const buf = readFileSync(src);
+    const isText = !/\.(png|jpg|jpeg|gif|ttf|otf|woff2?|ico)$/i.test(name);
+    writeFileSync(dest, isText ? buf.toString('utf8').replace(/__([A-Z_]+)__/g, (m, k) => (k in vars ? vars[k] : m)) : buf);
+  }
+}
+
+const readJson = (f) => JSON.parse(readFileSync(f, 'utf8'));
+const writeJson = (f, o) => writeFileSync(f, JSON.stringify(o, null, 2) + '\n');
+
+// Generated files for the theme preset and the font (phone + web).
+function writeThemeAndFonts(target, a) {
+  const colors = buildColors(a.theme, a.brand);
+  writeFileSync(join(target, 'packages/theme/src/colors.ts'),
+    `// ${THEMES[a.theme].label} preset${a.brand ? `, brand ${a.brand}` : ''} (create-techtiten-app). Edit freely.\nexport const colors = ${JSON.stringify(colors, null, 2)} as const;\n`);
+
+  const f = FONTS[a.font];
+  const m = join(target, 'apps/mobile/src/theme/fonts.ts');
+  if (!f.pkg) {
+    writeFileSync(m, `// System font (San Francisco / Roboto): nothing to load.\nexport const fonts: Record<'regular' | 'medium' | 'bold' | 'black', string | undefined> = { regular: undefined, medium: undefined, bold: undefined, black: undefined };\nexport const useAppFonts = () => true;\n/** Multiplies every font size (wide fonts like pixel ones need smaller text). */\nexport const fontScale = 1;\n`);
+  } else {
+    const names = [...new Set(Object.values(f.weights))];
+    writeFileSync(m, `// ${f.label} from ${f.pkg}. Text/Button pick the family per weight.\nimport { useFonts, ${names.join(', ')} } from '${f.pkg}';\n\nexport const fonts: Record<'regular' | 'medium' | 'bold' | 'black', string | undefined> = ${JSON.stringify(f.weights)};\n\n/** true once the font files are loaded (the root layout waits for it). */\nexport function useAppFonts() {\n  const [loaded, error] = useFonts({ ${names.join(', ')} });\n  return loaded || !!error;\n}\n\n/** Multiplies every font size (wide fonts like pixel ones need smaller text). */\nexport const fontScale = ${f.scale ?? 1};\n`);
+  }
+  if (a.web) {
+    const w = join(target, 'apps/web/src/app/fonts.ts');
+    if (!f.next) writeFileSync(w, `// System font.\nexport const appFontClass = '';\n`);
+    else {
+      const opts = { subsets: ['latin'], variable: '--font-app', display: 'swap', ...(f.nextWeights ? { weight: f.nextWeights } : {}) };
+      // next/font reads these options at build time and needs a plain object literal (unquoted keys).
+      const literal = '{ ' + Object.entries(opts).map(([k, v]) => `${k}: ${JSON.stringify(v).replace(/"/g, "'")}`).join(', ') + ' }';
+      writeFileSync(w, `// ${f.label} via next/font (self-hosted at build time, no layout shift).\nimport { ${f.next} } from 'next/font/google';\n\nconst font = ${f.next}(${literal});\nexport const appFontClass = font.variable;\n`);
+    }
+  }
+}
+
+// ---------------------------------------------------------------- main
+async function main() {
+  if (has('--help', '-h')) return printHelp();
+  if (has('--version', '-v')) return console.log(VERSION);
+
+  console.log();
+  p.intro(pc.bgGreen(pc.black(` create-techtiten-app v${VERSION} `)));
+
+  const dirName = positional ?? (YES ? 'my-app' : cancel(await p.text({ message: 'Project folder name', placeholder: 'my-app', validate: (v) => (slugify(v || '') ? undefined : 'Required') })));
+  const slug = slugify(dirName);
+  const target = resolve(process.cwd(), dirName);
+  if (existsSync(target) && readdirSync(target).length) fail(`${dirName} already exists and isn't empty.`);
+
+  const a = { slug };
+  for (const o of OPTIONS) a[o.key] = await ask(o, a);
+  if (a.brand && !a.brand.startsWith('#')) a.brand = `#${a.brand}`;
+
+  if (!YES) {
+    p.note([
+      `Name       ${a.name}  (${a.package})`,
+      `Apps       mobile${a.web ? ' + web (site, admin, API)' : ''}`,
+      `Navigation ${a.nav}    State ${a.state}`,
+      `Theme      ${THEMES[a.theme].label}${a.brand ? ` with brand ${a.brand}` : ''}    Font ${FONTS[a.font].label}`,
+      `Ads        ${a.ads ? 'AdMob' : 'none'}`,
+    ].join('\n'), 'Summary');
+    if (!cancel(await p.confirm({ message: 'Create it?', initialValue: true }))) fail('Cancelled.');
+  }
+
+  const install = !has('--skip-install');
+  const { name: displayName, package: packageId, web, state, ads } = a;
+  const scope = `@${slug}`;
+  const vars = { APP_SLUG: slug, APP_NAME: displayName, PACKAGE_ID: packageId, SCOPE: scope, STATE: state, YEAR: String(new Date().getFullYear()), WEB_ENABLED: web ? 'true' : 'false', THEME_LABEL: THEMES[a.theme].label };
+  const s = p.spinner();
+
+  // 1. Root + shared packages
+  mkdirSync(target, { recursive: true });
+  copyTemplate(join(TPL, 'root'), target, vars);
+  copyTemplate(join(TPL, 'packages'), join(target, 'packages'), vars);
+  if (!web) rmSync(join(target, '.github/workflows/web-check.yml'), { force: true });
+  const rootPkg = readJson(join(target, 'package.json'));
+  if (!web) { delete rootPkg.scripts.web; delete rootPkg.scripts['build:web']; delete rootPkg.scripts['upgrade:web']; }
+  writeJson(join(target, 'package.json'), rootPkg);
+
+  // 2. Mobile: latest Expo blank TypeScript app, then our layer on top
+  s.start('Creating the Expo app (latest SDK)');
+  mkdirSync(join(target, 'apps'), { recursive: true });
+  run('npx', ['--yes', 'create-expo-app@latest', 'mobile', '--template', 'blank-typescript', '--no-install'], join(target, 'apps'), { quiet: true });
+  const m = join(target, 'apps/mobile');
+  // Keep the SDK template's own app.json values (icons, splash, platform defaults) as config/base.json.
+  const sdkBase = existsSync(join(m, 'app.json')) ? readJson(join(m, 'app.json')).expo ?? {} : {};
+  for (const k of ['name', 'slug', 'plugins']) delete sdkBase[k];
+  for (const f of ['App.tsx', 'index.ts', 'app.json', '.gitignore', 'LICENSE']) rmSync(join(m, f), { force: true });
+  rmSync(join(m, '.git'), { recursive: true, force: true });
+  copyTemplate(join(TPL, 'mobile/common'), m, vars);
+  writeJson(join(m, 'config/base.json'), sdkBase);
+  copyTemplate(join(TPL, `mobile/nav-${a.nav}`), m, vars);
+  copyTemplate(join(TPL, `mobile/${state}`), m, vars);
+  copyTemplate(join(TPL, ads ? 'mobile/ads' : 'mobile/noads'), m, vars);
+  const mp = readJson(join(m, 'package.json'));
+  mp.name = `${scope}/mobile`;
+  mp.main = 'expo-router/entry';
+  mp.scripts = { ...mp.scripts, start: 'expo start', android: 'expo run:android', ios: 'expo run:ios', web: 'expo start --web', prebuild: 'expo prebuild --clean', typecheck: 'tsc --noEmit' };
+  mp.dependencies = { ...mp.dependencies, [`${scope}/theme`]: '*', [`${scope}/shared`]: '*' };
+  writeJson(join(m, 'package.json'), mp);
+  s.stop('Expo app created');
+
+  // 3. Web: latest Next.js (App Router, TS, Tailwind, src/), then our layer
+  if (web) {
+    s.start('Creating the Next.js app (latest)');
+    run('npx', ['--yes', 'create-next-app@latest', 'web', '--ts', '--app', '--eslint', '--tailwind', '--src-dir', '--import-alias', '@/*', '--use-npm', '--skip-install', '--disable-git', '--yes'], join(target, 'apps'), { quiet: true });
+    const w = join(target, 'apps/web');
+    rmSync(join(w, '.gitignore'), { force: true });
+    rmSync(join(w, 'README.md'), { force: true });
+    rmSync(join(w, 'src/app/page.tsx'), { force: true }); // replaced by src/app/(site)/page.tsx
+    copyTemplate(join(TPL, 'web'), w, vars);
+    // Keep Next's own generated next.config.ts (it changes between versions) and only add
+    // transpilePackages so the shared TypeScript packages compile.
+    const nc = join(w, 'next.config.ts');
+    const tp = `transpilePackages: ['${scope}/theme', '${scope}/shared'],`;
+    if (existsSync(nc) && /const nextConfig: NextConfig = \{/.test(readFileSync(nc, 'utf8'))) {
+      writeFileSync(nc, readFileSync(nc, 'utf8').replace(/const nextConfig: NextConfig = \{/, (x) => `${x}\n  ${tp}`));
+    } else {
+      writeFileSync(nc, `import type { NextConfig } from 'next';\n\nconst nextConfig: NextConfig = {\n  ${tp}\n};\n\nexport default nextConfig;\n`);
+    }
+    const wp = readJson(join(w, 'package.json'));
+    wp.name = `${scope}/web`;
+    wp.scripts = { ...wp.scripts, typecheck: 'next typegen && tsc --noEmit' }; // typegen writes LayoutProps/RouteContext types
+    wp.dependencies = { ...wp.dependencies, [`${scope}/theme`]: '*', [`${scope}/shared`]: '*' };
+    writeJson(join(w, 'package.json'), wp);
+    s.stop('Next.js app created');
+  }
+
+  writeThemeAndFonts(target, a);
+  const pluginList = (added = []) => [...new Set(['expo-router', ...added, ...(ads ? ['react-native-google-mobile-ads'] : []), './plugins/withSigning.js'])];
+
+  // 4. Install: one root install, then SDK-matched native packages via expo install
+  if (install) {
+    s.start('Installing (one install for all workspaces)');
+    run('npm', ['install', '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
+    s.message('Adding Expo packages matched to this SDK');
+    const expoPkgs = ['expo-router', 'expo-linking', 'expo-constants', 'expo-status-bar', 'expo-haptics', 'expo-system-ui', 'expo-font', '@expo/vector-icons', 'react-native-safe-area-context', 'react-native-screens', 'react-native-reanimated', 'react-native-worklets', 'react-native-gesture-handler', '@react-native-async-storage/async-storage', 'react-dom', 'react-native-web'];
+    if (ads) expoPkgs.push('react-native-google-mobile-ads');
+    if (FONTS[a.font].pkg) expoPkgs.push(FONTS[a.font].pkg);
+    const expoArgs = ['expo', 'install', ...expoPkgs, '--', '--no-audit', '--no-fund', '--loglevel=error'];
+    // expo install adds config plugins itself, but can't edit app.config.ts. Give it a temporary
+    // app.json, then copy the plugins it added into config/plugins.json (read by app.config.ts).
+    renameSync(join(m, 'app.config.ts'), join(m, 'app.config.ts.tmp'));
+    writeJson(join(m, 'app.json'), { expo: { name: displayName, slug, plugins: [] } });
+    try {
+      run('npx', expoArgs, m, { quiet: true });
+    } catch {
+      // Expo's version API unreachable (proxy/offline): use the versions bundled with the installed SDK.
+      s.message("Expo API unreachable, using the SDK's bundled version list");
+      run('npx', expoArgs, m, { quiet: true, env: { EXPO_OFFLINE: '1' } });
+    }
+    const added = (readJson(join(m, 'app.json')).expo.plugins ?? []).map((x) => (Array.isArray(x) ? x[0] : x));
+    rmSync(join(m, 'app.json'));
+    renameSync(join(m, 'app.config.ts.tmp'), join(m, 'app.config.ts'));
+    const statePkgs = state === 'redux' ? ['@reduxjs/toolkit', 'react-redux', '@tanstack/react-query'] : ['zustand', '@tanstack/react-query'];
+    run('npm', ['install', ...statePkgs, '-w', `${scope}/mobile`, '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
+    run('npm', ['install', 'zod', '-w', `${scope}/shared`, '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
+    run('npm', ['install', '-D', 'prettier', '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
+    // Now that the packages exist, turn their config plugins on.
+    writeJson(join(m, 'config/plugins.json'), pluginList(added));
+    if (web) {
+      // One React for the whole repo: pin web's react/react-dom to the version Expo installed,
+      // otherwise npm can install two Reacts and hooks break ("Invalid hook call").
+      const rv = readJson(join(m, 'package.json')).dependencies.react;
+      const w = join(target, 'apps/web');
+      const wp = readJson(join(w, 'package.json'));
+      wp.dependencies.react = rv;
+      wp.dependencies['react-dom'] = rv;
+      writeJson(join(w, 'package.json'), wp);
+      const rootPkg2 = readJson(join(target, 'package.json'));
+      rootPkg2.overrides = { ...(rootPkg2.overrides ?? {}), react: rv, 'react-dom': rv };
+      writeJson(join(target, 'package.json'), rootPkg2);
+      run('npm', ['install', '--no-audit', '--no-fund', '--loglevel=error'], target, { quiet: true });
+    }
+    s.stop('Installed');
+  } else {
+    writeJson(join(m, 'config/plugins.json'), pluginList());
+  }
+
+  // 5. Git (uses your git name/email; falls back to a neutral author if none is set)
+  if (!has('--no-git')) {
+    try {
+      run('git', ['init', '-b', 'main'], target, { quiet: true });
+      run('git', ['add', '-A'], target, { quiet: true });
+      try { run('git', ['commit', '-m', 'Initial commit from create-techtiten-app', '--no-verify'], target, { quiet: true }); }
+      catch { run('git', ['-c', 'user.name=create-techtiten-app', '-c', 'user.email=noreply@techtiten.com', 'commit', '-m', 'Initial commit from create-techtiten-app', '--no-verify'], target, { quiet: true }); }
+    } catch { p.log.warn('git init skipped (git missing or commit failed). Run git init yourself.'); }
+  }
+
+  const rel = relative(process.cwd(), target) || '.';
+  p.note([
+    `cd ${rel}`,
+    'npm run mobile        # Expo dev server (press a for Android)',
+    web ? 'npm run web           # Next.js on http://localhost:3000 (/admin, /api/health)' : null,
+    'npm run typecheck     # all workspaces',
+    'npm run format        # prettier',
+    ads ? 'Ads need a dev build (npm run android), not Expo Go.' : null,
+  ].filter(Boolean).join('\n'), 'Next steps');
+  p.outro(`${pc.green('Done.')} ${displayName} is ready in ${pc.cyan(rel)}`);
+}
+
+main().catch((e) => fail(e.message));

package/bin/presets.mjs

@@ -0,0 +1,68 @@
+// Theme presets and fonts. Add one here and it shows up in the prompts and in --help.
+
+const neutrals = {
+  cool: {
+    light: { background: '#F7F8FA', surface: '#FFFFFF', surfaceAlt: '#EEF0F3', border: '#E2E5EA', text: '#0B0D12', textMuted: '#5B6270' },
+    dark: { background: '#0B0B12', surface: '#15151F', surfaceAlt: '#1D1D2A', border: '#2A2A38', text: '#ECEDF2', textMuted: '#9A9CAB' },
+  },
+  navy: {
+    light: { background: '#F5F8FC', surface: '#FFFFFF', surfaceAlt: '#EAF0F8', border: '#DCE4EF', text: '#0A1324', textMuted: '#55627A' },
+    dark: { background: '#0A1020', surface: '#121A2E', surfaceAlt: '#1A2440', border: '#26314F', text: '#E8EEF8', textMuted: '#93A0BA' },
+  },
+  warm: {
+    light: { background: '#FBF8F5', surface: '#FFFFFF', surfaceAlt: '#F4EEE8', border: '#EADFD5', text: '#1A120D', textMuted: '#6E6058' },
+    dark: { background: '#140F0C', surface: '#1E1713', surfaceAlt: '#2A201A', border: '#3A2D25', text: '#F3ECE6', textMuted: '#AE9F95' },
+  },
+  plum: {
+    light: { background: '#F8F7FC', surface: '#FFFFFF', surfaceAlt: '#EFECF9', border: '#E1DCF2', text: '#120E22', textMuted: '#5E5875' },
+    dark: { background: '#0E0B1A', surface: '#171328', surfaceAlt: '#211B37', border: '#2E2649', text: '#EEEAFB', textMuted: '#A29BBF' },
+  },
+  lcd: {
+    light: { background: '#C7D3A6', surface: '#BCC994', surfaceAlt: '#AFBD86', border: '#8F9D68', text: '#1E2A14', textMuted: '#4A5832' },
+    dark: { background: '#10160C', surface: '#182012', surfaceAlt: '#212B19', border: '#33402A', text: '#B8E07A', textMuted: '#7E9A57' },
+  },
+};
+
+const fixed = { danger: '#E5484D', warning: '#E9A049', success: '#2EAD5B' };
+
+// brand per mode: [brand, brandStrong, onBrand]
+export const THEMES = {
+  techtiten: { label: 'Techtiten', hint: 'mint green + purple (FitPrep / EzySplit feel)', neutral: 'cool', light: ['#00A372', '#008A60', '#FFFFFF'], dark: ['#00C389', '#00A372', '#04110C'], accent: '#7C5CFF' },
+  ocean: { label: 'Ocean', hint: 'calm blue, trusted (finance, productivity)', neutral: 'navy', light: ['#2F6FED', '#1F57C8', '#FFFFFF'], dark: ['#4D8DFF', '#2F6FED', '#06122A'], accent: '#00B8D9' },
+  sunset: { label: 'Sunset', hint: 'orange + pink, energetic (food, fitness)', neutral: 'warm', light: ['#F2552C', '#D4401B', '#FFFFFF'], dark: ['#FF6B4A', '#F2552C', '#1A0B06'], accent: '#FF4F8B' },
+  royal: { label: 'Royal', hint: 'violet, premium (education, lifestyle)', neutral: 'plum', light: ['#6A4CF0', '#5435D6', '#FFFFFF'], dark: ['#8B70FF', '#6A4CF0', '#0E0820'], accent: '#FF5CA8' },
+  mono: { label: 'Mono', hint: 'black & white, minimal (tools, portfolio)', neutral: 'cool', light: ['#111317', '#000000', '#FFFFFF'], dark: ['#F2F3F5', '#FFFFFF', '#0B0B12'], accent: '#7A808C' },
+  retro: { label: 'Retro LCD', hint: 'old-phone green screen (games, nostalgia)', neutral: 'lcd', light: ['#2F3B1E', '#1E2A14', '#C7D3A6'], dark: ['#9BD14A', '#B8E07A', '#10160C'], accent: '#5E7A2E' },
+};
+
+// Mobile: @expo-google-fonts/<pkg> exports; web: next/font/google import name + options.
+export const FONTS = {
+  system: { label: 'System', hint: 'San Francisco / Roboto, nothing to load' },
+  inter: { label: 'Inter', hint: 'clean UI font', pkg: '@expo-google-fonts/inter', weights: { regular: 'Inter_400Regular', medium: 'Inter_500Medium', bold: 'Inter_700Bold', black: 'Inter_800ExtraBold' }, next: 'Inter', nextWeights: null },
+  poppins: { label: 'Poppins', hint: 'round and friendly (consumer apps)', pkg: '@expo-google-fonts/poppins', weights: { regular: 'Poppins_400Regular', medium: 'Poppins_500Medium', bold: 'Poppins_700Bold', black: 'Poppins_800ExtraBold' }, next: 'Poppins', nextWeights: ['400', '500', '700', '800'] },
+  'space-grotesk': { label: 'Space Grotesk', hint: 'techy, modern', pkg: '@expo-google-fonts/space-grotesk', weights: { regular: 'SpaceGrotesk_400Regular', medium: 'SpaceGrotesk_500Medium', bold: 'SpaceGrotesk_700Bold', black: 'SpaceGrotesk_700Bold' }, next: 'Space_Grotesk', nextWeights: null },
+  pixel: { label: 'Press Start 2P', hint: 'pixel/8-bit (retro games)', scale: 0.72, pkg: '@expo-google-fonts/press-start-2p', weights: { regular: 'PressStart2P_400Regular', medium: 'PressStart2P_400Regular', bold: 'PressStart2P_400Regular', black: 'PressStart2P_400Regular' }, next: 'Press_Start_2P', nextWeights: ['400'] },
+};
+
+const hex = (h) => h.replace('#', '').padEnd(6, '0').slice(0, 6);
+const toRgb = (h) => [0, 2, 4].map((i) => parseInt(hex(h).slice(i, i + 2), 16));
+const toHex = (rgb) => '#' + rgb.map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('').toUpperCase();
+const shade = (h, f) => toHex(toRgb(h).map((v) => (f < 0 ? v * (1 + f) : v + (255 - v) * f)));
+const luminance = (h) => { const [r, g, b] = toRgb(h).map((v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; };
+export const isHex = (v) => /^#?[0-9a-fA-F]{6}$/.test(v ?? '');
+
+/** { light: {...}, dark: {...} } colors for packages/theme. `brand` (#RRGGBB) overrides the preset's brand. */
+export function buildColors(themeKey, brand) {
+  const t = THEMES[themeKey];
+  const out = {};
+  for (const mode of ['light', 'dark']) {
+    let [b, strong, on] = t[mode];
+    if (brand) {
+      b = '#' + hex(brand).toUpperCase();
+      strong = shade(b, mode === 'light' ? -0.15 : 0.15);
+      on = luminance(b) > 0.45 ? '#0B0D12' : '#FFFFFF';
+    }
+    out[mode] = { ...neutrals[t.neutral][mode], brand: b, brandStrong: strong, onBrand: on, accent: t.accent, ...fixed };
+  }
+  return out;
+}

package/package.json

@@ -1,6 +1,40 @@
 {
   "name": "create-techtiten-app",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Scaffold a Techtiten app: Expo (Android/iOS) + optional Next.js (web, admin panel, API) with a shared theme and shared logic. Always on the latest Expo and Next.js.",
+  "type": "module",
+  "bin": {
+    "create-techtiten-app": "bin/index.mjs"
+  },
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=20.19"
+  },
+  "keywords": [
+    "expo",
+    "react-native",
+    "nextjs",
+    "monorepo",
+    "template",
+    "create-app",
+    "zustand",
+    "redux"
+  ],
+  "author": "Arun Kumar (Techtiten)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codewitharun/create-techtiten-app.git"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.8.1",
+    "picocolors": "^1.1.1"
+  },
+  "homepage": "https://github.com/codewitharun/create-techtiten-app#readme",
+  "bugs": {
+    "url": "https://github.com/codewitharun/create-techtiten-app/issues"
+  }
+}

package/templates/mobile/ads/src/ads/Banner.tsx

@@ -0,0 +1,14 @@
+import { View } from 'react-native';
+import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
+
+// Test ads in development, your real unit id in release builds (EXPO_PUBLIC_ADMOB_BANNER_ID).
+// Ads need a dev build (npm run android), not Expo Go.
+const UNIT_ID = __DEV__ ? TestIds.ADAPTIVE_BANNER : process.env.EXPO_PUBLIC_ADMOB_BANNER_ID ?? TestIds.ADAPTIVE_BANNER;
+
+export function Banner() {
+  return (
+    <View style={{ alignItems: 'center' }}>
+      <BannerAd unitId={UNIT_ID} size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER} />
+    </View>
+  );
+}

package/templates/mobile/ads/src/ads/Banner.web.tsx

@@ -0,0 +1,4 @@
+/** AdMob has no web SDK: the web build of the app shows no banner. */
+export function Banner() {
+  return null;
+}

package/templates/mobile/common/app.config.ts

@@ -0,0 +1,36 @@
+import type { ExpoConfig } from 'expo/config';
+import base from './config/base.json';
+import pluginNames from './config/plugins.json';
+
+// config/base.json = what this Expo SDK's own template ships (icons, splash, platform defaults),
+// saved by create-techtiten-app. Our settings go on top, so new SDK defaults are never lost.
+// config/plugins.json = config plugins of the installed packages.
+
+// versionCode/buildNumber come from CI (BUILD_NUMBER = GitHub run number): every Play upload is higher.
+const buildNumber = Number(process.env.BUILD_NUMBER ?? 1);
+
+// AdMob app ids: Google's TEST ids unless ADMOB_ANDROID_APP_ID / ADMOB_IOS_APP_ID are set (CI or .env).
+const pluginOptions: Record<string, object> = {
+  'react-native-google-mobile-ads': {
+    androidAppId: process.env.ADMOB_ANDROID_APP_ID ?? 'ca-app-pub-3940256099942544~3347511713',
+    iosAppId: process.env.ADMOB_IOS_APP_ID ?? 'ca-app-pub-3940256099942544~1458002511',
+  },
+};
+const plugins: ExpoConfig['plugins'] = (pluginNames as string[]).map((name) => (pluginOptions[name] ? [name, pluginOptions[name]] : name));
+
+const sdkDefaults = base as Partial<ExpoConfig>;
+
+const config: ExpoConfig = {
+  ...sdkDefaults,
+  name: '__APP_NAME__',
+  slug: '__APP_SLUG__',
+  scheme: '__APP_SLUG__',
+  version: '1.0.0',
+  userInterfaceStyle: 'automatic',
+  ios: { ...sdkDefaults.ios, bundleIdentifier: '__PACKAGE_ID__', buildNumber: String(buildNumber) },
+  android: { ...sdkDefaults.android, package: '__PACKAGE_ID__', versionCode: buildNumber },
+  plugins,
+  experiments: { ...sdkDefaults.experiments, typedRoutes: true },
+};
+
+export default config;

package/templates/mobile/common/config/plugins.json

@@ -0,0 +1 @@
+[]

package/templates/mobile/common/distribution/whatsnew/whatsnew-en-US

@@ -0,0 +1 @@
+Bug fixes and improvements.