Rewrote turborepo. Hopefully this is a bit more clean & easy to understand for me.

apps/expo/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

apps/expo/app.config.ts

@@ -0,0 +1,60 @@
+import type { ConfigContext, ExpoConfig } from "expo/config";
+
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: "expo",
+  slug: "expo",
+  scheme: "expo",
+  version: "0.1.0",
+  orientation: "portrait",
+  icon: "./assets/icon-light.png",
+  userInterfaceStyle: "automatic",
+  updates: {
+    fallbackToCacheTimeout: 0,
+  },
+  newArchEnabled: true,
+  assetBundlePatterns: ["**/*"],
+  ios: {
+    bundleIdentifier: "your.bundle.identifier",
+    supportsTablet: true,
+    icon: {
+      light: "./assets/icon-light.png",
+      dark: "./assets/icon-dark.png",
+    },
+  },
+  android: {
+    package: "your.bundle.identifier",
+    adaptiveIcon: {
+      foregroundImage: "./assets/icon-light.png",
+      backgroundColor: "#1F104A",
+    },
+    edgeToEdgeEnabled: true,
+  },
+  // extra: {
+  //   eas: {
+  //     projectId: "your-eas-project-id",
+  //   },
+  // },
+  experiments: {
+    tsconfigPaths: true,
+    typedRoutes: true,
+    reactCanary: true,
+    reactCompiler: true,
+  },
+  plugins: [
+    "expo-router",
+    "expo-secure-store",
+    "expo-web-browser",
+    [
+      "expo-splash-screen",
+      {
+        backgroundColor: "#E4E4E7",
+        image: "./assets/icon-light.png",
+        dark: {
+          backgroundColor: "#18181B",
+          image: "./assets/icon-dark.png",
+        },
+      },
+    ],
+  ],
+});

apps/expo/eas.json

