create-techtiten-app 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Providers } from '@/state/Providers';
+import { ThemeProvider } from '@/theme';
+import { useAppFonts } from '@/theme/fonts';
+
+/** Everything the app needs around it: gestures, safe area, state + query client, theme, fonts.
+ *  Reanimated/Worklets need no setup: babel-preset-expo adds their Babel plugin automatically. */
+export function AppProviders({ children }: { children: ReactNode }) {
+  const fontsLoaded = useAppFonts();
+  if (!fontsLoaded) return null; // the splash screen stays up until fonts are ready
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <Providers>
+          <ThemeProvider>{children}</ThemeProvider>
+        </Providers>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+}

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/screens/Home.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 src/screens/Home.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/src/screens/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/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,41 @@
+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';
+import { fontScale, fonts } from '@/theme/fonts';
+
+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();
+  // Custom fonts carry their weight in the family name (fonts.bold…); the system font uses fontWeight.
+  const family = fonts[weight];
+  const fontSize = Math.round(t.fontSize[size] * fontScale);
+  return <RNText style={[{ color: muted ? t.colors.textMuted : t.colors.text, fontSize, lineHeight: Math.round(fontSize * (fontScale < 1 ? 1.6 : 1.35)) }, family ? { fontFamily: family } : { 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, fontSize: Math.round(t.fontSize.md * fontScale) }, fonts.bold ? { fontFamily: fonts.bold } : { fontWeight: t.fontWeight.bold }]}>{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/nav-stack/app/_layout.tsx

@@ -0,0 +1,33 @@
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { AppProviders } from '@/AppProviders';
+import { useTheme } from '@/theme';
+import { fonts } from '@/theme/fonts';
+
+function ThemedStack() {
+  const t = useTheme();
+  return (
+    <>
+      <StatusBar style={t.mode === 'dark' ? 'light' : 'dark'} />
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: t.colors.background },
+          headerTintColor: t.colors.text,
+          headerTitleStyle: { fontFamily: fonts.bold },
+          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 (
+    <AppProviders>
+      <ThemedStack />
+    </AppProviders>
+  );
+}

package/templates/mobile/nav-stack/app/index.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/Home';

package/templates/mobile/nav-stack/app/settings.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/Settings';

package/templates/mobile/nav-tabs/app/(tabs)/_layout.tsx

@@ -0,0 +1,25 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Tabs } from 'expo-router';
+import { useTheme } from '@/theme';
+import { fonts } from '@/theme/fonts';
+
+export default function TabsLayout() {
+  const t = useTheme();
+  return (
+    <Tabs
+      screenOptions={{
+        headerStyle: { backgroundColor: t.colors.background },
+        headerTintColor: t.colors.text,
+        headerTitleStyle: { fontFamily: fonts.bold },
+        headerShadowVisible: false,
+        tabBarStyle: { backgroundColor: t.colors.surface, borderTopColor: t.colors.border },
+        tabBarActiveTintColor: t.colors.brand,
+        tabBarInactiveTintColor: t.colors.textMuted,
+        tabBarLabelStyle: { fontFamily: fonts.medium },
+        sceneStyle: { backgroundColor: t.colors.background },
+      }}>
+      <Tabs.Screen name="index" options={{ title: '__APP_NAME__', tabBarLabel: 'Home', tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color as string} size={size} /> }} />
+      <Tabs.Screen name="settings" options={{ title: 'Settings', tabBarIcon: ({ color, size }) => <Ionicons name="settings" color={color as string} size={size} /> }} />
+    </Tabs>
+  );
+}

package/templates/mobile/nav-tabs/app/(tabs)/index.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/Home';

package/templates/mobile/nav-tabs/app/(tabs)/settings.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/Settings';

package/templates/mobile/nav-tabs/app/_layout.tsx

@@ -0,0 +1,25 @@
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { AppProviders } from '@/AppProviders';
+import { useTheme } from '@/theme';
+
+function Root() {
+  const t = useTheme();
+  return (
+    <>
+      <StatusBar style={t.mode === 'dark' ? 'light' : 'dark'} />
+      {/* Tabs live in app/(tabs). Push full-screen pages (details, modals) on this stack. */}
+      <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: t.colors.background } }}>
+        <Stack.Screen name="(tabs)" />
+      </Stack>
+    </>
+  );
+}
+
+export default function RootLayout() {
+  return (
+    <AppProviders>
+      <Root />
+    </AppProviders>
+  );
+}

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>
+  );
+}

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,26 @@
+// One theme for the phone app and the website. Change a color here and both update.
+export type Mode = 'light' | 'dark';
+
+// colors.ts is written by create-techtiten-app from the theme preset you picked (__THEME_LABEL__).
+// Edit it freely: both the phone app and the website read it.
+import { colors } from './colors';
+export { colors };
+
+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/.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+.expo
+.next
+dist
+package-lock.json
+apps/mobile/android
+apps/mobile/ios

package/templates/root/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "all"
+}

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,31 @@
+# __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`)
+
+## Upgrade later
+New projects always start on the latest Expo / Next.js. To move this project to newer versions:
+```
+npm run upgrade:mobile   # latest Expo SDK + matching React Native and packages
+npm run upgrade:web      # latest Next.js
+npm run typecheck
+```
+Read the Expo SDK and Next.js release notes first: big versions can need small code changes.

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.