create-100x-mobile 0.2.2 → 0.3.0

package/dist/commands/new.js

@@ -19,6 +19,9 @@ const appJson_1 = require("../templates/config/appJson");
 const tsconfig_1 = require("../templates/config/tsconfig");
 const gitignore_1 = require("../templates/config/gitignore");
 const envExample_1 = require("../templates/config/envExample");
+const prettierrc_1 = require("../templates/config/prettierrc");
+const easJson_1 = require("../templates/config/easJson");
+const readme_1 = require("../templates/config/readme");
 // Convex templates
 const schema_1 = require("../templates/convex/schema");
 const todos_1 = require("../templates/convex/todos");
@@ -84,9 +87,19 @@ async function cmdNew(args) {
         }
         await (0, fs_1.removeDir)(projectDir);
     }
-    // ── Step 2: Create directories ─────────────────────────
+    // ── Determine total steps ────────────────────────────────
+    // Steps: 1=Project structure, 2=Dependencies, 3=Convex setup,
+    //        4=Convex env (if clerkDomain), 5=Git init, 6=Health check
+    // We'll calculate totalSteps after Clerk prompts, but we create the
+    // counter now. We'll adjust totalSteps after Clerk prompts.
+    let currentStep = 0;
+    let totalSteps = 5; // base: structure, deps, convex, git, health check
+    // totalSteps += 1 if clerkDomain (convex env step) — adjusted after Clerk prompts
+    const stepLabel = () => `(${currentStep}/${totalSteps})`;
+    // ── Step: Create directories ─────────────────────────
     const s = (0, prompts_1.spinner)();
-    s.start("Creating project structure");
+    currentStep++;
+    s.start(`Creating project structure ${stepLabel()}`);
     const dirs = [
         "app/(auth)",
         "app/(tabs)",
@@ -108,6 +121,9 @@ async function cmdNew(args) {
         [".gitignore", (0, gitignore_1.gitignoreTemplate)()],
         [".env.example", (0, envExample_1.envExampleTemplate)()],
         ["expo-env.d.ts", (0, tsconfig_1.expoEnvDtsTemplate)()],
+        [".prettierrc", (0, prettierrc_1.prettierrcTemplate)()],
+        ["eas.json", (0, easJson_1.easJsonTemplate)()],
+        ["README.md", (0, readme_1.readmeTemplate)(projectName)],
         // Convex
         ["convex/schema.ts", (0, schema_1.schemaTemplate)()],
         ["convex/todos.ts", (0, todos_1.todosTemplate)()],
@@ -136,8 +152,9 @@ async function cmdNew(args) {
         await (0, fs_1.writeTextFile)((0, node_path_1.join)(projectDir, filePath), content);
     }
     s.stop("Project files created.");
-    // ── Step 4: Install dependencies ───────────────────────
-    prompts_1.log.step("Installing dependencies");
+    // ── Step: Install dependencies ───────────────────────
+    currentStep++;
+    prompts_1.log.step(`Installing dependencies ${stepLabel()}`);
     try {
         await (0, run_1.run)("bun", ["install"], { cwd: projectDir });
     }
@@ -206,7 +223,11 @@ async function cmdNew(args) {
             }
         }
     }
