From 52b3444d4d43afe53a0dcca99f3f92098039ba18 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Sun, 27 Aug 2023 23:57:17 -0600
Subject: [PATCH] App router almost done

---
 .../_components}/Footer.tsx                   |   4 +-
 .../_components}/Navbar.tsx                   |   7 +-
 .../_components}/RoomList.tsx                 |  10 +-
 .../_components}/templates/Welcome.tsx        |   0
 src/app/_trpc/Provider.tsx                    |  27 +++++
 src/app/_trpc/client.ts                       |   5 +
 src/app/api/trpc/[trpc]/route.ts              |  17 +++
 .../index.tsx => app/dashboard/page.tsx}      |   4 +-
 src/app/layout.tsx                            |  29 +++++
 src/{pages/index.tsx => app/page.tsx}         |   0
 .../room/[id].tsx => app/room/[id]/page.tsx}  |  18 +--
 .../sign-in/[[...sign-in]]/page.tsx}          |   4 +
 .../sign-up/[[...sign-up]]/page.tsx}          |   4 +
 src/pages/_app.tsx                            |  24 ----
 src/pages/_document.tsx                       |  62 -----------
 src/pages/api/[...trpc].ts                    |  19 ----
 src/pages/api/trpc/[...trpc].ts               |  19 ----
 src/server/api/root.ts                        |  16 ---
 src/server/api/trpc.ts                        | 104 ------------------
 src/server/trpc/index.ts                      |  10 ++
 src/server/{api => trpc}/routers/room.ts      |   2 +-
 src/server/{api => trpc}/routers/vote.ts      |   2 +-
 src/server/trpc/trpc.ts                       |  47 ++++++++
 src/server/webhookHelpers.ts                  |   2 +-
 src/styles/globals.css                        |   9 --
 src/utils/api.ts                              |  68 ------------
 tsconfig.json                                 |  24 +++-
 27 files changed, 192 insertions(+), 345 deletions(-)
 rename src/{components => app/_components}/Footer.tsx (93%)
 rename src/{components => app/_components}/Navbar.tsx (91%)
 rename src/{components => app/_components}/RoomList.tsx (95%)
 rename src/{components => app/_components}/templates/Welcome.tsx (100%)
 create mode 100644 src/app/_trpc/Provider.tsx
 create mode 100644 src/app/_trpc/client.ts
 create mode 100644 src/app/api/trpc/[trpc]/route.ts
 rename src/{pages/dashboard/index.tsx => app/dashboard/page.tsx} (97%)
 create mode 100644 src/app/layout.tsx
 rename src/{pages/index.tsx => app/page.tsx} (100%)
 rename src/{pages/room/[id].tsx => app/room/[id]/page.tsx} (97%)
 rename src/{pages/sign-in/[[...index]].tsx => app/sign-in/[[...sign-in]]/page.tsx} (85%)
 rename src/{pages/sign-up/[[...index]].tsx => app/sign-up/[[...sign-up]]/page.tsx} (85%)
 delete mode 100644 src/pages/_app.tsx
 delete mode 100644 src/pages/_document.tsx
 delete mode 100644 src/pages/api/[...trpc].ts
 delete mode 100644 src/pages/api/trpc/[...trpc].ts
 delete mode 100644 src/server/api/root.ts
 delete mode 100644 src/server/api/trpc.ts
 create mode 100644 src/server/trpc/index.ts
 rename src/server/{api => trpc}/routers/room.ts (98%)
 rename src/server/{api => trpc}/routers/vote.ts (96%)
 create mode 100644 src/server/trpc/trpc.ts
 delete mode 100644 src/utils/api.ts

diff --git a/src/components/Footer.tsx b/src/app/_components/Footer.tsx
similarity index 93%
rename from src/components/Footer.tsx
rename to src/app/_components/Footer.tsx
index 03d153e..ed59472 100644
--- a/src/components/Footer.tsx
+++ b/src/app/_components/Footer.tsx
@@ -1,5 +1,7 @@
+"use client";
+
 import { GiTechnoHeart } from "react-icons/gi";