@@ -0,0 +1,33 @@
+{
+  "cli": {
+    "version": ">= 4.1.2",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "base": {
+      "node": "22.12.0",
+      "pnpm": "9.15.4",
+      "ios": {
+        "resourceClass": "m-medium"
+      }
+    },
+    "development": {
+      "extends": "base",
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "extends": "base",
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      }
+    },
+    "production": {
+      "extends": "base"
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

apps/expo/eslint.config.mts

@@ -0,0 +1,12 @@
+import { defineConfig } from "eslint/config";
+
+import { baseConfig } from "@acme/eslint-config/base";
+import { reactConfig } from "@acme/eslint-config/react";
+
+export default defineConfig(
+  {
+    ignores: [".expo/**", "expo-plugins/**"],
+  },
+  baseConfig,
+  reactConfig,
+);

apps/expo/index.ts

@@ -0,0 +1 @@
+import "expo-router/entry";

apps/expo/metro.config.js

@@ -0,0 +1,16 @@
+// Learn more: https://docs.expo.dev/guides/monorepos/
+const path = require("node:path");
+const { getDefaultConfig } = require("expo/metro-config");
+const { FileStore } = require("metro-cache");
+const { withNativewind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+config.cacheStores = [
+  new FileStore({
+    root: path.join(__dirname, "node_modules", ".cache", "metro"),
+  }),
+];
+
+/** @type {import('expo/metro-config').MetroConfig} */
+module.exports = withNativewind(config);

apps/expo/nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react-native-css/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by react-native-css. If you need to move or disable this file, please see the documentation.

apps/expo/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@gib/expo",
+  "private": true,
+  "main": "index.ts",
+  "scripts": {
+    "clean": "git clean -xdf .cache .expo .turbo android ios node_modules",
+    "dev": "expo start",
+    "dev:tunnel": "expo start --tunnel",
+    "dev:android": "expo start --android",
+    "dev:ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "format": "prettier --check . --ignore-path ../../.gitignore --ignore-path .prettierignore",
+    "lint": "eslint --flag unstable_native_nodejs_ts_config",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@convex-dev/auth": "catalog:convex",
+    "@expo/vector-icons": "^15.0.3",
+    "@gib/backend": "workspace:*",
+    "@legendapp/list": "^2.0.14",
+    "@react-navigation/bottom-tabs": "^7.6.0",
+    "@react-navigation/elements": "^2.7.1",
+    "@react-navigation/native": "^7.1.19",
+    "@sentry/react-native": "^7.4.0",
+    "convex": "catalog:convex",
+    "expo": "~54.0.20",
+    "expo-apple-authentication": "~8.0.7",
+    "expo-constants": "~18.0.10",
+    "expo-dev-client": "~6.0.16",
+    "expo-font": "~14.0.9",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.10",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.13",
+    "expo-secure-store": "~15.0.7",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.8",
+    "expo-web-browser": "~15.0.8",
+    "nativewind": "5.0.0-preview.2",
+    "react": "catalog:react19",
+    "react-dom": "catalog:react19",
+    "react-native": "~0.81.5",
+    "react-native-css": "3.0.1",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.3",
+    "react-native-safe-area-context": "~5.6.1",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.2",
+    "react-native-worklets": "~0.5.1",
+    "superjson": "2.2.3"
+  },
+  "devDependencies": {
+    "@gib/eslint-config": "workspace:*",
+    "@gib/prettier-config": "workspace:*",
+    "@gib/tailwind-config": "workspace:*",
+    "@gib/tsconfig": "workspace:*",
+    "@types/react": "catalog:react19",
+    "eslint": "catalog:",
+    "prettier": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  },
+  "prettier": "@gib/prettier-config"
+}

apps/expo/postcss.config.js

@@ -0,0 +1 @@
+module.exports = require("@acme/tailwind-config/postcss-config");

apps/expo/src/app/_layout.tsx

@@ -0,0 +1,33 @@
+import { useColorScheme } from "react-native";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import { QueryClientProvider } from "@tanstack/react-query";
+
+import { queryClient } from "~/utils/api";
+
+import "../styles.css";
+
+// This is the main layout of the app
+// It wraps your pages with the providers they need
+export default function RootLayout() {
+  const colorScheme = useColorScheme();
+  return (
+    <QueryClientProvider client={queryClient}>
+      {/*
+          The Stack component displays the current page.
+          It also allows you to configure your screens 
+        */}
+      <Stack
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: "#c03484",
+          },
+          contentStyle: {
+            backgroundColor: colorScheme == "dark" ? "#09090B" : "#FFFFFF",
+          },
+        }}
+      />
+      <StatusBar />
+    </QueryClientProvider>
+  );
+}

apps/expo/src/app/index.tsx

