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

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