-import packagejson from "../../package.json";
+import packagejson from "../../../package.json";
 
 const Footer = () => {
   return (
diff --git a/src/components/Navbar.tsx b/src/app/_components/Navbar.tsx
similarity index 91%
rename from src/components/Navbar.tsx
rename to src/app/_components/Navbar.tsx
index 8524ddb..1efac23 100644
--- a/src/components/Navbar.tsx
+++ b/src/app/_components/Navbar.tsx
@@ -1,7 +1,9 @@
+"use client";
+
 import { UserButton, useUser } from "@clerk/nextjs";
 import Image from "next/image";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { useRouter, usePathname } from "next/navigation";
 import { env } from "~/env.mjs";
 
 interface NavbarProps {
@@ -11,9 +13,10 @@ interface NavbarProps {
 const Navbar = ({ title }: NavbarProps) => {
   const { isLoaded, isSignedIn } = useUser();
   const router = useRouter();
+  const pathname = usePathname();
 
   const navigationMenu = () => {
-    if (router.pathname !== "/dashboard" && isSignedIn) {
+    if (pathname !== "/dashboard" && isSignedIn) {
       return (
         <Link className="btn btn-secondary btn-outline mx-2" href="/dashboard">
           Dashboard
diff --git a/src/components/RoomList.tsx b/src/app/_components/RoomList.tsx
similarity index 95%
rename from src/components/RoomList.tsx
rename to src/app/_components/RoomList.tsx
index f59bf7a..02ebc7b 100644
--- a/src/components/RoomList.tsx
+++ b/src/app/_components/RoomList.tsx
@@ -1,10 +1,12 @@
+"use client";
+
 import Link from "next/link";
 import { configureAbly, useChannel } from "@ably-labs/react-hooks";
 import { useState } from "react";
 import { IoEnterOutline, IoTrashBinOutline } from "react-icons/io5";
 import { env } from "~/env.mjs";
-import { api } from "~/utils/api";
 import { useUser } from "@clerk/nextjs";
+import { trpc } from "../_trpc/client";
 
 const RoomList = () => {
   const { isSignedIn, user } = useUser();
@@ -25,11 +27,11 @@ const RoomList = () => {
   const [roomName, setRoomName] = useState<string>("");
 
   const { data: roomsFromDb, refetch: refetchRoomsFromDb } =
-    api.room.getAll.useQuery(undefined, {
+    trpc.room.getAll.useQuery(undefined, {
       enabled: isSignedIn,
     });
 
-  const createRoom = api.room.create.useMutation({});
+  const createRoom = trpc.room.create.useMutation({});
 
   const createRoomHandler = () => {
     createRoom.mutate({ name: roomName });
@@ -39,7 +41,7 @@ const RoomList = () => {
       false;
   };
 
-  const deleteRoom = api.room.delete.useMutation({});
+  const deleteRoom = trpc.room.delete.useMutation({});
 
   const deleteRoomHandler = (roomId: string) => {
     if (isSignedIn) {
diff --git a/src/components/templates/Welcome.tsx b/src/app/_components/templates/Welcome.tsx
similarity index 100%
rename from src/components/templates/Welcome.tsx
rename to src/app/_components/templates/Welcome.tsx
diff --git a/src/app/_trpc/Provider.tsx b/src/app/_trpc/Provider.tsx
new file mode 100644
index 0000000..94f47df
--- /dev/null
+++ b/src/app/_trpc/Provider.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink } from "@trpc/client";
+import React, { useState } from "react";
+import superjson from "superjson";
+
+import { trpc } from "./client";
+
+export default function Provider({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient({}));
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        httpBatchLink({
+          url: "http://localhost:3000/api/trpc",
+        }),
+      ],
+      transformer: superjson,
+    })
+  );
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  );
+}
diff --git a/src/app/_trpc/client.ts b/src/app/_trpc/client.ts
new file mode 100644
index 0000000..dec3bb5
--- /dev/null
+++ b/src/app/_trpc/client.ts
@@ -0,0 +1,5 @@
+import { createTRPCReact } from "@trpc/react-query";
+
+import { type AppRouter } from "~/server/trpc";
+
+export const trpc = createTRPCReact<AppRouter>({});
diff --git a/src/app/api/trpc/[trpc]/route.ts b/src/app/api/trpc/[trpc]/route.ts
new file mode 100644
index 0000000..5024554
--- /dev/null
+++ b/src/app/api/trpc/[trpc]/route.ts
@@ -0,0 +1,17 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+import { appRouter } from "~/server/trpc";
+import { createTRPCContext } from "~/server/trpc/trpc";
+
+export const runtime = "edge";
+export const preferredRegion = ["pdx1"];
+
+const handler = (req: Request) =>
+  fetchRequestHandler({
+    endpoint: "/api/trpc",
+    req,
+    router: appRouter,
+    createContext: createTRPCContext,
+  });
+
+export { handler as GET, handler as POST };
diff --git a/src/pages/dashboard/index.tsx b/src/app/dashboard/page.tsx
similarity index 97%
rename from src/pages/dashboard/index.tsx
rename to src/app/dashboard/page.tsx
index f6a691d..53ca088 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,7 +1,9 @@
+"use client";
+
 import type { NextPage } from "next";
 import Head from "next/head";
 
-import RoomList from "~/components/RoomList";
+import RoomList from "~/app/_components/RoomList";
 
 import Link from "next/link";
 import { useEffect, useState } from "react";
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..5b982a7
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,29 @@
+import { ClerkProvider } from "@clerk/nextjs";
+import Footer from "~/app/_components/Footer";
+import Navbar from "~/app/_components/Navbar";
+import "~/styles/globals.css";
+import Provider from "./_trpc/Provider";
+
+export const metadata = {
+  title: "Next.js 13 with Clerk",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ClerkProvider>
+      <html lang="en" className="h-[100%] w-[100%] fixed overflow-y-auto">
+        <body className="block h-[100%]">
+          <Navbar title="Sprint Padawan" />
+          <div className="flex flex-row items-center justify-center min-h-[calc(100%-114px)]">
+            <Provider>{children}</Provider>
+          </div>
+          <Footer />
+        </body>
+      </html>
+    </ClerkProvider>
+  );
+}
diff --git a/src/pages/index.tsx b/src/app/page.tsx
similarity index 100%
rename from src/pages/index.tsx
rename to src/app/page.tsx
diff --git a/src/pages/room/[id].tsx b/src/app/room/[id]/page.tsx
similarity index 97%
rename from src/pages/room/[id].tsx
rename to src/app/room/[id]/page.tsx
index 2b010d7..07f4657 100644
--- a/src/pages/room/[id].tsx
+++ b/src/app/room/[id]/page.tsx
@@ -1,10 +1,12 @@
+"use client";
+
 import { type NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { EventTypes } from "~/utils/types";
 
-import { useRouter } from "next/router";
+import { useParams } from "next/navigation";
 import {
   IoCheckmarkCircleOutline,
   IoCopyOutline,
@@ -16,7 +18,6 @@ import {
   IoSaveOutline,
 } from "react-icons/io5";
 import { GiStarFormation } from "react-icons/gi";
-import { api } from "~/utils/api";
 import { configureAbly, useChannel, usePresence } from "@ably-labs/react-hooks";
 import Link from "next/link";
 import { FaShieldAlt } from "react-icons/fa";
@@ -25,6 +26,7 @@ import { env } from "~/env.mjs";
 import { downloadCSV, isAdmin, isVIP } from "~/utils/helpers";
 import type { PresenceItem } from "~/utils/types";
 import { useUser } from "@clerk/nextjs";
+import { trpc } from "~/app/_trpc/client";
 
 const Room: NextPage = () => {
   const { isSignedIn } = useUser();
@@ -52,21 +54,21 @@ export default Room;
 
 const RoomBody = ({}) => {
   const { isSignedIn, user } = useUser();
-  const { query } = useRouter();
-  const roomId = query.id as string;
+  const params = useParams();
+  const roomId = params?.id as string;
 
   const [storyNameText, setStoryNameText] = useState<string>("");
   const [roomScale, setRoomScale] = useState<string>("");
   const [copied, setCopied] = useState<boolean>(false);
 
   const { data: roomFromDb, refetch: refetchRoomFromDb } =
-    api.room.get.useQuery({ id: roomId });
+    trpc.room.get.useQuery({ id: roomId });
 
   const { data: votesFromDb, refetch: refetchVotesFromDb } =
-    api.vote.getAllByRoomId.useQuery({ roomId });
+    trpc.vote.getAllByRoomId.useQuery({ roomId });
 
-  const setVoteInDb = api.vote.set.useMutation({});
-  const setRoomInDb = api.room.set.useMutation({});
+  const setVoteInDb = trpc.vote.set.useMutation({});
+  const setRoomInDb = trpc.room.set.useMutation({});
 
   configureAbly({
     key: env.NEXT_PUBLIC_ABLY_PUBLIC_KEY,
diff --git a/src/pages/sign-in/[[...index]].tsx b/src/app/sign-in/[[...sign-in]]/page.tsx
similarity index 85%
rename from src/pages/sign-in/[[...index]].tsx
rename to src/app/sign-in/[[...sign-in]]/page.tsx
index f84cb7f..c9d295c 100644
--- a/src/pages/sign-in/[[...index]].tsx
+++ b/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,5 +1,9 @@
+"use client";
+
 import { SignIn } from "@clerk/nextjs";
 
+export const dynamic = "force-static";
+
 const SignInPage = () => (
   <div style={styles}>
     <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
diff --git a/src/pages/sign-up/[[...index]].tsx b/src/app/sign-up/[[...sign-up]]/page.tsx
similarity index 85%
rename from src/pages/sign-up/[[...index]].tsx
rename to src/app/sign-up/[[...sign-up]]/page.tsx
index ce6c5ea..26adc28 100644
--- a/src/pages/sign-up/[[...index]].tsx
+++ b/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -1,5 +1,9 @@
+"use client";
+
 import { SignUp } from "@clerk/nextjs";
 
+export const dynamic = "force-static";
+
 const SignUpPage = () => (
   <div style={styles}>
     <SignUp path="/sign-up" routing="path" signInUrl="/sign-in" />
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
deleted file mode 100644
index d8c87a0..0000000
--- a/src/pages/_app.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { type AppType } from "next/app";
-import { ClerkProvider } from "@clerk/nextjs";
-
-import { api } from "~/utils/api";
-
-import Footer from "~/components/Footer";
-import Navbar from "~/components/Navbar";
-import "~/styles/globals.css";
-
-const MyApp: AppType = ({ Component, pageProps }) => {
-  return (
-    <ClerkProvider {...pageProps}>
-      <div className="block h-[100%]">
-        <Navbar title="Sprint Padawan" />
-        <div className="flex flex-row items-center justify-center min-h-[calc(100%-114px)]">
-          <Component {...pageProps} />
-        </div>
-        <Footer />
-      </div>
-    </ClerkProvider>
-  );
-};
-
-export default api.withTRPC(MyApp);
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
deleted file mode 100644
index 1073f40..0000000
--- a/src/pages/_document.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Head, Html, Main, NextScript } from "next/document";
-
-export default function Document() {
-  return (
-    <Html>
-      <Head>
-        <meta name="application-name" content="Sprint Padawan" />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-        <meta name="apple-mobile-web-app-title" content="Sprint Padawan" />
-        <meta name="description" content="Plan. Sprint. Repeat." />
-        <meta name="format-detection" content="telephone=no" />
-        <meta name="mobile-web-app-capable" content="yes" />
-        <meta name="msapplication-config" content="/icons/browserconfig.xml" />
-        <meta name="msapplication-TileColor" content="#1F2937" />
-        <meta name="msapplication-tap-highlight" content="no" />
-        <meta name="theme-color" content="#1F2937" />
-
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/favicon-16x16.png"
-        />
-        <link rel="manifest" href="/manifest.json" />
-        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-        <link rel="shortcut icon" href="/favicon.ico" />
-
-        <meta name="twitter:card" content="summary" />
-        <meta name="twitter:url" content="https://sprintpadawan.dev" />
-        <meta name="twitter:title" content="Sprint Padawan" />
-        <meta name="twitter:description" content="Plan. Sprint. Repeat." />
-        <meta
-          name="twitter:image"
-          content="https://sprintpadawan.dev/android-chrome-192x192.png"
-        />
-        <meta name="twitter:creator" content="@atridadl" />
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content="Sprint Padawan" />
-        <meta property="og:description" content="Plan. Sprint. Repeat." />
-        <meta property="og:site_name" content="Sprint Padawan" />
-        <meta property="og:url" content="https://sprintpadawan.dev" />
-        <meta
-          property="og:image"
-          content="https://sprintpadawan.dev/icons/apple-touch-icon.png"
-        />
-      </Head>
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}
diff --git a/src/pages/api/[...trpc].ts b/src/pages/api/[...trpc].ts
deleted file mode 100644
index 331d609..0000000
--- a/src/pages/api/[...trpc].ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { appRouter } from "~/server/api/root";
-import { createTRPCContext } from "~/server/api/trpc";
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-import type { NextRequest } from "next/server";
-
-export const config = {
-  runtime: "edge",
-  regions: ["pdx1"],
-  unstable_allowDynamic: ["/node_modules/ably/**"],
-};
-
-export default async function handler(req: NextRequest) {
-  return fetchRequestHandler({
-    endpoint: "/api/trpc",
-    router: appRouter,
-    req,
-    createContext: createTRPCContext,
-  });
-}
diff --git a/src/pages/api/trpc/[...trpc].ts b/src/pages/api/trpc/[...trpc].ts
deleted file mode 100644
index 331d609..0000000
--- a/src/pages/api/trpc/[...trpc].ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { appRouter } from "~/server/api/root";
-import { createTRPCContext } from "~/server/api/trpc";
-import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
-import type { NextRequest } from "next/server";
-
-export const config = {
-  runtime: "edge",
-  regions: ["pdx1"],
-  unstable_allowDynamic: ["/node_modules/ably/**"],
-};
-
-export default async function handler(req: NextRequest) {
-  return fetchRequestHandler({
-    endpoint: "/api/trpc",
-    router: appRouter,
-    req,
-    createContext: createTRPCContext,
-  });
-}
diff --git a/src/server/api/root.ts b/src/server/api/root.ts
deleted file mode 100644
index 46b8d53..0000000
--- a/src/server/api/root.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { roomRouter } from "~/server/api/routers/room";
-import { createTRPCRouter } from "~/server/api/trpc";
-import { voteRouter } from "./routers/vote";
-
-/**
- * This is the primary router for your server.
- *
- * All routers added in /api/routers should be manually added here.
- */
-export const appRouter = createTRPCRouter({
-  room: roomRouter,
-  vote: voteRouter,
-});
-
-// export type definition of API
-export type AppRouter = typeof appRouter;
diff --git a/src/server/api/trpc.ts b/src/server/api/trpc.ts
deleted file mode 100644
index 4fb0bfd..0000000
--- a/src/server/api/trpc.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
- * 1. You want to modify request context (see Part 1)
- * 2. You want to create a new middleware or type of procedure (see Part 3)
- *
- * tl;dr - this is where all the tRPC server stuff is created and plugged in.
- * The pieces you will need to use are documented accordingly near the end
- */
-
-/**
- * 1. CONTEXT
- *
- * This section defines the "contexts" that are available in the backend API
- *
- * These allow you to access things like the database, the session, etc, when
- * processing a request
- *
- */
-import { type FetchCreateContextFnOptions } from "@trpc/server/adapters/fetch";
-import { getAuth } from "@clerk/nextjs/server";
-import type {
-  SignedInAuthObject,
-  SignedOutAuthObject,
-} from "@clerk/nextjs/api";
-
-import { db } from "../db";
-
-interface AuthContext {
-  auth: SignedInAuthObject | SignedOutAuthObject;
-}
-/**
- * This helper generates the "internals" for a tRPC context. If you need to use
- * it, you can export it from here
- *
- * Examples of things you may need it for:
- * - testing, so we dont have to mock Next.js' req/res
- * - trpc's `createSSGHelpers` where we don't have req/res
- * @see https://create.t3.gg/en/usage/trpc#-servertrpccontextts
- */
-
-const createInnerTRPCContext = ({ auth }: AuthContext) => {
-  return {
-    auth,
-    db,
-  };
-};
-
-export const createTRPCContext = ({ req }: FetchCreateContextFnOptions) => {
-  return createInnerTRPCContext({ auth: getAuth(req as NextRequest) });
-};
-
-export type Context = inferAsyncReturnType<typeof createTRPCContext>;
-
-/**
- * 2. INITIALIZATION
- *
- * This is where the trpc api is initialized, connecting the context and
- * transformer
- */
-import { type inferAsyncReturnType, initTRPC, TRPCError } from "@trpc/server";
-import superjson from "superjson";
-import type { NextRequest } from "next/server";
-
-const t = initTRPC.context<typeof createTRPCContext>().create({
-  transformer: superjson,
-  errorFormatter({ shape }) {
-    return shape;
-  },
-});
-
-// check if the user is signed in, otherwise through a UNAUTHORIZED CODE
-const isAuthed = t.middleware(({ next, ctx }) => {
-  if (!ctx.auth.userId) {
-    throw new TRPCError({ code: "UNAUTHORIZED" });
-  }
-
-  return next({
-    ctx: {
-      auth: ctx.auth,
-    },
-  });
-});
-/**
- * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
- *
- * These are the pieces you use to build your tRPC API. You should import these
- * a lot in the /src/server/api/routers folder
- */
-
-/**
- * This is how you create new routers and subrouters in your tRPC API
- * @see https://trpc.io/docs/router
- */
-export const createTRPCRouter = t.router;
-
-/**
- * Public (unauthed) procedure
- *
- * This is the base piece you use to build new queries and mutations on your
- * tRPC API. It does not guarantee that a user querying is authorized, but you
- * can still access user session data if they are logged in
- */
-export const publicProcedure = t.procedure;
-export const protectedProcedure = t.procedure.use(isAuthed);
diff --git a/src/server/trpc/index.ts b/src/server/trpc/index.ts
new file mode 100644
index 0000000..8b6cef1
--- /dev/null
+++ b/src/server/trpc/index.ts
@@ -0,0 +1,10 @@
+import { createTRPCRouter } from "./trpc";
+import { roomRouter } from "./routers/room";
+import { voteRouter } from "./routers/vote";
+
+export const appRouter = createTRPCRouter({
+  room: roomRouter,
+  vote: voteRouter,
+});
+
+export type AppRouter = typeof appRouter;
diff --git a/src/server/api/routers/room.ts b/src/server/trpc/routers/room.ts
similarity index 98%
rename from src/server/api/routers/room.ts
rename to src/server/trpc/routers/room.ts
index f433a3a..a952e02 100644
--- a/src/server/api/routers/room.ts
+++ b/src/server/trpc/routers/room.ts
@@ -1,6 +1,6 @@
 import { z } from "zod";
 import { publishToChannel } from "~/server/ably";
-import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+import { createTRPCRouter, protectedProcedure } from "~/server/trpc/trpc";
 
 import { fetchCache, invalidateCache, setCache } from "~/server/redis";
 import { logs, rooms, votes } from "~/server/schema";
diff --git a/src/server/api/routers/vote.ts b/src/server/trpc/routers/vote.ts
similarity index 96%
rename from src/server/api/routers/vote.ts
rename to src/server/trpc/routers/vote.ts
index 05326a7..f4a4f0b 100644
--- a/src/server/api/routers/vote.ts
+++ b/src/server/trpc/routers/vote.ts
@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { publishToChannel } from "~/server/ably";
 
-import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+import { createTRPCRouter, protectedProcedure } from "~/server/trpc/trpc";
 import { fetchCache, invalidateCache, setCache } from "~/server/redis";
 import { EventTypes } from "~/utils/types";
 import { eq } from "drizzle-orm";
diff --git a/src/server/trpc/trpc.ts b/src/server/trpc/trpc.ts
new file mode 100644
index 0000000..dfb59bb
--- /dev/null
+++ b/src/server/trpc/trpc.ts
@@ -0,0 +1,47 @@
+import { SignedInAuthObject, SignedOutAuthObject } from "@clerk/nextjs/api";
+import { getAuth } from "@clerk/nextjs/server";
+import { TRPCError, type inferAsyncReturnType, initTRPC } from "@trpc/server";
+import { db } from "../db";
+import { FetchCreateContextFnOptions } from "@trpc/server/adapters/fetch";
+import { NextRequest } from "next/server";
+import superjson from "superjson";
+
+interface AuthContext {
+  auth: SignedInAuthObject | SignedOutAuthObject;
+}
+
+const createInnerTRPCContext = ({ auth }: AuthContext) => {
+  return {
+    auth,
+    db,
+  };
+};
+
+export const createTRPCContext = ({ req }: FetchCreateContextFnOptions) => {
+  return createInnerTRPCContext({ auth: getAuth(req as NextRequest) });
+};
+
+export type Context = inferAsyncReturnType<typeof createTRPCContext>;
+
+const t = initTRPC.context<typeof createTRPCContext>().create({
+  transformer: superjson,
+  errorFormatter({ shape }) {
+    return shape;
+  },
+});
+// check if the user is signed in, otherwise through a UNAUTHORIZED CODE
+const isAuthed = t.middleware(({ next, ctx }) => {
+  if (!ctx.auth.userId) {
+    throw new TRPCError({ code: "UNAUTHORIZED" });
+  }
+
+  return next({
+    ctx: {
+      auth: ctx.auth,
+    },
+  });
+});
+
+export const createTRPCRouter = t.router;
+export const publicProcedure = t.procedure;
+export const protectedProcedure = t.procedure.use(isAuthed);
diff --git a/src/server/webhookHelpers.ts b/src/server/webhookHelpers.ts
index f76c382..2eafcf9 100644
--- a/src/server/webhookHelpers.ts
+++ b/src/server/webhookHelpers.ts
@@ -2,7 +2,7 @@ import { eq } from "drizzle-orm";
 import { db } from "./db";
 import { rooms } from "./schema";
 import { env } from "~/env.mjs";
-import { Welcome } from "~/components/templates/Welcome";
+import { Welcome } from "~/app/_components/templates/Welcome";
 import { Resend } from "resend";
 
 const resend = new Resend(env.RESEND_API_KEY);
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 63cf0a5..b5c61c9 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,12 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-html,
-container,
-body #__next {
-  height: 100%;
-  width: 100%;
-  overflow-y: auto;
-  position: fixed;
-}
\ No newline at end of file
diff --git a/src/utils/api.ts b/src/utils/api.ts
deleted file mode 100644
index f4f4ad5..0000000
--- a/src/utils/api.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * This is the client-side entrypoint for your tRPC API. It is used to create the `api` object which
- * contains the Next.js App-wrapper, as well as your type-safe React Query hooks.
- *
- * We also create a few inference helpers for input and output types.
- */
-import { httpBatchLink, loggerLink } from "@trpc/client";
-import { createTRPCNext } from "@trpc/next";
-import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
-import superjson from "superjson";
-
-import { type AppRouter } from "~/server/api/root";
-
-const getBaseUrl = () => {
-  if (typeof window !== "undefined") return ""; // browser should use relative url
-  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
-  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
-};
-
-/** A set of type-safe react-query hooks for your tRPC API. */
-export const api = createTRPCNext<AppRouter>({
-  config() {
-    return {
-      /**
-       * Transformer used for data de-serialization from the server.
-       *
-       * @see https://trpc.io/docs/data-transformers
-       */
-      transformer: superjson,
-
-      /**
-       * Links used to determine request flow from client to server.
-       *
-       * @see https://trpc.io/docs/links
-       */
-      links: [
-        loggerLink({
-          enabled: (opts) =>
-            process.env.NODE_ENV === "development" ||
-            (opts.direction === "down" && opts.result instanceof Error),
-        }),
-        httpBatchLink({
-          url: `${getBaseUrl()}/api/trpc`,
-        }),
-      ],
-    };
-  },
-  /**
-   * Whether tRPC should await queries when server rendering pages.
-   *
-   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
-   */
-  ssr: false,
-});
-
-/**
- * Inference helper for inputs.
- *
- * @example type HelloInput = RouterInputs['example']['hello']
- */
-export type RouterInputs = inferRouterInputs<AppRouter>;
-
-/**
- * Inference helper for outputs.
- *
- * @example type HelloOutput = RouterOutputs['example']['hello']
- */
-export type RouterOutputs = inferRouterOutputs<AppRouter>;
diff --git a/tsconfig.json b/tsconfig.json
index 03ebb74..bf347be 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "checkJs": true,
     "skipLibCheck": true,
@@ -18,8 +22,15 @@
     "noUncheckedIndexedAccess": true,
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./src/*"]
-    }
+      "~/*": [
+        "./src/*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
     ".eslintrc.cjs",
@@ -27,7 +38,10 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.cjs",
-    "**/*.mjs"
+    "**/*.mjs",
+    ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }