create-techtiten-app 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,49 @@
-# 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
+```
+
+```
+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)
+```
+
+## It asks
+| Question | Options |
+|---|---|
+| Display name, package id | e.g. `Retro Games`, `com.techtiten.retrogames` |
+| Web | Next.js app for website + admin (basic auth) + API (health, cron jobs) |
+| State | Zustand + TanStack Query (default) or Redux Toolkit + TanStack Query |
+| Ads | AdMob banner (test ads in dev) |
+
+Skip the questions: `npx create-techtiten-app my-app --yes --web --state=zustand --ads --name="My App" --package=com.techtiten.myapp`
+Other flags: `--no-web`, `--no-ads`, `--skip-install`, `--no-git`.
+
+## 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:** 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,210 @@
+#!/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, 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).
+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';
+
+const TPL = resolve(dirname(fileURLToPath(import.meta.url)), '../templates');
+const argv = process.argv.slice(2);
+const flag = (name) => argv.includes(`--${name}`);
+const opt = (name) => argv.find((a) => a.startsWith(`--${name}=`))?.split('=').slice(1).join('=');
+const positional = argv.find((a) => !a.startsWith('--'));
+const YES = flag('yes') || flag('y');
+
+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 cancel = (v) => { if (p.isCancel(v)) { p.cancel('Cancelled.'); process.exit(0); } return v; };
+
+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. Files named *.tpl lose the suffix;
+// "_gitignore" becomes ".gitignore" (npm strips real .gitignore files 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');
+
+async function main() {
+  console.log();
+  p.intro(pc.bgGreen(pc.black(' create-techtiten-app ')));
+
+  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) { p.cancel(`${dirName} already exists and isn't empty.`); process.exit(1); }
+
+  const displayName = opt('name') ?? (YES ? titleCase(slug) : cancel(await p.text({ message: 'App display name', initialValue: titleCase(slug) })));
+  const packageId = opt('package') ?? (YES ? `com.techtiten.${slug.replace(/-/g, '')}` : cancel(await p.text({
+    message: 'Android package / iOS bundle id', initialValue: `com.techtiten.${slug.replace(/-/g, '')}`,
+    validate: (v) => (/^[a-z][a-z0-9_]*(\.[a-z][a-z0-9_]*)+$/.test(v) ? undefined : 'Like com.techtiten.myapp (lowercase, dots)'),
+  })));
+  const web = flag('web') ? true : flag('no-web') ? false : YES ? true : cancel(await p.confirm({ message: 'Add a Next.js app (website + admin panel + API) next to the mobile app?', initialValue: true }));
+  const state = opt('state') ?? (YES ? 'zustand' : cancel(await p.select({
+    message: 'State management',
+    options: [
+      { value: 'zustand', label: 'Zustand + TanStack Query', hint: 'recommended: tiny stores, server data cached' },
+      { value: 'redux', label: 'Redux Toolkit + TanStack Query', hint: 'more structure, Redux DevTools' },
+    ],
+  })));
+  const ads = flag('ads') ? true : flag('no-ads') ? false : YES ? false : cancel(await p.confirm({ message: 'Google AdMob ads (banner component, test ads in dev)?', initialValue: false }));
+  const install = !flag('skip-install');
+
+  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' };
+  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']; }
+  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/${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 = \{/, (m) => `${m}\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');
+  }
+
+  // 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', 'react-native-safe-area-context', 'react-native-screens', '@react-native-async-storage/async-storage', 'react-dom', 'react-native-web'];
+    if (ads) expoPkgs.push('react-native-google-mobile-ads');
+    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 });
+    // Now that the packages exist, turn their config plugins on.
+    writeJson(join(m, 'config/plugins.json'), [...new Set(['expo-router', ...added, ...(ads ? ['react-native-google-mobile-ads'] : []), './plugins/withSigning.js'])]);
+    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');
+  }
+
+  if (!install) writeJson(join(m, 'config/plugins.json'), ['expo-router', './plugins/withSigning.js', ...(ads ? ['react-native-google-mobile-ads'] : [])]);
+
+  // 5. Git
+  if (!flag('no-git')) {
+    try {
+      run('git', ['init', '-b', 'main'], target, { quiet: true });
+      run('git', ['add', '-A'], target, { quiet: true });
+      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',
+    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) => { p.cancel(e.message); process.exit(1); });

package/package.json

@@ -1,6 +1,17 @@
 {
   "name": "create-techtiten-app",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.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/rnboilerplate.git" },
+  "dependencies": {
+    "@clack/prompts": "^1.8.1",
+    "picocolors": "^1.1.1"
+  }
+}

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/_layout.tsx

@@ -0,0 +1,36 @@
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Providers } from '@/state/Providers';
+import { ThemeProvider, useTheme } from '@/theme';
+
+function ThemedStack() {
+  const t = useTheme();
+  return (
+    <>
+      <StatusBar style={t.mode === 'dark' ? 'light' : 'dark'} />
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: t.colors.background },
+          headerTintColor: t.colors.text,
+          headerShadowVisible: false,
+          contentStyle: { backgroundColor: t.colors.background },
+        }}>
+        <Stack.Screen name="index" options={{ title: '__APP_NAME__' }} />
+        <Stack.Screen name="settings" options={{ title: 'Settings' }} />
+      </Stack>
+    </>
+  );
+}
+
+export default function RootLayout() {
+  return (
+    <SafeAreaProvider>
+      <Providers>
+        <ThemeProvider>
+          <ThemedStack />
+        </ThemeProvider>
+      </Providers>
+    </SafeAreaProvider>
+  );
+}

package/templates/mobile/common/app/index.tsx

@@ -0,0 +1,48 @@
+import { Link } from 'expo-router';
+import { formatCurrency, splitEvenly, fromMinor, timeAgo } from '__SCOPE__/shared';
+import { useHealth } from '@/api/client';
+import { Banner } from '@/ads/Banner';
+import { useTaps } from '@/state';
+import { Button, Card, Screen, Text } from '@/ui';
+
+const WEB_API = __WEB_ENABLED__;
+
+export default function Home() {
+  const { taps, addTap } = useTaps();
+  const health = useHealth(WEB_API);
+  const shares = splitEvenly(100000, 3).map((m) => formatCurrency(fromMinor(m)));
+
+  return (
+    <Screen>
+      <Card>
+        <Text size="xl" weight="black">Welcome to __APP_NAME__</Text>
+        <Text muted>Edit app/index.tsx to start. Colors come from packages/theme, helpers from packages/shared.</Text>
+      </Card>
+
+      <Card>
+        <Text weight="bold">State demo (__STATE__)</Text>
+        <Text muted>Tapped {taps} times</Text>
+        <Button title="Tap" onPress={addTap} />
+      </Card>
+
+      <Card>
+        <Text weight="bold">Shared logic demo</Text>
+        <Text muted>₹1,000 split 3 ways: {shares.join(' · ')}</Text>
+      </Card>
+
+      {WEB_API ? (
+        <Card>
+          <Text weight="bold">API demo (Next.js /api/health)</Text>
+          <Text muted>
+            {health.isLoading ? 'Checking…' : health.data ? `OK · ${timeAgo(health.data.time)}` : `Not reachable (${health.error?.message ?? 'start npm run web'})`}
+          </Text>
+        </Card>
+      ) : null}
+
+      <Link href="/settings" asChild>
+        <Button title="Settings" variant="ghost" />
+      </Link>
+      <Banner />
+    </Screen>
+  );
+}

package/templates/mobile/common/app/settings.tsx

@@ -0,0 +1,22 @@
+import { View } from 'react-native';
+import { useAppearance, type Appearance } from '@/state';
+import { Button, Card, Screen, Text } from '@/ui';
+
+const OPTIONS: Appearance[] = ['system', 'light', 'dark'];
+
+export default function Settings() {
+  const { appearance, setAppearance } = useAppearance();
+  return (
+    <Screen>
+      <Card>
+        <Text weight="bold">Appearance</Text>
+        <Text muted>Saved on this phone.</Text>
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          {OPTIONS.map((o) => (
+            <Button key={o} title={o} variant={appearance === o ? 'primary' : 'ghost'} onPress={() => setAppearance(o)} style={{ flex: 1 }} />
+          ))}
+        </View>
+      </Card>
+    </Screen>
+  );
+}

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.

package/templates/mobile/common/plugins/withSigning.js

@@ -0,0 +1,63 @@
+/**
+ * Release + debug signing for the generated android/ project (CNG).
+ * Release key, first match wins:
+ *   1. CI env: ANDROID_KEYSTORE_PATH / ANDROID_KEYSTORE_PASSWORD / ANDROID_KEY_ALIAS / ANDROID_KEY_PASSWORD
+ *   2. credentials/signing.properties (MYAPP_UPLOAD_* keys, git-ignored) for local release builds
+ *   3. neither: release falls back to debug signing (Play rejects it, so nothing ships by accident)
+ * Debug: credentials/debug.keystore if present (keeps the same SHA-1 for Google Sign-In), else Expo's key.
+ */
+const { withAppBuildGradle } = require('expo/config-plugins');
+
+const MARK = '// @techtiten-signing';
+const HEADER = `${MARK}
+def ttCredDir = new File(rootDir, "../credentials")
+def ttSigning = new Properties()
+def ttSigningFile = new File(ttCredDir, "signing.properties")
+if (ttSigningFile.exists()) { ttSigningFile.withInputStream { ttSigning.load(it) } }
+def ttDebugKeystore = new File(ttCredDir, "debug.keystore")
+def ttHasRelease = System.getenv("ANDROID_KEYSTORE_PATH") || ttSigning['MYAPP_UPLOAD_STORE_FILE']
+
+`;
+const RELEASE_CONFIG = `
+        release {
+            if (System.getenv("ANDROID_KEYSTORE_PATH")) {
+                storeFile file(System.getenv("ANDROID_KEYSTORE_PATH"))
+                storePassword System.getenv("ANDROID_KEYSTORE_PASSWORD")
+                keyAlias System.getenv("ANDROID_KEY_ALIAS")
+                keyPassword System.getenv("ANDROID_KEY_PASSWORD")
+            } else if (ttSigning['MYAPP_UPLOAD_STORE_FILE']) {
+                storeFile new File(ttCredDir, ttSigning['MYAPP_UPLOAD_STORE_FILE'])
+                storePassword ttSigning['MYAPP_UPLOAD_STORE_PASSWORD']
+                keyAlias ttSigning['MYAPP_UPLOAD_KEY_ALIAS']
+                keyPassword ttSigning['MYAPP_UPLOAD_KEY_PASSWORD']
+            }
+        }`;
+
+function patch(gradle) {
+  if (gradle.includes(MARK)) return gradle;
+  const fail = (what) => { throw new Error(`[withSigning] Could not find ${what} in android/app/build.gradle. The Expo template changed: update plugins/withSigning.js.`); };
+  if (!/\nandroid\s*\{/.test(gradle)) fail('"android {"');
+  gradle = gradle.replace(/\nandroid\s*\{/, `\n${HEADER}android {`);
+  const debugStore = /storeFile file\('debug\.keystore'\)/;
+  if (!debugStore.test(gradle)) fail("storeFile file('debug.keystore')");
+  gradle = gradle.replace(debugStore, "storeFile(ttDebugKeystore.exists() ? ttDebugKeystore : file('debug.keystore'))");
+  const sc = /signingConfigs\s*\{/;
+  if (!sc.test(gradle)) fail('"signingConfigs {"');
+  gradle = gradle.replace(sc, (m) => m + RELEASE_CONFIG);
+  const bt = gradle.indexOf('buildTypes');
+  if (bt < 0) fail('"buildTypes"');
+  const rel = gradle.indexOf('release', bt);
+  const target = 'signingConfig signingConfigs.debug';
+  const at = rel < 0 ? -1 : gradle.indexOf(target, rel);
+  if (at < 0) fail('release signingConfig');
+  return gradle.slice(0, at) + 'signingConfig ttHasRelease ? signingConfigs.release : signingConfigs.debug' + gradle.slice(at + target.length);
+}
+
+module.exports = function withSigning(config) {
+  return withAppBuildGradle(config, (cfg) => {
+    if (cfg.modResults.language !== 'groovy') throw new Error('[withSigning] expected a Groovy build.gradle');
+    cfg.modResults.contents = patch(cfg.modResults.contents);
+    return cfg;
+  });
+};
+module.exports.patch = patch;

package/templates/mobile/common/src/api/client.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import { healthSchema } from '__SCOPE__/shared';
+
+// Your Next.js API. Set EXPO_PUBLIC_API_URL in apps/mobile/.env (e.g. https://myapp.vercel.app).
+// On an Android emulator, your Mac's localhost is http://10.0.2.2:3000.
+export const API_URL = process.env.EXPO_PUBLIC_API_URL ?? 'http://localhost:3000';
+
+export async function api<T>(path: string, parse: (data: unknown) => T, init?: RequestInit): Promise<T> {
+  const r = await fetch(`${API_URL}${path}`, { ...init, headers: { 'Content-Type': 'application/json', ...init?.headers } });
+  if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
+  return parse(await r.json());
+}
+
+/** Example server query: cached, retried and refetched by TanStack Query. */
+export const useHealth = (enabled = true) =>
+  useQuery({ queryKey: ['health'], queryFn: () => api('/api/health', (d) => healthSchema.parse(d)), enabled, retry: 1 });

package/templates/mobile/common/src/theme/index.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { useColorScheme } from 'react-native';
+import { theme as makeTheme, type Theme } from '__SCOPE__/theme';
+import { useAppearance } from '@/state';
+
+const ThemeContext = createContext<Theme>(makeTheme('dark'));
+
+/** Light/dark from the user's choice in Settings, or the phone's setting when it's "system". */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const system = useColorScheme();
+  const { appearance } = useAppearance();
+  const mode = appearance === 'system' ? (system === 'light' ? 'light' : 'dark') : appearance;
+  const value = useMemo(() => makeTheme(mode), [mode]);
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+export const useTheme = () => useContext(ThemeContext);

package/templates/mobile/common/src/ui/index.tsx

@@ -0,0 +1,37 @@
+import { Pressable, Text as RNText, View, type PressableProps, type TextProps, type ViewProps } from 'react-native';
+import * as Haptics from 'expo-haptics';
+import { useTheme } from '@/theme';
+
+export function Screen({ style, ...rest }: ViewProps) {
+  const t = useTheme();
+  return <View style={[{ flex: 1, backgroundColor: t.colors.background, padding: t.spacing.lg, gap: t.spacing.lg }, style]} {...rest} />;
+}
+
+export function Card({ style, ...rest }: ViewProps) {
+  const t = useTheme();
+  return <View style={[{ backgroundColor: t.colors.surface, borderColor: t.colors.border, borderWidth: 1, borderRadius: t.radius.lg, padding: t.spacing.lg, gap: t.spacing.sm }, style]} {...rest} />;
+}
+
+export function Text({ style, muted, size = 'md', weight = 'regular', ...rest }: TextProps & { muted?: boolean; size?: keyof ReturnType<typeof useTheme>['fontSize']; weight?: keyof ReturnType<typeof useTheme>['fontWeight'] }) {
+  const t = useTheme();
+  return <RNText style={[{ color: muted ? t.colors.textMuted : t.colors.text, fontSize: t.fontSize[size], fontWeight: t.fontWeight[weight] }, style]} {...rest} />;
+}
+
+export function Button({ title, variant = 'primary', onPress, style, ...rest }: PressableProps & { title: string; variant?: 'primary' | 'ghost' }) {
+  const t = useTheme();
+  const primary = variant === 'primary';
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={(e) => { Haptics.selectionAsync().catch(() => {}); onPress?.(e); }}
+      style={(state) => [{
+        backgroundColor: primary ? t.colors.brand : 'transparent',
+        borderColor: primary ? t.colors.brand : t.colors.border,
+        borderWidth: 1, borderRadius: t.radius.md, paddingVertical: t.spacing.md, paddingHorizontal: t.spacing.lg,
+        alignItems: 'center', opacity: state.pressed ? 0.8 : 1,
+      }, typeof style === 'function' ? style(state) : style]}
+      {...rest}>
+      <RNText style={{ color: primary ? t.colors.onBrand : t.colors.text, fontWeight: t.fontWeight.bold, fontSize: t.fontSize.md }}>{title}</RNText>
+    </Pressable>
+  );
+}

package/templates/mobile/common/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}

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

@@ -0,0 +1,4 @@
+/** Ads are off in this project. */
+export function Banner() {
+  return null;
+}

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

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