@@ -0,0 +1,172 @@
+import { useState } from "react";
+import { Pressable, Text, TextInput, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Link, Stack } from "expo-router";
+import { LegendList } from "@legendapp/list";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import type { RouterOutputs } from "~/utils/api";
+import { trpc } from "~/utils/api";
+import { authClient } from "~/utils/auth";
+
+function PostCard(props: {
+  post: RouterOutputs["post"]["all"][number];
+  onDelete: () => void;
+}) {
+  return (
+    <View className="bg-muted flex flex-row rounded-lg p-4">
+      <View className="grow">
+        <Link
+          asChild
+          href={{
+            pathname: "/post/[id]",
+            params: { id: props.post.id },
+          }}
+        >
+          <Pressable className="">
+            <Text className="text-primary text-xl font-semibold">
+              {props.post.title}
+            </Text>
+            <Text className="text-foreground mt-2">{props.post.content}</Text>
+          </Pressable>
+        </Link>
+      </View>
+      <Pressable onPress={props.onDelete}>
+        <Text className="text-primary font-bold uppercase">Delete</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function CreatePost() {
+  const queryClient = useQueryClient();
+
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+
+  const { mutate, error } = useMutation(
+    trpc.post.create.mutationOptions({
+      async onSuccess() {
+        setTitle("");
+        setContent("");
+        await queryClient.invalidateQueries(trpc.post.all.queryFilter());
+      },
+    }),
+  );
+
+  return (
+    <View className="mt-4 flex gap-2">
+      <TextInput
+        className="border-input bg-background text-foreground items-center rounded-md border px-3 text-lg leading-tight"
+        value={title}
+        onChangeText={setTitle}
+        placeholder="Title"
+      />
+      {error?.data?.zodError?.fieldErrors.title && (
+        <Text className="text-destructive mb-2">
+          {error.data.zodError.fieldErrors.title}
+        </Text>
+      )}
+      <TextInput
+        className="border-input bg-background text-foreground items-center rounded-md border px-3 text-lg leading-tight"
+        value={content}
+        onChangeText={setContent}
+        placeholder="Content"
+      />
+      {error?.data?.zodError?.fieldErrors.content && (
+        <Text className="text-destructive mb-2">
+          {error.data.zodError.fieldErrors.content}
+        </Text>
+      )}
+      <Pressable
+        className="bg-primary flex items-center rounded-sm p-2"
+        onPress={() => {
+          mutate({
+            title,
+            content,
+          });
+        }}
+      >
+        <Text className="text-foreground">Create</Text>
+      </Pressable>
+      {error?.data?.code === "UNAUTHORIZED" && (
+        <Text className="text-destructive mt-2">
+          You need to be logged in to create a post
+        </Text>
+      )}
+    </View>
+  );
+}
+
+function MobileAuth() {
+  const { data: session } = authClient.useSession();
+
+  return (
+    <>
+      <Text className="text-foreground pb-2 text-center text-xl font-semibold">
+        {session?.user.name ? `Hello, ${session.user.name}` : "Not logged in"}
+      </Text>
+      <Pressable
+        onPress={() =>
+          session
+            ? authClient.signOut()
+            : authClient.signIn.social({
+                provider: "discord",
+                callbackURL: "/",
+              })
+        }
+        className="bg-primary flex items-center rounded-sm p-2"
+      >
+        <Text>{session ? "Sign Out" : "Sign In With Discord"}</Text>
+      </Pressable>
+    </>
+  );
+}
+
+export default function Index() {
+  const queryClient = useQueryClient();
+
+  const postQuery = useQuery(trpc.post.all.queryOptions());
+
+  const deletePostMutation = useMutation(
+    trpc.post.delete.mutationOptions({
+      onSettled: () =>
+        queryClient.invalidateQueries(trpc.post.all.queryFilter()),
+    }),
+  );
+
+  return (
+    <SafeAreaView className="bg-background">
+      {/* Changes page title visible on the header */}
+      <Stack.Screen options={{ title: "Home Page" }} />
+      <View className="bg-background h-full w-full p-4">
+        <Text className="text-foreground pb-2 text-center text-5xl font-bold">
+          Create <Text className="text-primary">T3</Text> Turbo
+        </Text>
+
+        <MobileAuth />
+
+        <View className="py-2">
+          <Text className="text-primary font-semibold italic">
+            Press on a post
+          </Text>
+        </View>
+
+        <LegendList
+          data={postQuery.data ?? []}
+          estimatedItemSize={20}
+          keyExtractor={(item) => item.id}
+          ItemSeparatorComponent={() => <View className="h-2" />}
+          renderItem={(p) => (
+            <PostCard
+              post={p.item}
+              onDelete={() => deletePostMutation.mutate(p.item.id)}
+            />
+          )}
+        />
+
+        <CreatePost />
+      </View>
+    </SafeAreaView>
+  );
+}

apps/expo/src/app/post/[id].tsx

@@ -0,0 +1,24 @@
+import { SafeAreaView, Text, View } from "react-native";
+import { Stack, useGlobalSearchParams } from "expo-router";
+import { useQuery } from "@tanstack/react-query";
+
+import { trpc } from "~/utils/api";
+
+export default function Post() {
+  const { id } = useGlobalSearchParams<{ id: string }>();
+  const { data } = useQuery(trpc.post.byId.queryOptions({ id }));
+
+  if (!data) return null;
+
+  return (
+    <SafeAreaView className="bg-background">
+      <Stack.Screen options={{ title: data.title }} />
+      <View className="h-full w-full p-4">
+        <Text className="text-primary py-2 text-3xl font-bold">
+          {data.title}
+        </Text>
+        <Text className="text-foreground py-4">{data.content}</Text>
+      </View>
+    </SafeAreaView>
+  );
+}

apps/expo/src/styles.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "nativewind/theme";
+@import "@acme/tailwind-config/theme";

apps/expo/src/utils/api.tsx

@@ -0,0 +1,50 @@
+import { QueryClient } from "@tanstack/react-query";
+import { createTRPCClient, httpBatchLink, loggerLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+import superjson from "superjson";
+
+import type { AppRouter } from "@acme/api";
+
+import { authClient } from "./auth";
+import { getBaseUrl } from "./base-url";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // ...
+    },
+  },
+});
+
+/**
+ * A set of typesafe hooks for consuming your API.
+ */
+export const trpc = createTRPCOptionsProxy<AppRouter>({
+  client: createTRPCClient({
+    links: [
+      loggerLink({
+        enabled: (opts) =>
+          process.env.NODE_ENV === "development" ||
+          (opts.direction === "down" && opts.result instanceof Error),
+        colorMode: "ansi",
+      }),
+      httpBatchLink({
+        transformer: superjson,
+        url: `${getBaseUrl()}/api/trpc`,
+        headers() {
+          const headers = new Map<string, string>();
+          headers.set("x-trpc-source", "expo-react");
+
+          const cookies = authClient.getCookie();
+          if (cookies) {
+            headers.set("Cookie", cookies);
+          }
+          return headers;
+        },
+      }),
+    ],
+  }),
+  queryClient,
+});
+
+export type { RouterInputs, RouterOutputs } from "@acme/api";

