docs: add mobile/Expo frontend, drop Tailwind/TanStack mention

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

README.md

@@ -1,12 +1,16 @@
 # create-glstack
 
-Scaffold a fullstack application with a Go backend, PostgreSQL database, and your choice of frontend framework, connected via Connect RPC.
+Scaffold a fullstack application with a Go backend, PostgreSQL database, and your choice of web and mobile frontends, connected via Connect RPC.
 
-Supported frontends:
+Supported web frontends:
 
 - [SvelteKit](https://kit.svelte.dev/)
 - [Solid Start](https://start.solidjs.com/)
 
+Supported mobile frontends:
+
+- [React Native + Expo](https://expo.dev/)
+
 ## Usage
 
 ```sh
@@ -18,7 +22,8 @@ bun create glstack
 A monorepo with the following structure:
 
 - **`services/api`** -- Go backend using [Cobra](https://github.com/spf13/cobra) for CLI, [pgx](https://github.com/jackc/pgx) for Postgres, and [Connect RPC](https://connectrpc.com/) for the API layer
-- **`apps/web`** -- Frontend app (SvelteKit or Solid Start) with TailwindCSS and [TanStack Query](https://tanstack.com/query)
+- **`apps/web`** -- Web frontend app (SvelteKit or Solid Start)
+- **`apps/mobile`** -- Optional [React Native + Expo](https://expo.dev/) mobile app sharing the same RPC client
 - **`packages/proto`** -- Protobuf service definitions with [Buf](https://buf.build/) for codegen (Go + TypeScript)
 - **`packages/rpc`** -- Generated TypeScript Connect RPC client shared across frontend apps
 

index.ts

@@ -28,6 +28,15 @@ const project = await p.group(
         ]
       })
     ,
+    mobile: async () =>
+      await p.select({
+        message: 'Pick a mobile framework.',
+        options: [
+          { value: "expo", label: "ReactNative + Expo" },
+          { value: "none", label: "None" }
+        ]
+      })
+    ,
     goprefix: () =>
       p.text({
         message: "What would you like to use as a go package prefix?",
@@ -37,6 +46,9 @@ const project = await p.group(
           return undefined
         },
       }),
+    installDeps: async () => {
+      return await p.confirm({message: "Install dependencies?", })
+    }
   },
   {
     onCancel: () => {
@@ -53,18 +65,17 @@ const render = createRenderer(z.object({
     name: z.string(),
     goprefix: z.string(),
     frontend: z.string(),
+    mobile: z.string()
   })
 }))
 const destDir = path.join("./", project.name);
 render(destDir, { project }, { reverseMap: true })
 
 const s = p.spinner();
+if (project.installDeps) {
   s.start("Installing dependencies");
   await Bun.$`bun install`.cwd(path.join(destDir)).quiet();
-await Bun.$`bun install`.cwd(path.join(destDir,'packages','rpc')).quiet();
-if (project.frontend !== "none") {
-  await Bun.$`bun install`.cwd(path.join(destDir,'apps','web')).quiet();
-}
   s.stop("Dependencies installed.");
+}
 
 p.outro("You're all set!");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-glstack",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "license": "MIT",
   "bin": {

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/.ignore

@@ -1 +0,0 @@
-node_modules

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example-basic",
+  "name": "example-bare",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
@@ -9,16 +9,9 @@
   },
   "dependencies": {
     "@<@var(context.project.name)>/rpc": "workspace:*",
-    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.0",
     "@solidjs/start": "2.0.0-alpha.2",
     "@solidjs/vite-plugin-nitro-2": "^0.1.0",
-    "@tailwindcss/vite": "^4.2.2",
-    "@tanstack/query-db-collection": "^1.0.35",
-    "@tanstack/solid-db": "^0.2.18",
-    "@tanstack/solid-query": "^5.96.2",
     "solid-js": "^1.9.5",
-    "tailwindcss": "^4.2.2",
     "vite": "^7.0.0"
   },
   "engines": {

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/app.css

@@ -1,5 +1,61 @@
-@import "tailwindcss";
-
 body {
   font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
+
+a {
+  margin-right: 1rem;
+}
+
+main {
+  text-align: center;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+h1 {
+  color: #335d92;
+  text-transform: uppercase;
+  font-size: 4rem;
+  font-weight: 100;
+  line-height: 1.1;
+  margin: 4rem auto;
+  max-width: 14rem;
+}
+
+p {
+  max-width: 14rem;
+  margin: 2rem auto;
+  line-height: 1.35;
+}
+
+@media (min-width: 480px) {
+  h1 {
+    max-width: none;
+  }
+
+  p {
+    max-width: none;
+  }
+}
+
+.increment {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 1em 2em;
+  color: #335d92;
+  background-color: rgba(68, 107, 158, 0.1);
+  border-radius: 2em;
+  border: 2px solid rgba(68, 107, 158, 0);
+  outline: none;
+  width: 200px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.increment:focus {
+  border: 2px solid #335d92;
+}
+
+.increment:active {
+  background-color: rgba(68, 107, 158, 0.2);
+}

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/app.tsx

@@ -1,58 +1,58 @@
-import { MetaProvider, Title } from "@solidjs/meta";
-import { Router } from "@solidjs/router";
-import { FileRoutes } from "@solidjs/start/router";
-import { Suspense } from "solid-js";
-import { createCollection } from '@tanstack/solid-db'
-import { queryCollectionOptions } from '@tanstack/query-db-collection'
-import type { Todo, ExtractPayload } from '@<@var(context.project.name)>/rpc'
-import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
-import { getRouter } from "./lib/getRouter"
+import { createSignal, For } from "solid-js";
+import { createRouter, Todo } from "@<@var(context.project.name)>/rpc"
+import { createEffect } from 'solid-js'
 import "./app.css";
-import { TodoCollectionProvider } from "./context/todocollection/provider";
-const queryClient = new QueryClient({
 
-})
-const router = getRouter();
 export default function App() {
-  const todosCollection = createCollection(
-    queryCollectionOptions({
-      queryKey: ["todos"],
-      queryFn: async () => {
-        const todos = await router.todos.listTodos({})
-        return todos.todos as ExtractPayload<Todo>[];
-      },
-      queryClient,
-      getKey: (item) => item.id ? item.id : crypto.randomUUID(),
-      onInsert: async ({ transaction }) => {
-        Promise.all(transaction.mutations.map((m) => {
-          router.todos.createTodo({ todo: m.modified })
-        }))
-      },
-      onDelete: async ({ transaction }) => {
-        Promise.all(transaction.mutations.map((m) => {
-          router.todos.deleteTodo({ todo: m.modified })
-        }))
-      },
-      onUpdate: async ({ transaction }) => {
-        Promise.all(transaction.mutations.map((m) => {
-          router.todos.updateTodo({ todo: m.modified })
-        }))
-      }
+  const router = createRouter("http://127.0.0.1:8080")
+  const [todos, setTodos] = createSignal<Todo[]>([]);
+  const [todoToCreateTask, setTodoToCreateTask] = createSignal<string>("");
+  const fetchTodos = () => {
+    router.todos.listTodos({}).then((r) => {
+      setTodos(r.todos)
     })
-  )
+  }
+  createEffect(() => {
+    fetchTodos()
+  })
+
+  const setTodoDone =  (id: string, task: string) => {
+    return async (event : Event & { currentTarget: HTMLInputElement }) => {
+      await router.todos.updateTodo({ todo: { id, task, done: event.currentTarget.checked } })
+      fetchTodos()
+    }
+  }
+
+  const deleteTodo = (id: string) => {
+    return async () => {
+      await router.todos.deleteTodo({ todo: { id } })
+      fetchTodos()
+    }
+  }
+
+  const createTodo = () => {
+    router.todos.createTodo({ todo: { id: crypto.randomUUID(), task: todoToCreateTask() } }).then((r) => {
+      console.log(r)
+      fetchTodos()
+    }).catch((e) => {
+      console.log(e)
+    })
+  }
+
   return (
-    <Router
-      root={props => (
-        <MetaProvider>
-          <QueryClientProvider client={queryClient} >
-            <TodoCollectionProvider value={todosCollection}>
-              <Suspense>{props.children}</Suspense>
-            </TodoCollectionProvider>
-          </QueryClientProvider>
-        </MetaProvider>
-      )}
-    >
-      <FileRoutes/>
-    </Router>
+    <div>
+      <p>Create Todo</p>
+      <input value={todoToCreateTask()} onInput={(e) => setTodoToCreateTask(e.currentTarget.value)} type="text"/>
+      <button onclick={createTodo}> create </button>
+      <For each={todos()}>
+      {(item:Todo) =>
+        <div>
+          {item.task}
+          <input type='checkbox' checked={item.done} onChange={setTodoDone(item.id || "",item.task)}/>
+          <button onclick={deleteTodo(item.id || "")}>delete</button>
+        </div>
+      }
+      </For>
+    </div>
   );
 }

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/components/CreateTodo.tsx

@@ -1,38 +0,0 @@
-import { ExtractPayload, type Todo } from '@<@var(context.project.name)>/rpc'
-import { createSignal } from 'solid-js';
-import { useTodoCollection } from '~/context/todocollection/create';
-
-export const CreateTodo = () => {
-  const [todoState, setTodoState] = createSignal<ExtractPayload<Todo>>({
-    id: crypto.randomUUID(),
-    task: "",
-    done: false,
-  })
-
-  let inputRef!: HTMLInputElement
-
-  const setTask = () => {
-    const todo = {...todoState()}
-    todo.task = inputRef.value;
-    setTodoState(todo)
-  }
-
-  const todoCollection = useTodoCollection()
-
-  const insertTodo = () => {
-    todoCollection.insert(todoState())
-    setTodoState({
-      id: crypto.randomUUID(),
-      task: "",
-      done: false
-    })
-    inputRef.value = "";
-  }
-
-  return (
-    <>
-      <input class="border rounded-md px-3 py-1" ref={inputRef} type='text' onInput={setTask} />
-      <button class="bg-teal-800 text-teal-100 p-1 rounded-md cursor-pointer" onClick={insertTodo}> create </button>
-    </>
-  )
-}

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/components/ListTodos.tsx

@@ -1,29 +0,0 @@
-import { useLiveQuery } from "@tanstack/solid-db";
-import { useTodoCollection } from "~/context/todocollection/create";
-import { Todo } from './Todo'
-import { For } from 'solid-js'
-
-export const ListTodos = () => {
-  const todoCollection = useTodoCollection()
-  const data = useLiveQuery((q) =>
-    q.from({todos: todoCollection})
-  )
-  const todos = () => {
-    const items = Array.from(data.state.values());
-    return items.sort((a: any, b: any) => {
-      if (a.done != b.done) return a.done ? -1 : 1
-      if (!a.done && !b.done) {
-        const adate = a.createdAt ? new Date(a.createdAt) : new Date()
-        const bdate = b.createdAt ? new Date(b.createdAt) : new Date()
-        return bdate.getTime() - adate.getTime()
-      }
-      return 0
-    })
-  }
-
-  return (
-    <For each={todos()} fallback={<div>Loading...</div>}>
-      {(item) => <Todo todo={item} />}
-    </For>
-  )
-}

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/components/Todo.tsx

@@ -1,44 +0,0 @@
-import { ExtractPayload, type Todo as RpcTodo } from '@<@var(context.project.name)>/rpc'
-import { createSignal, type JSX } from 'solid-js';
-import { useTodoCollection } from '~/context/todocollection/create';
-
-export const Todo = ({ todo }: { todo: ExtractPayload<RpcTodo> }) => {
-  const [todoState, setTodoState] = createSignal(todo)
-  const todoCollection = useTodoCollection()
-  let commitUpdateTimeoutId: NodeJS.Timeout|null = null;
-  const updateTask: JSX.EventHandlerUnion<HTMLInputElement, Event> = (e) => {
-    if (commitUpdateTimeoutId != null) {
-      clearTimeout(commitUpdateTimeoutId)
-    }
-    const todo = { ...todoState() };
-    todo.task = e.currentTarget.value
-    setTodoState(todo)
-    commitUpdateTimeoutId = setTimeout(() => {
-      todoCollection.update(todoState().id, (draft) => {
-        draft.task = todoState().task
-      })
-    },3000)
-
-  }
-  const updateDone: JSX.EventHandlerUnion<HTMLInputElement, Event> = (e) => {
-    const todo = { ...todoState() }
-    todo.done = e.currentTarget.checked
-    setTodoState(todo)
-    todoCollection.update(todoState().id, (draft) => {
-      draft.done = todoState().done
-    })
-  }
-  const del = () => {
-    todoCollection.delete(todoState().id || "")
-  }
-  return (
-    <div class="flex flex-col items-center border rounded-md p-5 gap-2">
-      <input class="text-center border rounded-md px-3 py-1" oninput={updateTask} type="text" value={todoState().task} />
-      <span> {(new Date(todoState().createdAt || "")).toLocaleString()}</span>
-      <span> {(new Date(todoState().updatesAt || "")).toLocaleString()}</span>
-      <input type="checkbox" onchange={updateDone} checked={todoState().done} />
-      <button class="bg-amber-800 text-amber-100 p-1 rounded-md cursor-pointer" onclick={del} class=""> delete </button>
-    </div>
-  )
-}
-

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/context/todocollection/create.ts

@@ -1,12 +0,0 @@
-import { createContext,useContext } from 'solid-js'
-import { type CollectionImpl, type CollectionLike } from '@tanstack/solid-db'
-import  type { ExtractPayload, Todo } from '@<@var(context.project.name)>/rpc';
-export type TodoCollection = CollectionImpl<ExtractPayload<Todo>>
-export const TodoCollectionContext = createContext<TodoCollection>()
-export const useTodoCollection = () => {
-  const col = useContext(TodoCollectionContext)
-  if (col === undefined) {
-    throw new Error("Todo collection has not been initialized")
-  }
-  return col;
-}

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/context/todocollection/provider.tsx

@@ -1,8 +0,0 @@
-import { JSXElement } from 'solid-js';
-import { TodoCollection, TodoCollectionContext } from './create'
-
-export const TodoCollectionProvider = (props : {children:JSXElement, value: TodoCollection}) => {
-  return (
-    <TodoCollectionContext.Provider value={props.value}> {props.children} </TodoCollectionContext.Provider>
-  )
-}

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/lib/getRouter.ts

@@ -1,7 +0,0 @@
-import { createRouter } from "@<@var(context.project.name)>/rpc"
-
-const router = createRouter("http://127.0.0.1:8080")
-
-export const getRouter = () => {
-  return router;
-}

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/routes/[...404].tsx

@@ -1,19 +0,0 @@
-import { Title } from "@solidjs/meta";
-import { HttpStatusCode } from "@solidjs/start";
-
-export default function NotFound() {
-  return (
-    <main>
-      <Title>Not Found</Title>
-      <HttpStatusCode code={404} />
-      <h1>Page Not Found</h1>
-      <p>
-        Visit{" "}
-        <a href="https://start.solidjs.com" target="_blank">
-          start.solidjs.com
-        </a>{" "}
-        to learn how to build SolidStart apps.
-      </p>
-    </main>
-  );
-}

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/src/routes/index.tsx

@@ -1,13 +0,0 @@
-import { Title } from "@solidjs/meta";
-import { CreateTodo } from "~/components/CreateTodo";
-import { ListTodos } from "~/components/ListTodos"
-export default function Home() {
-  return (
-    <main class="flex flex-col items-center gap-2 py-5">
-      <Title>Todos</Title>
-      <h1 class="text-5xl"> Todos </h1>
-      <CreateTodo/>
-      <ListTodos/>
-    </main>
-  );
-}

template/apps/<@if(eq(context.project.frontend,"solid-start"))>web/vite.config.ts

@@ -1,12 +1,10 @@
 import { defineConfig } from "vite";
 import { nitroV2Plugin as nitro } from "@solidjs/vite-plugin-nitro-2";
-import  tailwindcss  from '@tailwindcss/vite'
+
 import { solidStart } from "@solidjs/start/config";
 
 export default defineConfig({
-  plugins: [
-    solidStart(),
-    nitro(),
-    tailwindcss()
+  plugins: [solidStart(),
+    nitro()
   ]
 });

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/package.json

@@ -21,14 +21,6 @@
 		"vite": "^8.0.7"
 	},
 	"dependencies": {
-		"@bufbuild/protobuf": "^2.11.0",
-		"@connectrpc/connect": "^2.1.1",
-		"@connectrpc/connect-web": "^2.1.1",
-		"@<@var(context.project.name)>/rpc": "workspace:*",
-		"@tailwindcss/vite": "^4.3.0",
-		"@tanstack/query-db-collection": "^1.0.33",
-		"@tanstack/svelte-db": "^0.1.79",
-		"@tanstack/svelte-query": "^6.1.13",
-		"tailwindcss": "^4.3.0"
+		"@<@var(context.project.name)>/rpc": "workspace:*"
 	}
 }

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/src/app.css

@@ -1 +0,0 @@
-import @tailwindcss;

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/src/lib/components/CreateTodo.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { ExtractPayload, Todo } from '@<@var(context.project.name)>/rpc';
-	import { getTodoCollection } from '$lib/todocollectionscontext';
-
-	const todoCollection = getTodoCollection();
-	let todo = $state<ExtractPayload<Todo>>({
-		id: crypto.randomUUID(),
-		task: '',
-		done: false
-	});
-
-	const insertTodo = () => {
-		todoCollection.insert({ ...todo });
-		todo = {
-			id: crypto.randomUUID(),
-			task: '',
-			done: false
-		};
-	};
-</script>
-
-<input class="rounded-md border px-3 py-1" type="text" bind:value={todo.task} />
-<button class="cursor-pointer rounded-md bg-teal-800 p-1 text-teal-100" onclick={insertTodo}>
-	create
-</button>

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/src/lib/components/ListTodos.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import { getTodoCollection } from '$lib/todocollectionscontext';
-	import { useLiveQuery } from '@tanstack/svelte-db';
-	import Todo from './Todo.svelte';
-
-	const todoCollection = getTodoCollection();
-	const data = useLiveQuery((q) => q.from({ todos: todoCollection }));
-	const todos = $derived.by(() => {
-		return data.data.toSorted((a, b) => {
-			if (a.done != b.done) {
-				return a.done ? -1 : 1;
-			}
-			if (!a.done && !b.done) {
-				const adate = a.createdAt ? new Date(a.createdAt) : new Date();
-				const bdate = b.createdAt ? new Date(b.createdAt) : new Date();
-				return bdate.getTime() - adate.getTime();
-			}
-			return 0;
-		});
-	});
-</script>
-
-{#if data.isLoading}
-	<div>Loading...</div>
-{:else}
-	{#each todos as todo (todo.id)}
-		<Todo {todo} />
-	{/each}
-{/if}

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/src/lib/components/Todo.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import type { ExtractPayload, Todo as RpcTodo } from '@<@var(context.project.name)>/rpc';
-	import { getTodoCollection } from '$lib/todocollectionscontext';
-
-	let { todo }: { todo: ExtractPayload<RpcTodo> } = $props();
-	const getInitialTodo = () => todo;
-	let todoState = $state<ExtractPayload<RpcTodo>>({ ...getInitialTodo() });
-	let commitUpdateTimeoutId: ReturnType<typeof setTimeout> | null = null;
-
-	const todoCollection = getTodoCollection();
-
-	const updateTask = () => {
-		if (commitUpdateTimeoutId != null) {
-			clearTimeout(commitUpdateTimeoutId);
-		}
-
-		commitUpdateTimeoutId = setTimeout(() => {
-			todoCollection.update(todoState.id, (draft) => {
-				draft.task = todoState.task;
-			});
-		}, 3000);
-	};
-
-	const updateDone = () => {
-		todoCollection.update(todoState.id, (draft) => {
-			draft.done = todoState.done;
-		});
-	};
-
-	const del = () => {
-		todoCollection.delete(todoState.id || '');
-	};
-</script>
-
-<div class="flex flex-col items-center gap-2 rounded-md border p-5">
-	<input
-		class="rounded-md border px-3 py-1 text-center"
-		type="text"
-		bind:value={todoState.task}
-		oninput={updateTask}
-	/>
-	<span>{new Date(todoState.createdAt || '').toLocaleString()}</span>
-	<span>{new Date(todoState.updatesAt || '').toLocaleString()}</span>
-	<input type="checkbox" bind:checked={todoState.done} onchange={updateDone} />
-	<button class="cursor-pointer rounded-md bg-amber-800 p-1 text-amber-100" onclick={del}>
-		delete
-	</button>
-</div>

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/src/lib/getconnectrouter.ts

@@ -1,8 +0,0 @@
-import {createRouter} from '@<@var(context.project.name)>/rpc'
-
-const router = createRouter("http://127.0.0.1:8080")
-
-export const getRouter = () => {
-  return router;
-}
-

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/src/lib/todocollectionscontext.ts

@@ -1,4 +0,0 @@
-import { createContext } from "svelte";
-import { type CollectionImpl } from '@tanstack/svelte-db'
-import type { Todo, ExtractPayload } from "@<@var(context.project.name)>/rpc";
-export const [getTodoCollection,setTodoCollection] = createContext<CollectionImpl<ExtractPayload<Todo>,string>>()

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/src/routes/+layout.svelte

@@ -1,53 +1,11 @@
 <script lang="ts">
-	import { createCollection } from '@tanstack/svelte-db';
-	import { queryCollectionOptions } from '@tanstack/query-db-collection';
-	import { getRouter } from "$lib/getconnectrouter"
 	import favicon from '$lib/assets/favicon.svg';
-	import "../app.css"
-  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
-    import type { ExtractPayload, Todo } from '@<@var(context.project.name)>/rpc';
-    import { browser } from '$app/environment';
-	import { setTodoCollection } from '$lib/todocollectionscontext';
 
 	let { children } = $props();
-	const router = getRouter()
-	const queryClient = new QueryClient({
-		defaultOptions: {
-			queries: {
-				enabled: browser
-			}
-		},
-	})
-	const todosCollection = createCollection(
-		queryCollectionOptions({
-			queryKey: ["todos"],
-			queryFn: async () => {
-				const todos = await router.todos.listTodos({})
-				return todos.todos as ExtractPayload<Todo>[];
-			},
-			queryClient,
-			getKey: (item) => item.id ? item.id : crypto.randomUUID(),
-			onInsert: async ({transaction}) => {
-				Promise.all(transaction.mutations.map((m) => {
-					router.todos.createTodo({ todo: m.modified })
-				}))
-			},
-			onDelete: async ({transaction}) => {
-				Promise.all(transaction.mutations.map((m) => {
-					router.todos.deleteTodo({todo: m.modified})
-				}))
-			},
-			onUpdate: async ({transaction}) => {
-				Promise.all(transaction.mutations.map((m) => {
-					router.todos.updateTodo({todo: m.modified})
-				}))
-			}
-		})
-	)
-	setTodoCollection(todosCollection)
 </script>
 
+<svelte:head>
+	<link rel="icon" href={favicon} />
+</svelte:head>
 
-<QueryClientProvider client={queryClient}>
 {@render children()}
-</QueryClientProvider>

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/src/routes/+page.svelte

@@ -1,11 +1,51 @@
-<script>
-  import CreateTodo from "$lib/components/CreateTodo.svelte";
-  import ListTodos from "$lib/components/ListTodos.svelte";
+<script lang="ts">
+  import { createRouter, type Todo } from "@glstack-test/rpc"
+    import type { ChangeEventHandler } from "svelte/elements";
+  const router = createRouter("http://127.0.0.1:8080");
+  let todos = $state<Todo[]>([])
+  let todoToCreateTask = $state<string>("")
+  const fetchTodos = () => {
+    router.todos.listTodos({}).then((r) => {
+      todos = r.todos;
+    })
+  }
+  $effect(() => {
+    fetchTodos()
+  })
+
+  const setTodoDone =  (id: string, task: string) => {
+    return async (event : Event & { currentTarget: HTMLInputElement }) => {
+      await router.todos.updateTodo({ todo: { id, task, done: event.currentTarget.checked } })
+      fetchTodos()
+    }
+  }
+
+  const deleteTodo = (id: string) => {
+    return async () => {
+      await router.todos.deleteTodo({ todo: { id } })
+      fetchTodos()
+    }
+  }
+
+  const createTodo = () => {
+    router.todos.createTodo({ todo: { id: crypto.randomUUID(), task: todoToCreateTask } }).then((r) => {
+      console.log(r)
+      fetchTodos()
+    }).catch((e) => {
+      console.log(e)
+    })
+  }
 </script>
 
-<main class="flex flex-col items-center gap-2 py-5">
-  <title>Todos</title>
-  <h1 class="text-5xl"> Todos </h1>
-  <CreateTodo/>
-  <ListTodos/>
-</main>
+<div>
+  <h1>Create Todo</h1>
+  <input bind:value={todoToCreateTask} type="text"/>
+  <button onclick={createTodo}> create </button>
+  {#each todos as todo (todo.id)}
+  <div>
+    {todo.task}
+    <input type='checkbox' onchange={setTodoDone(todo.id || "",todo.task)}/>
+    <button onclick={deleteTodo(todo.id || "")}>delete</button>
+  </div>
+  {/each}
+</div>

template/apps/<@if(eq(context.project.frontend,"svelte-kit"))>web/vite.config.ts

@@ -1,9 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
-import tailwindcss from '@tailwindcss/vite'
+
 export default defineConfig({
-	plugins: [
-		tailwindcss(),
-		sveltekit(),
-	]
+	plugins: [sveltekit()]
 });

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/.claude/settings.json

@@ -0,0 +1,5 @@
+{
+  "enabledPlugins": {
+    "expo@claude-plugins-official": true
+  }
+}

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/.gitignore

@@ -0,0 +1,43 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+example
+
+# generated native folders
+/ios
+/android

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/.ignore

@@ -0,0 +1,4 @@
+.expo
+android
+node_modules
+assets

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/.vscode/extensions.json

@@ -0,0 +1 @@
+{ "recommendations": ["expo.vscode-expo-tools"] }

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
+  }
+}

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/AGENTS.md

@@ -0,0 +1,3 @@
+# Expo HAS CHANGED
+
+Read the exact versioned docs at https://docs.expo.dev/versions/v56.0.0/ before writing any code.

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/app.json

@@ -0,0 +1,45 @@
+{
+  "expo": {
+    "name": "mobile",
+    "slug": "mobile",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "mobile",
+    "userInterfaceStyle": "automatic",
+    "ios": {
+      "icon": "./assets/expo.icon"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "backgroundImage": "./assets/images/android-icon-background.png",
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+      },
+      "predictiveBackGestureEnabled": false,
+      "package": "com.gregorl.mobile"
+    },
+    "web": {
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "backgroundColor": "#208AEF",
+          "android": {
+            "image": "./assets/images/splash-icon.png",
+            "imageWidth": 76
+          }
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    }
+  }
+}

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/assets/expo.icon/Assets/expo-symbol 2.svg

@@ -0,0 +1,3 @@
+<svg width="652" height="606" viewBox="0 0 652 606" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M353.554 0H298.446C273.006 0 249.684 14.6347 237.962 37.9539L4.37994 502.646C-1.04325 513.435 -1.45067 526.178 3.2716 537.313L22.6123 582.918C34.6475 611.297 72.5404 614.156 88.4414 587.885L309.863 222.063C313.34 216.317 319.439 212.826 326 212.826C332.561 212.826 338.659 216.317 342.137 222.063L563.559 587.885C579.46 614.156 617.352 611.297 629.388 582.918L648.728 537.313C653.451 526.178 653.043 513.435 647.62 502.646L414.038 37.9539C402.316 14.6347 378.994 0 353.554 0Z" fill="white"/>
+</svg>

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/assets/expo.icon/icon.json

@@ -0,0 +1,40 @@
+{
+  "fill" : {
+    "automatic-gradient" : "extended-srgb:0.00000,0.47843,1.00000,1.00000"
+  },
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "image-name" : "expo-symbol 2.svg",
+          "name" : "expo-symbol 2",
+          "position" : {
+            "scale" : 1,
+            "translation-in-points" : [
+              1.1008400065293245e-05,
+              -16.046875
+            ]
+          }
+        },
+        {
+          "image-name" : "grid.png",
+          "name" : "grid"
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.5
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/metro.config.js

@@ -0,0 +1,19 @@
+// Learn more: https://docs.expo.dev/guides/monorepos/
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+const projectRoot = __dirname;
+const monorepoRoot = path.resolve(projectRoot, '../..');
+
+const config = getDefaultConfig(projectRoot);
+
+// Watch the whole monorepo so changes in packages/* trigger rebuilds.
+config.watchFolders = [monorepoRoot];
+
+// Resolve modules from the app's node_modules first, then the workspace root.
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(monorepoRoot, 'node_modules'),
+];
+
+module.exports = config;

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "mobile",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "dependencies": {
+    "@expo/ui": "~56.0.14",
+    "@<@var(context.project.name)>/rpc": "workspace:*",
+    "expo": "~56.0.5",
+    "expo-constants": "~56.0.16",
+    "expo-crypto": "~56.0.4",
+    "expo-dev-client": "~56.0.18",
+    "expo-device": "~56.0.4",
+    "expo-font": "~56.0.5",
+    "expo-glass-effect": "~56.0.4",
+    "expo-image": "~56.0.9",
+    "expo-linking": "~56.0.12",
+    "expo-router": "~56.2.7",
+    "expo-splash-screen": "~56.0.10",
+    "expo-status-bar": "~56.0.4",
+    "expo-symbols": "~56.0.5",
+    "expo-system-ui": "~56.0.5",
+    "expo-web-browser": "~56.0.5",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-gesture-handler": "~2.31.1",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-screens": "4.25.2",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.8.3"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "typescript": "~6.0.3"
+  },
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "private": true
+}

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/src/app/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack screenOptions={{headerShown:false}} />;
+}

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/src/app/index.tsx

@@ -0,0 +1,73 @@
+import { createRouter, Todo } from "@<@var(context.project.name)>/rpc"
+import { useEffect, useState } from "react"
+import { ScrollView, Button, Checkbox, Host, Column, TextInput, Text, useNativeState, Row, Icon } from "@expo/ui";
+import * as Crypto from "expo-crypto"
+import { colorInvert, controlSize } from "@expo/ui/swift-ui/modifiers";
+import { fillMaxWidth, padding, width } from "@expo/ui/jetpack-compose/modifiers";
+export default function Index() {
+  const router = createRouter("http://10.0.2.2:8080")
+  const [todos, setTodos] = useState<Array<Todo>>([])
+  const todoToCreateTask = useNativeState<string>("")
+  const fetchTodos = () => {
+    router.todos.listTodos({}).then((r) => {
+      setTodos(r.todos)
+    })
+  }
+  useEffect(() => {
+    fetchTodos();
+  })
+
+  const setTodoDone = (id: string, task: string) => {
+    return (done: boolean) => {
+      router.todos.updateTodo({ todo: { id, task, done } })
+      fetchTodos()
+    }
+  }
+
+  const deleteTodo = (id: string) => {
+    return () => {
+      router.todos.deleteTodo({ todo: { id } })
+      fetchTodos()
+    }
+  }
+
+  const createTodo = () => {
+    router.todos.createTodo({ todo: { id: Crypto.randomUUID(), task: todoToCreateTask.value } }).then((r) => {
+      console.log(r)
+      fetchTodos()
+    }).catch((e) => {
+      console.log(e)
+    })
+  }
+
+  const updateTodoToCreateTask = (task: string) => {
+    todoToCreateTask.value = task
+  }
+
+  return (
+    <Host style={{ flex: 1 }}>
+      <Column alignment="center" modifiers={[fillMaxWidth()]}>
+        <Text textStyle={{fontSize:30}}> Create Todo </Text>
+        <TextInput value={todoToCreateTask} onChangeText={updateTodoToCreateTask} />
+        <Button modifiers={[controlSize('regular')]} label="create Todo" onPress={createTodo} />
+        <ScrollView modifiers={[fillMaxWidth()]}>
+          {
+            todos.map((todo) => (
+              <Row alignment="center" modifiers={[fillMaxWidth(),padding(20,0,20,0)]}>
+                <Column alignment="start" modifiers={[width(200)]}>
+                    <Text> {todo.task} </Text>
+                </Column>
+                <Column alignment="center">
+                    <Checkbox value={todo.done || false} onValueChange={setTodoDone(todo.id || "", todo.task)} />
+                </Column>
+                <Column alignment="end" modifiers={[fillMaxWidth()]}>
+                  <Button modifiers={[controlSize('regular')]} label="delete" onPress={deleteTodo(todo.id || "")}/>
+                </Column>
+              </Row>
+            ))
+          }
+        </ScrollView>
+      </Column>
+    </Host>
+  )
+}

template/apps/<@if(eq(context.project.mobile,"expo"))>mobile/tsconfig.json

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

template/devenv.nix

@@ -14,7 +14,32 @@
      pkgs.protoc-gen-es
      pkgs.cobra-cli
   ];
-  
+  <@if(eq(context.project.mobile,"expo"))>
+  android = {
+    enable = true;
+    emulator = {
+      enable = true;
+    };
+    buildTools.version = ["34.0.0" "35.0.0" "36.0.0" ];  # add 36.0.0
+    reactNative.enable = true;
+    android-studio = {
+      enable = false;
+    };
+    ndk = {
+      enable = true;
+      version = [ "27.1.12297006" ];
+    };
+  };
+  enterShell = ''
+    export LD_LIBRARY_PATH=$ANDROID_HOME/emulator/lib64:$LD_LIBRARY_PATH
+  '';
+  scripts.create-avd.exec = ''
+    if [ ! -f .avd-created ]; then
+      avdmanager create avd -n "Pixel_5_API34" -k "system-images;android-34;google_apis_playstore;x86_64" -d "pixel_5";
+      touch .avd-created;
+    fi
+  '';
+ <@endif>
   languages.go.enable = true;
   languages.typescript.enable = true;
   services.postgres = {
@@ -29,26 +54,6 @@
     ];
   };
   processes = {
-    air = {
-      exec = "air";
-      cwd = "./services/api";
-      after = ["devenv:processes:postgres"];
-    };
-    protowatcher = {
-      exec = "watchexec -r -e proto buf generate";
-      cwd = "./packages/proto";
-      after= ["devenv:processes:air@started"];
-    };
-    protojswatcher = {
-      exec = "watchexec -e js,ts -w ./packages/rpc/src -r bun run ./scripts/gen-rpc-index.ts";
-      cwd = "./";
-      after= ["devenv:processes:protowatcher@started"];
-    };
-    sqlwatcher = {
-      exec = "watchexec -w ./db/migrations -w ./db/query -r -e sql sqlc generate";
-      cwd = "./services/api";
-      after= ["devenv:processes:air@started"];
-    };
     <@if(neq(context.project.frontend,"none"))>
     bundev = {
       exec = "bun dev";
@@ -56,5 +61,54 @@
       after= ["devenv:processes:air@started"];
     };
     <@endif>
+    air = {
+      exec = "air";
+      cwd = "./services/api";
+      after = ["devenv:processes:postgres"];
+    };
+    protowatcher = {
+      exec = "buf generate";
+      cwd = "./packages/proto";
+      watch = {
+        paths = [ ./packages/proto ];
+        extensions = [ "proto" ];
+      };
+    };
+    protojswatcher = {
+      exec = "bun run ./scripts/gen-rpc-index.ts";
+      cwd = "./";
+      watch = {
+        paths = [ ./packages/rpc/src ];
+        extensions = ["js"  "ts"];
+      };
+      after= ["devenv:processes:protowatcher@completed"];
+    };
+    <@if(eq(context.project.mobile,"expo"))>
+    createavd = {
+      exec = "create-avd";
+    };
+    emulator = {
+      exec = "emulator -avd Pixel_5_API34";
+      after = ["devenv:processes:createavd@completed"];
+    };
+    expodev = {
+      exec = "bunx expo run:android";
+      cwd = "./apps/mobile";
+      after= ["devenv:processes:emulator@started"];
+      restart = {
+        on = "always";
+      };
+    };
+    <@endif>
+    sqlwatcher = {
+      exec = "sqlc generate";
+      watch = {
+        paths = [ ./db/migrations ./db/query ];
+        extensions = ["sql" "sqlc"];
+      };
+      cwd = "./services/api";
+      after= ["devenv:processes:air@started"];
+    };
+    
   };
 }

template/devenv.yaml

@@ -1,4 +1,7 @@
-# yaml-language-server: $schema=https://devenv.sh/devenv.schema.json
+<@if(eq(context.project.mobile,"expo"))>
+nixpkgs:
+  allowUnfree: true
+<@endif>
 inputs:
   nixpkgs:
     url: github:cachix/devenv-nixpkgs/rolling

template/services/api/server/todo/todo.go

@@ -1,16 +1,19 @@
 package todo
 
 import (
+	"cmp"
+	"context"
+	"net/http"
+	"slices"
+	"time"
+
 	"connectrpc.com/connect"
 	"connectrpc.com/validate"
-	"context"
-	"<@var(context.project.goprefix)>/<@var(context.project.name)>/db"
+	"github.com/<@var(context.project.name)>/<@var(context.project.name)>/db"
 	todov1 "<@var(context.project.goprefix)>/<@var(context.project.name)>/gen/todo/v1"
 	"<@var(context.project.goprefix)>/<@var(context.project.name)>/gen/todo/v1/todov1connect"
-	. "<@var(context.project.goprefix)>/<@var(context.project.name)>/utils"
+	. "<@var(context.project.goprefix)>/glstack-test/utils"
 	"github.com/jackc/pgx/v5/pgtype"
-	"net/http"
-	"time"
 )
 
 type TodoServer struct{}
@@ -46,9 +49,9 @@ func (srv *TodoServer) ListTodos(ctx context.Context, req *connect.Request[todov
 	if err != nil {
 		return nil, err
 	}
-	reponseTodos := []*todov1.Todo{}
+	responseTodos := []*todov1.Todo{}
 	for _, todo := range todos {
-		reponseTodos = append(reponseTodos, &todov1.Todo{
+		responseTodos = append(responseTodos, &todov1.Todo{
 			Id:        StrPtr(todo.ID.String()),
 			Task:      todo.Task,
 			CreatedAt: StrPtr(todo.CreatedAt.Time.Format(time.RFC3339)),
@@ -56,10 +59,25 @@ func (srv *TodoServer) ListTodos(ctx context.Context, req *connect.Request[todov
 			Done:      BoolPtr(todo.Done.Bool),
 		})
 	}
+	slices.SortFunc(responseTodos, func(a, b *todov1.Todo) int {
+		dateCmp := cmp.Compare(a.GetCreatedAt(), b.GetCreatedAt())
+		return dateCmp
+	})
+	slices.SortFunc(responseTodos, func(a, b *todov1.Todo) int {
+		var boolToInt = func(b bool) int {
+			if b {
+				return 1
+			} else {
+				return 0
+			}
+		}
+		doneCmp := cmp.Compare(boolToInt(*a.Done), boolToInt(*b.Done))
+		return doneCmp
+	})
 
 	return &connect.Response[todov1.ListTodosResponse]{
 		Msg: &todov1.ListTodosResponse{
-			Todos: reponseTodos,
+			Todos: responseTodos,
 		},
 	}, nil
 }