-    // ── Step 6: Write Clerk env vars to .env.local ─────────
+    // Adjust total steps if Clerk domain is configured
+    if (clerkDomain) {
+        totalSteps = 6; // adds convex env step
+    }
+    // ── Write Clerk env vars to .env.local ─────────
     const envLocalPath = (0, node_path_1.join)(projectDir, ".env.local");
     let envContents = "";
     try {
@@ -224,10 +245,15 @@ async function cmdNew(args) {
     if (envContents) {
         await (0, fs_1.writeTextFile)(envLocalPath, envContents);
     }
-    // ── Step 7: Initialize Convex (single run) ─────────────
-    // Only runs once. Convex env vars (set in Step 8) are read at runtime,
-    // so no re-deploy is needed after setting them.
-    prompts_1.log.step("Setting up Convex");
+    // ── Step 6b: Hardcode domain in auth.config.ts ─────────
+    // Convex auth.config.ts is evaluated at deploy time, so process.env
+    // won't have the value yet (we set it after deploy). Hardcode it.
+    if (clerkDomain) {
+        await (0, fs_1.writeTextFile)((0, node_path_1.join)(projectDir, "convex/auth.config.ts"), `export default {\n  providers: [\n    {\n      domain: "${clerkDomain}",\n      applicationID: "convex",\n    },\n  ],\n};\n`);
+    }
+    // ── Step: Initialize Convex (single run) ─────────────
+    currentStep++;
+    prompts_1.log.step(`Setting up Convex ${stepLabel()}`);
     try {
         await (0, run_1.run)("bunx", ["convex", "dev", "--once"], { cwd: projectDir });
         prompts_1.log.success("Convex initialized.");
@@ -273,9 +299,10 @@ async function cmdNew(args) {
     catch {
         // Non-critical — user can set manually
     }
-    // ── Step 9: Set Convex env var for Clerk ───────────────
+    // ── Step: Set Convex env var for Clerk ───────────────
     if (clerkDomain) {
-        prompts_1.log.step("Setting Convex environment variable");
+        currentStep++;
+        prompts_1.log.step(`Setting Convex environment variable ${stepLabel()}`);
         try {
             await (0, run_1.run)("bunx", ["convex", "env", "set", "CLERK_JWT_ISSUER_DOMAIN", clerkDomain], { cwd: projectDir });
             prompts_1.log.success("Convex environment variable set.");
@@ -284,7 +311,65 @@ async function cmdNew(args) {
             prompts_1.log.info(picocolors_1.default.dim(`  Note: Run manually: bunx convex env set CLERK_JWT_ISSUER_DOMAIN ${clerkDomain}`));
         }
     }
-    // ── Step 10: Success message ───────────────────────────
+    // ── Step: Git init ───────────────────────────────────
+    currentStep++;
+    prompts_1.log.step(`Initializing git repository ${stepLabel()}`);
+    try {
+        await (0, run_1.run)("git", ["init"], { cwd: projectDir });
+        await (0, run_1.run)("git", ["add", "-A"], { cwd: projectDir });
+        await (0, run_1.run)("git", ["commit", "-m", "Initial commit from create-100x-mobile"], {
+            cwd: projectDir,
+        });
+        prompts_1.log.success("Git repository initialized.");
+    }
+    catch {
+        prompts_1.log.info(picocolors_1.default.dim("  Note: git is not available. You can initialize a repo later."));
+    }
+    // ── Step: Health check ──────────────────────────────
+    currentStep++;
+    prompts_1.log.step(`Running health check ${stepLabel()}`);
+    const healthChecks = [];
+    // Check .env.local exists
+    const envExists = await (0, fs_1.pathExists)(envLocalPath);
+    healthChecks.push({ label: ".env.local exists", ok: envExists });
+    // Check EXPO_PUBLIC_CONVEX_URL is set
+    if (envExists) {
+        let envContent = "";
+        try {
+            envContent = await (0, fs_2.readTextFile)(envLocalPath);
+        }
+        catch {
+            // ignore
+        }
+        healthChecks.push({
+            label: "EXPO_PUBLIC_CONVEX_URL is set",
+            ok: envContent.includes("EXPO_PUBLIC_CONVEX_URL"),
+        });
+        if (clerkKeyValue) {
+            healthChecks.push({
+                label: "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY is set",
+                ok: envContent.includes("EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY"),
+            });
+        }
+    }
+    else {
+        healthChecks.push({ label: "EXPO_PUBLIC_CONVEX_URL is set", ok: false });
+        if (clerkKeyValue) {
+            healthChecks.push({
+                label: "EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY is set",
+                ok: false,
+            });
+        }
+    }
+    for (const check of healthChecks) {
+        if (check.ok) {
+            prompts_1.log.info(`  ${picocolors_1.default.green("✓")} ${check.label}`);
+        }
+        else {
+            prompts_1.log.info(`  ${picocolors_1.default.yellow("⚠")} ${check.label}`);
+        }
+    }
+    // ── Success message ───────────────────────────────
     prompts_1.log.info("");
     if (clerkKeyValue && clerkDomain) {
         // Clerk is configured — app is ready

package/dist/templates/app/todosScreen.js

@@ -2,8 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.todosScreenTemplate = todosScreenTemplate;
 function todosScreenTemplate() {
-    return `import React, { useState } from "react";
-import { View, Text, ScrollView, StyleSheet, StatusBar } from "react-native";
+    return `import React, { useState, useCallback } from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  StatusBar,
+} from "react-native";
+import Animated, { LinearTransition } from "react-native-reanimated";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { AddTodoForm } from "@/components/AddTodoForm";
 import { TodoItem } from "@/components/TodoItem";
@@ -23,6 +32,8 @@ export interface Todo {
 
 type FilterType = "all" | "active" | "completed";
 
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList<Todo>);
+
 export default function TodosScreen() {
   const [filter, setFilter] = useState<FilterType>("all");
 
@@ -73,47 +84,53 @@ export default function TodosScreen() {
     (todo: Todo) => todo.completed
   ).length;
 
+  const renderItem = useCallback(
+    ({ item }: { item: Todo }) => (
+      <TodoItem todo={item} onToggle={toggleTodo} onDelete={deleteTodo} />
+    ),
+    [toggleTodo, deleteTodo]
+  );
+
+  const keyExtractor = useCallback((item: Todo) => item._id, []);
+
   return (
     <SafeAreaView style={styles.container}>
       <StatusBar barStyle="dark-content" backgroundColor="#FFFFFF" />
-
-      <View style={styles.header}>
-        <Text style={styles.title}>My Tasks</Text>
-        <Text style={styles.subtitle}>
-          {activeTodosCount} active, {completedTodosCount} completed
-        </Text>
-      </View>
-
-      <AddTodoForm onAddTodo={addTodo} />
-
-      <FilterTabs
-        filter={filter}
-        onFilterChange={setFilter}
-        counts={{
-          all: todos.length,
-          active: activeTodosCount,
-          completed: completedTodosCount,
-        }}
-      />
-
-      <ScrollView
-        style={styles.todosContainer}
-        contentContainerStyle={styles.todosContent}
-        showsVerticalScrollIndicator={false}
+      <KeyboardAvoidingView
+        style={styles.keyboardAvoidingView}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
       >
-        {filteredTodos.length === 0 ? (
-          <EmptyState filter={filter} />
-        ) : (
-          filteredTodos.map((todo) => (
-            <TodoItem
-              key={todo._id}
-              todo={todo}
-              onToggle={toggleTodo}
-              onDelete={deleteTodo}
-            />
-          ))
-        )}
-      </ScrollView>
+        <View style={styles.header}>
+          <Text style={styles.title}>My Tasks</Text>
+          <Text style={styles.subtitle}>
+            {activeTodosCount} active, {completedTodosCount} completed
+          </Text>
+        </View>
+
+        <AddTodoForm onAddTodo={addTodo} />
+
+        <FilterTabs
+          filter={filter}
+          onFilterChange={setFilter}
+          counts={{
+            all: todos.length,
+            active: activeTodosCount,
+            completed: completedTodosCount,
+          }}
+        />
+
+        <AnimatedFlatList
+          data={filteredTodos}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          style={styles.todosContainer}
+          contentContainerStyle={styles.todosContent}
+          showsVerticalScrollIndicator={false}
+          itemLayoutAnimation={LinearTransition.springify()}
+          ListEmptyComponent={<EmptyState filter={filter} />}
+          keyboardShouldPersistTaps="handled"
+        />
+      </KeyboardAvoidingView>
     </SafeAreaView>
   );
 }
@@ -123,6 +140,9 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "#FFFFFF",
   },
+  keyboardAvoidingView: {
+    flex: 1,
+  },
   header: {
     paddingHorizontal: 16,
     paddingTop: 24,

package/dist/templates/components/addTodoForm.js

@@ -4,6 +4,12 @@ exports.addTodoFormTemplate = addTodoFormTemplate;
 function addTodoFormTemplate() {
     return `import React, { useState } from "react";
 import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from "react-native-reanimated";
+import * as Haptics from "expo-haptics";
 import { Plus } from "lucide-react-native";
 
 interface AddTodoFormProps {
@@ -12,9 +18,18 @@ interface AddTodoFormProps {
 
 export function AddTodoForm({ onAddTodo }: AddTodoFormProps) {
   const [text, setText] = useState("");
+  const buttonScale = useSharedValue(1);
+
+  const buttonAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: buttonScale.value }],
+  }));
 
   const handleSubmit = () => {
     if (text.trim()) {
+      buttonScale.value = withSpring(0.9, { damping: 15 }, () => {
+        buttonScale.value = withSpring(1, { damping: 15 });
+      });
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
       onAddTodo(text);
       setText("");
     }
@@ -25,7 +40,7 @@ export function AddTodoForm({ onAddTodo }: AddTodoFormProps) {
       <View style={styles.inputContainer}>
         <TextInput
           style={styles.input}
-          placeholder="Add a new task..."
+          placeholder="Add a new task\u2026"
           placeholderTextColor="#9CA3AF"
           value={text}
           onChangeText={setText}
@@ -33,18 +48,20 @@ export function AddTodoForm({ onAddTodo }: AddTodoFormProps) {
           returnKeyType="done"
           multiline={false}
         />
-        <TouchableOpacity
-          style={[styles.addButton, !text.trim() && styles.addButtonDisabled]}
-          onPress={handleSubmit}
-          disabled={!text.trim()}
-          activeOpacity={0.7}
-        >
-          <Plus
-            size={20}
-            color={text.trim() ? "#FFFFFF" : "#9CA3AF"}
-            strokeWidth={2.5}
-          />
-        </TouchableOpacity>
+        <Animated.View style={buttonAnimatedStyle}>
+          <TouchableOpacity
+            style={[styles.addButton, !text.trim() && styles.addButtonDisabled]}
+            onPress={handleSubmit}
+            disabled={!text.trim()}
+            activeOpacity={0.7}
+          >
+            <Plus
+              size={20}
+              color={text.trim() ? "#FFFFFF" : "#9CA3AF"}
+              strokeWidth={2.5}
+            />
+          </TouchableOpacity>
+        </Animated.View>
       </View>
     </View>
   );

package/dist/templates/components/filterTabs.js

@@ -4,6 +4,7 @@ exports.filterTabsTemplate = filterTabsTemplate;
 function filterTabsTemplate() {
     return `import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import * as Haptics from "expo-haptics";
 
 type FilterType = "all" | "active" | "completed";
 
@@ -24,13 +25,18 @@ export function FilterTabs({ filter, onFilterChange, counts }: FilterTabsProps)
     { key: "completed", label: "Done" },
   ];
 
+  const handlePress = (key: FilterType) => {
+    Haptics.selectionAsync();
+    onFilterChange(key);
+  };
+
   return (
     <View style={styles.container}>
       {tabs.map((tab) => (
         <TouchableOpacity
           key={tab.key}
           style={[styles.tab, filter === tab.key && styles.tabActive]}
-          onPress={() => onFilterChange(tab.key)}
+          onPress={() => handlePress(tab.key)}
           activeOpacity={0.7}
         >
           <Text

package/dist/templates/components/todoItem.js

@@ -4,6 +4,13 @@ exports.todoItemTemplate = todoItemTemplate;
 function todoItemTemplate() {
     return `import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import Animated, {
+  FadeInDown,
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from "react-native-reanimated";
+import * as Haptics from "expo-haptics";
 import { Check, X } from "lucide-react-native";
 import type { Todo } from "@/app/(tabs)/index";
 import { Id } from "../convex/_generated/dataModel";
@@ -15,38 +22,63 @@ interface TodoItemProps {
 }
 
 export function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
+  const checkboxScale = useSharedValue(1);
+
+  const checkboxAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: checkboxScale.value }],
+  }));
+
+  const handleToggle = () => {
+    checkboxScale.value = withSpring(0.85, { damping: 15 }, () => {
+      checkboxScale.value = withSpring(1, { damping: 15 });
+    });
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    onToggle(todo._id);
+  };
+
+  const handleDelete = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    onDelete(todo._id);
+  };
+
   return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        style={styles.checkboxHitArea}
-        onPress={() => onToggle(todo._id)}
-        activeOpacity={0.7}
-      >
-        <View
-          style={[styles.checkbox, todo.completed && styles.checkboxCompleted]}
+    <Animated.View entering={FadeInDown.duration(300).springify()}>
+      <View style={styles.container}>
+        <TouchableOpacity
+          style={styles.checkboxHitArea}
+          onPress={handleToggle}
+          activeOpacity={0.7}
         >
-          {todo.completed && (
-            <Check size={14} color="#FFFFFF" strokeWidth={3} />
-          )}
+          <Animated.View
+            style={[
+              styles.checkbox,
+              todo.completed && styles.checkboxCompleted,
+              checkboxAnimatedStyle,
+            ]}
+          >
+            {todo.completed && (
+              <Check size={14} color="#FFFFFF" strokeWidth={3} />
+            )}
+          </Animated.View>
+        </TouchableOpacity>
+
+        <View style={styles.content}>
+          <Text
+            style={[styles.text, todo.completed && styles.textCompleted]}
+          >
+            {todo.text}
+          </Text>
         </View>
-      </TouchableOpacity>
 
-      <View style={styles.content}>
-        <Text
-          style={[styles.text, todo.completed && styles.textCompleted]}
+        <TouchableOpacity
+          style={styles.deleteHitArea}
+          onPress={handleDelete}
+          activeOpacity={0.7}
         >
-          {todo.text}
-        </Text>
+          <X size={18} color="#9CA3AF" strokeWidth={2} />
+        </TouchableOpacity>
       </View>
-
-      <TouchableOpacity
-        style={styles.deleteHitArea}
-        onPress={() => onDelete(todo._id)}
-        activeOpacity={0.7}
-      >
-        <X size={18} color="#9CA3AF" strokeWidth={2} />
-      </TouchableOpacity>
-    </View>
+    </Animated.View>
   );
 }
 

package/dist/templates/config/easJson.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.easJsonTemplate = easJsonTemplate;
+function easJsonTemplate() {
+    const config = {
+        cli: {
+            version: ">= 15.0.0",
+        },
+        build: {
+            development: {
+                developmentClient: true,
+                distribution: "internal",
+            },
+            preview: {
+                distribution: "internal",
+            },
+            production: {},
+        },
+        submit: {
+            production: {},
+        },
+    };
+    return JSON.stringify(config, null, 2) + "\n";
+}

package/dist/templates/config/packageJson.js

@@ -11,6 +11,7 @@ function packageJsonTemplate(appName) {
             dev: "EXPO_NO_TELEMETRY=1 expo start",
             "build:web": "expo export --platform web",
             lint: "expo lint",
+            format: "prettier --write .",
         },
         dependencies: {
             "@clerk/clerk-expo": "^2.14.24",
@@ -23,6 +24,7 @@ function packageJsonTemplate(appName) {
             "expo-blur": "~15.0.8",
             "expo-constants": "~18.0.13",
             "expo-font": "~14.0.10",
+            "expo-haptics": "~14.0.4",
             "expo-linking": "~8.0.11",
             "expo-router": "~6.0.21",
             "expo-secure-store": "~15.0.8",
@@ -46,6 +48,7 @@ function packageJsonTemplate(appName) {
             "@types/react": "~19.1.10",
             eslint: "^9.0.0",
             "eslint-config-expo": "~10.0.0",
+            prettier: "^3.4.2",
             typescript: "~5.9.2",
         },
     };

package/dist/templates/config/prettierrc.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prettierrcTemplate = prettierrcTemplate;
+function prettierrcTemplate() {
+    const config = {
+        semi: true,
+        singleQuote: false,
+        tabWidth: 2,
+        trailingComma: "es5",
+    };
+    return JSON.stringify(config, null, 2) + "\n";
+}

package/dist/templates/config/readme.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readmeTemplate = readmeTemplate;
+function readmeTemplate(projectName) {
+    return `# ${projectName}
+
+A full-stack mobile app built with **Expo**, **Convex**, and **Clerk**.
+
+## Tech Stack
+
+- **[Expo](https://expo.dev)** — React Native framework
+- **[Convex](https://convex.dev)** — Backend & real-time database
+- **[Clerk](https://clerk.com)** — Authentication (Google & Apple OAuth)
+- **[Expo Router](https://docs.expo.dev/router/introduction/)** — File-based navigation
+- **[React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/)** — Animations
+
+## Getting Started
+
+\`\`\`bash
+# Install dependencies
+bun install
+
+# Start the Convex dev server
+bunx convex dev
+
+# Start Expo (in a separate terminal)
+bunx expo start
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+├── app/
+│   ├── _layout.tsx          # Root layout with providers
+│   ├── +not-found.tsx       # 404 screen
+│   ├── (auth)/              # Auth screens (sign-in)
+│   ├── (tabs)/              # Tab navigation (todos, settings)
+│   └── providers/           # Auth provider
+├── components/              # Reusable UI components
+├── convex/                  # Backend functions & schema
+├── hooks/                   # Custom React hooks
+└── assets/                  # Images and static assets
+\`\`\`
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| \`bun run dev\` | Start Expo dev server |
+| \`bun run lint\` | Run ESLint |
+| \`bun run format\` | Format code with Prettier |
+| \`bunx convex dev\` | Start Convex dev server |
+
+## Deployment
+
+### EAS Build
+
+\`\`\`bash
+# Development build
+bunx eas build --profile development --platform ios
+
+# Production build
+bunx eas build --profile production --platform all
+\`\`\`
+
+### Convex
+
+\`\`\`bash
+bunx convex deploy
+\`\`\`
+
+## Learn More
+
+- [Expo Docs](https://docs.expo.dev)
+- [Convex Docs](https://docs.convex.dev)
+- [Clerk Docs](https://clerk.com/docs)
+`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-100x-mobile",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Scaffold a full-stack mobile app with Expo + Convex + Clerk in seconds",
   "main": "dist/cli.js",
   "bin": {