apps/expo/src/utils/auth.ts

@@ -0,0 +1,16 @@
+import * as SecureStore from "expo-secure-store";
+import { expoClient } from "@better-auth/expo/client";
+import { createAuthClient } from "better-auth/react";
+
+import { getBaseUrl } from "./base-url";
+
+export const authClient = createAuthClient({
+  baseURL: getBaseUrl(),
+  plugins: [
+    expoClient({
+      scheme: "expo",
+      storagePrefix: "expo",
+      storage: SecureStore,
+    }),
+  ],
+});

apps/expo/src/utils/base-url.ts

@@ -0,0 +1,26 @@
+import Constants from "expo-constants";
+
+/**
+ * Extend this function when going to production by
+ * setting the baseUrl to your production API URL.
+ */
+export const getBaseUrl = () => {
+  /**
+   * Gets the IP address of your host-machine. If it cannot automatically find it,
+   * you'll have to manually set it. NOTE: Port 3000 should work for most but confirm
+   * you don't have anything else running on it, or you'd have to change it.
+   *
+   * **NOTE**: This is only for development. In production, you'll want to set the
+   * baseUrl to your production API URL.
+   */
+  const debuggerHost = Constants.expoConfig?.hostUri;
+  const localhost = debuggerHost?.split(":")[0];
+
+  if (!localhost) {
+    // return "https://turbo.t3.gg";
+    throw new Error(
+      "Failed to get localhost. Please point to your production server.",
+    );
+  }
+  return `http://${localhost}:3000`;
+};

apps/expo/src/utils/session-store.ts

@@ -0,0 +1,7 @@
+import * as SecureStore from "expo-secure-store";
+
+const key = "session_token";
+
+export const getToken = () => SecureStore.getItem(key);
+export const deleteToken = () => SecureStore.deleteItemAsync(key);
+export const setToken = (v: string) => SecureStore.setItem(key, v);

apps/expo/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": ["@acme/tsconfig/base.json"],
+  "compilerOptions": {
+    "jsx": "react-native",
+    "checkJs": false,
+    "moduleSuffixes": [".ios", ".android", ".native", ""],
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "src",
+    "*.ts",
+    "*.js",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
+  ],
+  "exclude": ["node_modules"]
+}

apps/expo/turbo.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://turborepo.com/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "dev": {
+      "persistent": true,
+      "interactive": true
+    }
+  }
+}