From 331c66ee3f1860f8ddf84102ab410b2cbac1fdad Mon Sep 17 00:00:00 2001
From: Mattia Cerutti <mattiacerutti04@gmail.com>
Date: Wed, 19 Nov 2025 19:33:28 +0100
Subject: [PATCH 1/6] feat: add base trpc

---
 package-lock.json                             | 79 ++++++++++++++++++-
 package.json                                  |  5 ++
 src/app/api/snippets/languages/route.ts       | 11 ---
 src/app/api/snippets/random/route.ts          | 32 --------
 src/app/api/trpc/[trpc]/route.ts              | 14 ++++
 src/app/game/page.tsx                         | 53 ++++++++-----
 src/app/layout.tsx                            |  5 +-
 src/core/middleware/rate-limiter.ts           |  8 +-
 .../adapters/snippet-fetch.client.ts          | 34 --------
 .../services/get-random-snippets.client.ts    |  4 +-
 src/server/trpc/context.ts                    | 13 +++
 src/server/trpc/routers/_app.ts               |  8 ++
 src/server/trpc/routers/snippet.ts            | 27 +++++++
 src/server/trpc/trpc.ts                       | 21 +++++
 src/trpc/react.tsx                            | 35 ++++++++
 15 files changed, 243 insertions(+), 106 deletions(-)
 delete mode 100644 src/app/api/snippets/languages/route.ts
 delete mode 100644 src/app/api/snippets/random/route.ts
 create mode 100644 src/app/api/trpc/[trpc]/route.ts
 delete mode 100644 src/features/snippets/infrastructure/adapters/snippet-fetch.client.ts
 create mode 100644 src/server/trpc/context.ts
 create mode 100644 src/server/trpc/routers/_app.ts
 create mode 100644 src/server/trpc/routers/snippet.ts
 create mode 100644 src/server/trpc/trpc.ts
 create mode 100644 src/trpc/react.tsx

diff --git a/package-lock.json b/package-lock.json
index 743d4c5..8ba67af 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,10 @@
       "dependencies": {
         "@davisvaughan/tree-sitter-r": "^1.2.0",
         "@prisma/client": "^6.5.0",
+        "@tanstack/react-query": "^5.90.10",
+        "@trpc/client": "^11.7.1",
+        "@trpc/react-query": "^11.7.1",
+        "@trpc/server": "^11.7.1",
         "@types/umami-browser": "^2.18.0",
         "axios": "^1.8.4",
         "axios-cache-interceptor": "^1.7.0",
@@ -38,6 +42,7 @@
         "tree-sitter-lua": "2.1.3",
         "tree-sitter-python": "0.20.0",
         "tree-sitter-typescript": "0.23.2",
+        "zod": "^4.1.12",
         "zustand": "^5.0.8"
       },
       "devDependencies": {
@@ -2065,6 +2070,77 @@
         "tailwindcss": "4.1.17"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.10.tgz",
+      "integrity": "sha512-EhZVFu9rl7GfRNuJLJ3Y7wtbTnENsvzp+YpcAV7kCYiXni1v8qZh++lpw4ch4rrwC0u/EZRnBHIehzCGzwXDSQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.90.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.10.tgz",
+      "integrity": "sha512-BKLss9Y8PQ9IUjPYQiv3/Zmlx92uxffUOX8ZZNoQlCIZBJPT5M+GOMQj7xislvVQ6l1BstBjcX0XB/aHfFYVNw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@tanstack/query-core": "5.90.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/@trpc/client": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@trpc/client/-/client-11.7.1.tgz",
+      "integrity": "sha512-uOnAjElKI892/U6aQMcBHYs3x7mme3Cvv1F87ytBL56rBvs7+DyK7r43zgaXKf13+GtPEI6ex5xjVUfyDW8XcQ==",
+      "funding": [
+        "https://trpc.io/sponsor"
+      ],
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "@trpc/server": "11.7.1",
+        "typescript": ">=5.7.2"
+      }
+    },
+    "node_modules/@trpc/react-query": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@trpc/react-query/-/react-query-11.7.1.tgz",
+      "integrity": "sha512-dEHDjIqSTzO8nLlCbtiFBMBwhbSkK1QP7aYVo3nP3sYBna0b+iCtrPXdxVPCSopr9/aIqDTEh+dMRZa7yBgjfQ==",
+      "funding": [
+        "https://trpc.io/sponsor"
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.80.3",
+        "@trpc/client": "11.7.1",
+        "@trpc/server": "11.7.1",
+        "react": ">=18.2.0",
+        "react-dom": ">=18.2.0",
+        "typescript": ">=5.7.2"
+      }
+    },
+    "node_modules/@trpc/server": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@trpc/server/-/server-11.7.1.tgz",
+      "integrity": "sha512-N3U8LNLIP4g9C7LJ/sLkjuPHwqlvE3bnspzC4DEFVdvx2+usbn70P80E3wj5cjOTLhmhRiwJCSXhlB+MHfGeCw==",
+      "funding": [
+        "https://trpc.io/sponsor"
+      ],
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "typescript": ">=5.7.2"
+      }
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
@@ -4258,7 +4334,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -8398,7 +8473,6 @@
       "version": "5.8.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
       "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -8804,7 +8878,6 @@
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz",
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "funding": {
diff --git a/package.json b/package.json
index e0bd155..425a5b0 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,10 @@
   "dependencies": {
     "@davisvaughan/tree-sitter-r": "^1.2.0",
     "@prisma/client": "^6.5.0",
+    "@tanstack/react-query": "^5.90.10",
+    "@trpc/client": "^11.7.1",
+    "@trpc/react-query": "^11.7.1",
+    "@trpc/server": "^11.7.1",
     "@types/umami-browser": "^2.18.0",
     "axios": "^1.8.4",
     "axios-cache-interceptor": "^1.7.0",
@@ -46,6 +50,7 @@
     "tree-sitter-lua": "2.1.3",
     "tree-sitter-python": "0.20.0",
     "tree-sitter-typescript": "0.23.2",
+    "zod": "^4.1.12",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
diff --git a/src/app/api/snippets/languages/route.ts b/src/app/api/snippets/languages/route.ts
deleted file mode 100644
index 9fb67c3..0000000
--- a/src/app/api/snippets/languages/route.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import {rateLimit} from "@/core/middleware/rate-limiter";
-import {getLanguages} from "@/features/snippets/infrastructure/repositories/language.repository.server";
-import {NextRequest, NextResponse} from "next/server";
-
-export async function GET(request: NextRequest) {
-  const resRateLimit = rateLimit(request);
-  if (resRateLimit) return resRateLimit;
-
-  const languages = await getLanguages();
-  return NextResponse.json(languages);
-}
diff --git a/src/app/api/snippets/random/route.ts b/src/app/api/snippets/random/route.ts
deleted file mode 100644
index 42ff19b..0000000
--- a/src/app/api/snippets/random/route.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {rateLimit} from "@/core/middleware/rate-limiter";
-import {doesLanguageExist} from "@/features/snippets/infrastructure/repositories/language.repository.server";
-import {getRandomSnippets} from "@/features/snippets/services/get-random-snippets.server";
-import {NextRequest, NextResponse} from "next/server";
-
-export async function GET(request: NextRequest) {
-  const resRateLimit = rateLimit(request);
-  if (resRateLimit) return resRateLimit;
-
-  const {searchParams} = new URL(request.url);
-  let languageId = searchParams.get("language");
-
-  if (!languageId) {
-    return NextResponse.json({error: "Language not provided"}, {status: 400});
-  }
-
-  languageId = languageId.toLowerCase();
-
-  // Check if language provided exists
-  const languageExists = await doesLanguageExist(languageId);
-  if (!languageExists) {
-    return NextResponse.json({error: "Language not found"}, {status: 404});
-  }
-
-  try {
-    const snippets = await getRandomSnippets(languageId);
-    return NextResponse.json(snippets);
-  } catch (error) {
-    console.error("Error fetching random snippets:", error);
-    return NextResponse.json({error: "Failed to fetch random snippets"}, {status: 500});
-  }
-}
diff --git a/src/app/api/trpc/[trpc]/route.ts b/src/app/api/trpc/[trpc]/route.ts
new file mode 100644
index 0000000..ef909ec
--- /dev/null
+++ b/src/app/api/trpc/[trpc]/route.ts
@@ -0,0 +1,14 @@
+import {fetchRequestHandler} from "@trpc/server/adapters/fetch";
+import {NextRequest} from "next/server";
+import {appRouter} from "@/server/trpc/routers/_app";
+import {createTRPCContext} from "@/server/trpc/context";
+
+const handler = (req: NextRequest) =>
+  fetchRequestHandler({
+    endpoint: "/api/trpc",
+    req,
+    router: appRouter,
+    createContext: () => createTRPCContext({req}),
+  });
+
+export {handler as GET, handler as POST};
diff --git a/src/app/game/page.tsx b/src/app/game/page.tsx
index e054188..f1fa75b 100644
--- a/src/app/game/page.tsx
+++ b/src/app/game/page.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import {useEffect, useRef, useState} from "react";
-import {buildClientSnippet, getRandomCodeSnippets} from "@/features/snippets/services/get-random-snippets.client";
-import {fetchLanguages} from "@/features/snippets/infrastructure/adapters/snippet-fetch.client";
+import {buildClientSnippet, buildClientSnippets} from "@/features/snippets/services/get-random-snippets.client";
 import useStopwatch from "@/features/game/hooks/useStopwatch";
 import {GameStatus} from "@/features/game/types/game-status";
 import {REFRESH_BUTTON_MIN_DELAY} from "@/features/game/config/game";
@@ -14,6 +13,7 @@ import type {ILanguage} from "@/shared/types/language";
 import type {ISnippet} from "@/shared/types/snippet";
 import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
 import {track} from "@/features/game/logic/track";
+import {api} from "@/trpc/react";
 
 function Home() {
   const status = useGameStore((state) => state.status);
@@ -49,21 +49,33 @@ function Home() {
   const [isNextButtonLocked, setIsNextButtonLocked] = useState(false);
 
   const backgroundFetchPromise = useRef<Promise<void> | null>(null);
-  const [availableLanguages, setAvailableLanguages] = useState<{[key: string]: ILanguage} | null>(null);
+  const {
+    data: availableLanguages,
+    isLoading: isLoadingLanguages,
+    isError: languagesError,
+  } = api.snippet.languages.useQuery(undefined, {
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  const {mutateAsync: requestRandomSnippets} = api.snippet.random.useMutation();
+
+  const fetchClientSnippets = async (languageId: string) => {
+    const autoClosingEnabled = useSettingsStore.getState().autoClosingMode !== AutoClosingMode.DISABLED;
+    const rawSnippets = await requestRandomSnippets({languageId});
+    return buildClientSnippets(rawSnippets, autoClosingEnabled);
+  };
 
   const setSnippets = async (selectedLanguage: ILanguage) => {
     setSelectedLanguage(selectedLanguage);
     resetStopwatch();
-    const autoClosingMode = useSettingsStore.getState().autoClosingMode;
-    const snippets = await getRandomCodeSnippets(selectedLanguage.id, autoClosingMode !== AutoClosingMode.DISABLED);
+    const snippets = await fetchClientSnippets(selectedLanguage.id);
     initialize(selectedLanguage, snippets);
   };
 
   const backgroundGetSnippets = async () => {
     if (!language) return;
-    const autoClosingMode = useSettingsStore.getState().autoClosingMode;
-    const snippets = await getRandomCodeSnippets(language!.id, autoClosingMode !== AutoClosingMode.DISABLED);
-
+    const snippets = await fetchClientSnippets(language.id);
     addSnippetsToQueue(snippets);
   };
 
@@ -132,18 +144,17 @@ function Home() {
   };
 
   useEffect(() => {
-    const initializeGame = async () => {
-      const languages = await fetchLanguages();
-      setAvailableLanguages(languages);
+    if (!availableLanguages) return;
+
+    const selectedLanguage = useSettingsStore.getState().selectedLanguage;
+    const langId = selectedLanguage?.id ?? Object.keys(availableLanguages)[0];
 
-      const selectedLanguage = useSettingsStore.getState().selectedLanguage;
+    if (!langId) return;
 
-      const langId = selectedLanguage?.id ?? Object.keys(languages)[0];
+    const languageToUse = availableLanguages[langId];
 
-      await setSnippets(languages[langId]);
-    };
-    initializeGame();
-  }, [setSnippets]);
+    setSnippets(languageToUse);
+  }, [availableLanguages, setSnippets]);
 
   const reparseExistingSnippets = async () => {
     const gameState = useGameStore.getState();
@@ -170,13 +181,17 @@ function Home() {
 
   useEffect(() => {
     reparseExistingSnippets();
-  }, [autoClosingMode, reparseExistingSnippets]);
+  }, [reparseExistingSnippets]);
 
   if (status === GameStatus.FINISHED && currentSnippet) {
     return <EndgameView handleChangeSnippet={handleChangeSnippet} handleRetrySnippet={handleResetSnippet} />;
   }
 
-  if (status === GameStatus.LOADING || !availableLanguages || !currentSnippet || !language) {
+  if (languagesError) {
+    return <div>Failed to load languages.</div>;
+  }
+
+  if (status === GameStatus.LOADING || isLoadingLanguages || !availableLanguages || !currentSnippet || !language) {
     return <div>Loading...</div>;
   }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b69d265..8900f48 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import Script from "next/script";
 import "./globals.css";
 import ThemeProvider from "@/shared/components/theme-provider";
+import {TRPCReactProvider} from "@/trpc/react";
 
 export default function RootLayout({
   children,
@@ -11,7 +12,9 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <head>{process.env.NODE_ENV === "production" && <Script defer src="https://cloud.umami.is/script.js" data-website-id="5776b2c7-d9cd-424b-a233-b9ed0287d324" />}</head>
       <body>
-        <ThemeProvider>{children}</ThemeProvider>
+        <TRPCReactProvider>
+          <ThemeProvider>{children}</ThemeProvider>
+        </TRPCReactProvider>
       </body>
     </html>
   );
diff --git a/src/core/middleware/rate-limiter.ts b/src/core/middleware/rate-limiter.ts
index e598fa6..9873471 100644
--- a/src/core/middleware/rate-limiter.ts
+++ b/src/core/middleware/rate-limiter.ts
@@ -1,4 +1,4 @@
-import {NextRequest, NextResponse} from "next/server";
+import {NextRequest} from "next/server";
 
 type RateLimitEntry = {
   count: number;
@@ -9,7 +9,7 @@ const ipStore = new Map<string, RateLimitEntry>();
 const WINDOW_MS = 60 * 1000; // 1 minute
 const MAX_REQUESTS = 30;
 
-export function rateLimit(req: NextRequest): NextResponse | void {
+export function rateLimit(req: NextRequest): boolean {
   const forwarded = req.headers.get("x-forwarded-for");
   const ip = forwarded?.split(",")[0]?.trim() || "unknown";
 
@@ -19,7 +19,7 @@ export function rateLimit(req: NextRequest): NextResponse | void {
   if (entry) {
     if (now - entry.lastRequest < WINDOW_MS) {
       if (entry.count >= MAX_REQUESTS) {
-        return new NextResponse("Too Many Requests", {status: 429});
+        return true;
       }
       entry.count += 1;
     } else {
@@ -29,4 +29,6 @@ export function rateLimit(req: NextRequest): NextResponse | void {
   } else {
     ipStore.set(ip, {count: 1, lastRequest: now});
   }
+
+  return false;
 }
diff --git a/src/features/snippets/infrastructure/adapters/snippet-fetch.client.ts b/src/features/snippets/infrastructure/adapters/snippet-fetch.client.ts
deleted file mode 100644
index c09ae1b..0000000
--- a/src/features/snippets/infrastructure/adapters/snippet-fetch.client.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {ILanguage} from "@/shared/types/language";
-import {ISnippet} from "@/shared/types/snippet.server";
-
-const internalApiHeader = {
-  "x-internal-api": "true",
-};
-
-export async function fetchRandomSnippets(languageId: string): Promise<ISnippet[]> {
-  const url = `api/snippets/random?language=${encodeURIComponent(languageId)}`;
-
-  const response = await fetch(url, {
-    headers: internalApiHeader,
-  });
-
-  if (!response.ok) {
-    throw new Error(`Request failed with status code ${response.status}`);
-  }
-
-  return await response.json();
-}
-
-export async function fetchLanguages(): Promise<{[key: string]: ILanguage}> {
-  const url = `api/snippets/languages`;
-
-  const response = await fetch(url, {
-    headers: internalApiHeader,
-  });
-
-  if (!response.ok) {
-    throw new Error(`Request failed with status code ${response.status}`);
-  }
-
-  return await response.json();
-}
diff --git a/src/features/snippets/services/get-random-snippets.client.ts b/src/features/snippets/services/get-random-snippets.client.ts
index c1d0c85..2861cd5 100644
--- a/src/features/snippets/services/get-random-snippets.client.ts
+++ b/src/features/snippets/services/get-random-snippets.client.ts
@@ -1,6 +1,5 @@
 import type {ISnippet as IClientSnippet} from "@/shared/types/snippet";
 import type {ISnippet as IServerSnippet} from "@/shared/types/snippet.server";
-import {fetchRandomSnippets} from "@/features/snippets/infrastructure/adapters/snippet-fetch.client";
 import {parseSnippet} from "@/features/snippets/logic/parsing/snippet-parse.client";
 
 export const buildClientSnippet = (rawSnippet: IServerSnippet, autoClosingEnabled: boolean): IClientSnippet | null => {
@@ -12,7 +11,6 @@ export const buildClientSnippet = (rawSnippet: IServerSnippet, autoClosingEnable
   return {parsedSnippet, rawSnippet};
 };
 
-export const getRandomCodeSnippets = async (languageId: string, autoClosingEnabled: boolean): Promise<IClientSnippet[]> => {
-  const rawSnippets = await fetchRandomSnippets(languageId);
+export const buildClientSnippets = (rawSnippets: IServerSnippet[], autoClosingEnabled: boolean): IClientSnippet[] => {
   return rawSnippets.map((rawSnippet) => buildClientSnippet(rawSnippet, autoClosingEnabled)).filter((snippet): snippet is IClientSnippet => snippet !== null);
 };
diff --git a/src/server/trpc/context.ts b/src/server/trpc/context.ts
new file mode 100644
index 0000000..fd585b2
--- /dev/null
+++ b/src/server/trpc/context.ts
@@ -0,0 +1,13 @@
+import {NextRequest} from "next/server";
+
+export type CreateContextOptions = {
+  req: NextRequest;
+};
+
+export async function createTRPCContext({req}: CreateContextOptions) {
+  return {
+    req,
+  };
+}
+
+export type TRPCContext = Awaited<ReturnType<typeof createTRPCContext>>;
diff --git a/src/server/trpc/routers/_app.ts b/src/server/trpc/routers/_app.ts
new file mode 100644
index 0000000..bf775c8
--- /dev/null
+++ b/src/server/trpc/routers/_app.ts
@@ -0,0 +1,8 @@
+import {createTRPCRouter} from "@/server/trpc/trpc";
+import {snippetRouter} from "@/server/trpc/routers/snippet";
+
+export const appRouter = createTRPCRouter({
+  snippet: snippetRouter,
+});
+
+export type AppRouter = typeof appRouter;
diff --git a/src/server/trpc/routers/snippet.ts b/src/server/trpc/routers/snippet.ts
new file mode 100644
index 0000000..fd5a6b2
--- /dev/null
+++ b/src/server/trpc/routers/snippet.ts
@@ -0,0 +1,27 @@
+import {TRPCError} from "@trpc/server";
+import {z} from "zod";
+import {createTRPCRouter, rateLimitedProcedure} from "@/server/trpc/trpc";
+import {getRandomSnippets} from "@/features/snippets/services/get-random-snippets.server";
+import {doesLanguageExist, getLanguages} from "@/features/snippets/infrastructure/repositories/language.repository.server";
+
+export const snippetRouter = createTRPCRouter({
+  languages: rateLimitedProcedure.query(async () => {
+    return getLanguages();
+  }),
+  random: rateLimitedProcedure
+    .input(
+      z.object({
+        languageId: z.string().min(1),
+      })
+    )
+    .mutation(async ({input}) => {
+      const languageId = input.languageId.toLowerCase();
+      const languageExists = await doesLanguageExist(languageId);
+
+      if (!languageExists) {
+        throw new TRPCError({code: "NOT_FOUND", message: "Language not found"});
+      }
+
+      return getRandomSnippets(languageId);
+    }),
+});
diff --git a/src/server/trpc/trpc.ts b/src/server/trpc/trpc.ts
new file mode 100644
index 0000000..f3f8e1d
--- /dev/null
+++ b/src/server/trpc/trpc.ts
@@ -0,0 +1,21 @@
+import {TRPCError, initTRPC} from "@trpc/server";
+import {rateLimit} from "@/core/middleware/rate-limiter";
+import type {TRPCContext} from "./context";
+
+const t = initTRPC.context<TRPCContext>().create();
+
+const rateLimitMiddleware = t.middleware(({ctx, next}) => {
+  if (rateLimit(ctx.req)) {
+    throw new TRPCError({
+      code: "TOO_MANY_REQUESTS",
+      message: "Too many requests, please slow down.",
+    });
+  }
+
+  return next();
+});
+
+export const createTRPCRouter = t.router;
+export const publicProcedure = t.procedure;
+export const rateLimitedProcedure = publicProcedure.use(rateLimitMiddleware);
+export const mergeTRPCRouters = t.mergeRouters;
diff --git a/src/trpc/react.tsx b/src/trpc/react.tsx
new file mode 100644
index 0000000..c6d2c62
--- /dev/null
+++ b/src/trpc/react.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
+import {httpBatchLink} from "@trpc/client";
+import {createTRPCReact} from "@trpc/react-query";
+import {ReactNode, useState} from "react";
+import type {AppRouter} from "@/server/trpc/routers/_app";
+
+export const api = createTRPCReact<AppRouter>();
+
+export function TRPCReactProvider({children}: {children: ReactNode}) {
+  const [queryClient] = useState(() => new QueryClient());
+  const [trpcClient] = useState(() =>
+    api.createClient({
+      links: [
+        httpBatchLink({
+          url: "/api/trpc",
+          headers() {
+            return {
+              "x-internal-api": "true",
+            };
+          },
+        }),
+      ],
+    })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <api.Provider client={trpcClient} queryClient={queryClient}>
+        {children}
+      </api.Provider>
+    </QueryClientProvider>
+  );
+}

From 8c34967688c4a34a19913b0d2e039ef1c13e2a10 Mon Sep 17 00:00:00 2001
From: Mattia Cerutti <mattiacerutti04@gmail.com>
Date: Wed, 19 Nov 2025 20:00:42 +0100
Subject: [PATCH 2/6] refactor: adjust folder structure

---
 prisma/seed/files.ts                          |  2 +-
 prisma/seed/languages.ts                      |  2 +-
 src/app/game/layout.tsx                       |  2 +-
 src/app/game/page.tsx                         |  6 ++--
 src/app/layout.tsx                            |  4 +--
 src/{shared => }/components/theme-toggle.tsx  |  0
 src/core/config/env.ts                        |  1 -
 src/core/middleware/rate-limiter.ts           | 34 -------------------
 src/features/game/components/game-view.tsx    |  2 +-
 .../game/components/typing-area/character.tsx |  2 +-
 .../game/components/typing-area/index.tsx     |  2 +-
 src/features/game/hooks/useTyping.ts          |  2 +-
 src/features/game/logic/game-logic.ts         |  4 +--
 .../game/logic/typing/add-character.ts        |  4 +--
 .../game/logic/typing/delete-character.ts     |  4 +--
 src/features/game/logic/typing/delete-line.ts |  2 +-
 src/features/game/logic/typing/delete-word.ts |  4 +--
 src/features/game/logic/typing/shared.ts      |  4 +--
 src/features/game/state/game-store.ts         |  4 +--
 src/features/game/utils/character.ts          |  4 +--
 src/features/game/utils/typing-metrics.ts     |  4 +--
 .../settings/stores/settings-store.ts         |  2 +-
 src/{ => features}/shared/types/character.ts  |  0
 src/{ => features}/shared/types/language.ts   |  0
 .../shared/types/snippet.server.ts            |  0
 src/features/shared/types/snippet.ts          |  9 +++++
 .../language.repository.server.ts             |  4 +--
 .../repositories/snippet.repository.server.ts |  2 +-
 .../logic/parsing/snippet-parse.client.ts     |  6 ++--
 .../services/get-random-snippets.client.ts    |  4 +--
 .../services/get-random-snippets.server.ts    |  2 +-
 .../theme-provider.tsx                        |  0
 .../react.tsx => providers/trpc-provider.tsx} |  0
 src/proxy.ts                                  | 15 ++++----
 src/{shared/db => server}/prisma.ts           |  0
 src/server/trpc/routers/snippet.ts            |  6 ++--
 src/server/trpc/trpc.ts                       | 15 +-------
 src/shared/types/snippet.ts                   |  9 -----
 38 files changed, 58 insertions(+), 109 deletions(-)
 rename src/{shared => }/components/theme-toggle.tsx (100%)
 delete mode 100644 src/core/config/env.ts
 delete mode 100644 src/core/middleware/rate-limiter.ts
 rename src/{ => features}/shared/types/character.ts (100%)
 rename src/{ => features}/shared/types/language.ts (100%)
 rename src/{ => features}/shared/types/snippet.server.ts (100%)
 create mode 100644 src/features/shared/types/snippet.ts
 rename src/{shared/components => providers}/theme-provider.tsx (100%)
 rename src/{trpc/react.tsx => providers/trpc-provider.tsx} (100%)
 rename src/{shared/db => server}/prisma.ts (100%)
 delete mode 100644 src/shared/types/snippet.ts

diff --git a/prisma/seed/files.ts b/prisma/seed/files.ts
index f46d9e5..6782edc 100644
--- a/prisma/seed/files.ts
+++ b/prisma/seed/files.ts
@@ -1,4 +1,4 @@
-import {ILanguage} from "@/shared/types/language";
+import {ILanguage} from "@/features/shared/types/language";
 import {PrismaClient} from "@prisma/client";
 import {callGitHubApi} from "@lib/github";
 import {SUPPORTED_LANGUAGES} from "./languages";
diff --git a/prisma/seed/languages.ts b/prisma/seed/languages.ts
index db0d518..f15b289 100644
--- a/prisma/seed/languages.ts
+++ b/prisma/seed/languages.ts
@@ -1,4 +1,4 @@
-import {ILanguage} from "@/shared/types/language";
+import {ILanguage} from "@/features/shared/types/language";
 import {PrismaClient} from "@prisma/client";
 
 export const SUPPORTED_LANGUAGES: ILanguage[] = [
diff --git a/src/app/game/layout.tsx b/src/app/game/layout.tsx
index 91f26b3..3110884 100644
--- a/src/app/game/layout.tsx
+++ b/src/app/game/layout.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "next/link";
 import {FaGithub} from "react-icons/fa";
-import ThemeToggle from "@/shared/components/theme-toggle";
+import ThemeToggle from "@/components/theme-toggle";
 
 function GameLayout({children}: {children: React.ReactNode}) {
   return (
diff --git a/src/app/game/page.tsx b/src/app/game/page.tsx
index f1fa75b..b67c2ed 100644
--- a/src/app/game/page.tsx
+++ b/src/app/game/page.tsx
@@ -9,11 +9,11 @@ import {useGameStore} from "@/features/game/state/game-store";
 import useSettingsStore from "@/features/settings/stores/settings-store";
 import GameView from "@/features/game/components/game-view";
 import EndgameView from "@/features/game/components/endgame-view";
-import type {ILanguage} from "@/shared/types/language";
-import type {ISnippet} from "@/shared/types/snippet";
+import type {ILanguage} from "@/features/shared/types/language";
+import type {ISnippet} from "@/features/shared/types/snippet";
 import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
 import {track} from "@/features/game/logic/track";
-import {api} from "@/trpc/react";
+import {api} from "@/providers/trpc-provider";
 
 function Home() {
   const status = useGameStore((state) => state.status);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8900f48..dbb5037 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import Script from "next/script";
 import "./globals.css";
-import ThemeProvider from "@/shared/components/theme-provider";
-import {TRPCReactProvider} from "@/trpc/react";
+import ThemeProvider from "@/providers/theme-provider";
+import {TRPCReactProvider} from "@/providers/trpc-provider";
 
 export default function RootLayout({
   children,
diff --git a/src/shared/components/theme-toggle.tsx b/src/components/theme-toggle.tsx
similarity index 100%
rename from src/shared/components/theme-toggle.tsx
rename to src/components/theme-toggle.tsx
diff --git a/src/core/config/env.ts b/src/core/config/env.ts
deleted file mode 100644
index f793ce5..0000000
--- a/src/core/config/env.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const isDev = process.env.NODE_ENV === "development";
diff --git a/src/core/middleware/rate-limiter.ts b/src/core/middleware/rate-limiter.ts
deleted file mode 100644
index 9873471..0000000
--- a/src/core/middleware/rate-limiter.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import {NextRequest} from "next/server";
-
-type RateLimitEntry = {
-  count: number;
-  lastRequest: number;
-};
-
-const ipStore = new Map<string, RateLimitEntry>();
-const WINDOW_MS = 60 * 1000; // 1 minute
-const MAX_REQUESTS = 30;
-
-export function rateLimit(req: NextRequest): boolean {
-  const forwarded = req.headers.get("x-forwarded-for");
-  const ip = forwarded?.split(",")[0]?.trim() || "unknown";
-
-  const now = Date.now();
-  const entry = ipStore.get(ip);
-
-  if (entry) {
-    if (now - entry.lastRequest < WINDOW_MS) {
-      if (entry.count >= MAX_REQUESTS) {
-        return true;
-      }
-      entry.count += 1;
-    } else {
-      entry.count = 1;
-      entry.lastRequest = now;
-    }
-  } else {
-    ipStore.set(ip, {count: 1, lastRequest: now});
-  }
-
-  return false;
-}
diff --git a/src/features/game/components/game-view.tsx b/src/features/game/components/game-view.tsx
index a867913..d804acf 100644
--- a/src/features/game/components/game-view.tsx
+++ b/src/features/game/components/game-view.tsx
@@ -1,7 +1,7 @@
 import TypingArea from "@/features/game/components/typing-area";
 import useTyping from "@/features/game/hooks/useTyping";
 import {GameStatus} from "@/features/game/types/game-status";
-import type {ILanguage} from "@/shared/types/language";
+import type {ILanguage} from "@/features/shared/types/language";
 import {humanizeTime} from "@/features/game/utils/typing-metrics";
 import {useGameStore} from "../state/game-store";
 import {useState} from "react";
diff --git a/src/features/game/components/typing-area/character.tsx b/src/features/game/components/typing-area/character.tsx
index 4fe3408..4c9e173 100644
--- a/src/features/game/components/typing-area/character.tsx
+++ b/src/features/game/components/typing-area/character.tsx
@@ -1,4 +1,4 @@
-import {CharacterState, WhitespaceTypes} from "@/shared/types/character";
+import {CharacterState, WhitespaceTypes} from "@/features/shared/types/character";
 import React from "react";
 
 interface ICharacterProps {
diff --git a/src/features/game/components/typing-area/index.tsx b/src/features/game/components/typing-area/index.tsx
index bc56be8..1786771 100644
--- a/src/features/game/components/typing-area/index.tsx
+++ b/src/features/game/components/typing-area/index.tsx
@@ -1,6 +1,6 @@
 import {createRef, useEffect} from "react";
 import useCodeHighlight from "@/features/game/hooks/useCodeHighlight";
-import {CharacterTypes, ICharacter, WhitespaceTypes} from "@/shared/types/character";
+import {CharacterTypes, ICharacter, WhitespaceTypes} from "@/features/shared/types/character";
 import {isGameFinished} from "@/features/game/logic/game-logic";
 import {GameStatus} from "@/features/game/types/game-status";
 import Caret from "./caret";
diff --git a/src/features/game/hooks/useTyping.ts b/src/features/game/hooks/useTyping.ts
index dcdd67e..13643ed 100644
--- a/src/features/game/hooks/useTyping.ts
+++ b/src/features/game/hooks/useTyping.ts
@@ -5,7 +5,7 @@ import {addCharacter} from "@/features/game/logic/typing/add-character";
 import {deleteWord} from "@/features/game/logic/typing/delete-word";
 import {deleteLine} from "@/features/game/logic/typing/delete-line";
 import {GameStatus} from "@/features/game/types/game-status";
-import type {IParsedSnippet} from "@/shared/types/snippet";
+import type {IParsedSnippet} from "@/features/shared/types/snippet";
 import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
 
 interface IUseTypingProps {
diff --git a/src/features/game/logic/game-logic.ts b/src/features/game/logic/game-logic.ts
index 795464b..848e1ff 100644
--- a/src/features/game/logic/game-logic.ts
+++ b/src/features/game/logic/game-logic.ts
@@ -1,5 +1,5 @@
-import {CharacterState, CharacterTypes, WhitespaceTypes} from "@/shared/types/character";
-import {IParsedSnippet, ISnippet} from "@/shared/types/snippet";
+import {CharacterState, CharacterTypes, WhitespaceTypes} from "@/features/shared/types/character";
+import {IParsedSnippet, ISnippet} from "@/features/shared/types/snippet";
 
 export function isGameFinished(parsedSnippets: IParsedSnippet) {
   const allCorrect = parsedSnippets.every(
diff --git a/src/features/game/logic/typing/add-character.ts b/src/features/game/logic/typing/add-character.ts
index ee8f143..c69d49b 100644
--- a/src/features/game/logic/typing/add-character.ts
+++ b/src/features/game/logic/typing/add-character.ts
@@ -1,7 +1,7 @@
 import {getChar, getPreviousChar, hasOnlyWhitespacesBefore, setCharacterState} from "@/features/game/logic/typing/shared";
 import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
-import {CharacterState, CharacterTypes, WhitespaceTypes} from "@/shared/types/character";
-import {IParsedSnippet} from "@/shared/types/snippet";
+import {CharacterState, CharacterTypes, WhitespaceTypes} from "@/features/shared/types/character";
+import {IParsedSnippet} from "@/features/shared/types/snippet";
 import {produce} from "immer";
 
 function incrementUserPosition(snippet: IParsedSnippet, position: number, isPressedKeyCorrect: boolean, autoClosingMode: AutoClosingMode): number {
diff --git a/src/features/game/logic/typing/delete-character.ts b/src/features/game/logic/typing/delete-character.ts
index 9cbab1d..3a57382 100644
--- a/src/features/game/logic/typing/delete-character.ts
+++ b/src/features/game/logic/typing/delete-character.ts
@@ -1,5 +1,5 @@
-import {CharacterState, CharacterTypes, WhitespaceTypes} from "@/shared/types/character";
-import {IParsedSnippet} from "@/shared/types/snippet";
+import {CharacterState, CharacterTypes, WhitespaceTypes} from "@/features/shared/types/character";
+import {IParsedSnippet} from "@/features/shared/types/snippet";
 import {getChar, hasOnlyWhitespacesBefore, resetCharactersInRange} from "@/features/game/logic/typing/shared";
 import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
 
diff --git a/src/features/game/logic/typing/delete-line.ts b/src/features/game/logic/typing/delete-line.ts
index 97c8c47..7221fb2 100644
--- a/src/features/game/logic/typing/delete-line.ts
+++ b/src/features/game/logic/typing/delete-line.ts
@@ -1,6 +1,6 @@
 import {getLineStart, getPreviousLineEnd, isFirstCharacter, resetCharactersInRange} from "@/features/game/logic/typing/shared";
 import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
-import {IParsedSnippet} from "@/shared/types/snippet";
+import {IParsedSnippet} from "@/features/shared/types/snippet";
 
 export function deleteLine(snippet: IParsedSnippet, position: number, autoClosingMode: AutoClosingMode): [IParsedSnippet, number] {
   if (position === 0) return [snippet, 0];
diff --git a/src/features/game/logic/typing/delete-word.ts b/src/features/game/logic/typing/delete-word.ts
index e7af02c..314bf82 100644
--- a/src/features/game/logic/typing/delete-word.ts
+++ b/src/features/game/logic/typing/delete-word.ts
@@ -1,7 +1,7 @@
-import {CharacterTypes, ICharacter, WhitespaceTypes} from "@/shared/types/character";
+import {CharacterTypes, ICharacter, WhitespaceTypes} from "@/features/shared/types/character";
 import {getLineStart, getPreviousChar, getPreviousLineEnd, isFirstCharacter, resetCharactersInRange} from "@/features/game/logic/typing/shared";
 import {AUTO_CLOSING_CHARS} from "@/features/game/config/game";
-import {IParsedSnippet} from "@/shared/types/snippet";
+import {IParsedSnippet} from "@/features/shared/types/snippet";
 import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
 
 const isWordSeparator = (char: ICharacter) =>
diff --git a/src/features/game/logic/typing/shared.ts b/src/features/game/logic/typing/shared.ts
index 8b3c1bd..bb38e51 100644
--- a/src/features/game/logic/typing/shared.ts
+++ b/src/features/game/logic/typing/shared.ts
@@ -1,6 +1,6 @@
 import {produce} from "immer";
-import {CharacterState, CharacterTypes, ICharacter, WhitespaceTypes} from "@/shared/types/character";
-import {IParsedSnippet} from "@/shared/types/snippet";
+import {CharacterState, CharacterTypes, ICharacter, WhitespaceTypes} from "@/features/shared/types/character";
+import {IParsedSnippet} from "@/features/shared/types/snippet";
 
 export function getChar(snippet: IParsedSnippet, position: number): ICharacter {
   return snippet[position];
diff --git a/src/features/game/state/game-store.ts b/src/features/game/state/game-store.ts
index 168a48a..e5b7802 100644
--- a/src/features/game/state/game-store.ts
+++ b/src/features/game/state/game-store.ts
@@ -1,6 +1,6 @@
 import {create} from "zustand";
-import type {IParsedSnippet, ISnippet} from "@/shared/types/snippet";
-import type {ILanguage} from "@/shared/types/language";
+import type {IParsedSnippet, ISnippet} from "@/features/shared/types/snippet";
+import type {ILanguage} from "@/features/shared/types/language";
 import {GameStatus} from "@/features/game/types/game-status";
 import {resetCharacters} from "@/features/game/logic/game-logic";
 
diff --git a/src/features/game/utils/character.ts b/src/features/game/utils/character.ts
index 89136bb..12f2657 100644
--- a/src/features/game/utils/character.ts
+++ b/src/features/game/utils/character.ts
@@ -1,5 +1,5 @@
-import {CharacterState} from "@/shared/types/character";
-import {ICharacter, WhitespaceTypes} from "@/shared/types/character";
+import {CharacterState} from "@/features/shared/types/character";
+import {ICharacter, WhitespaceTypes} from "@/features/shared/types/character";
 
 export function getCharacterText(char: ICharacter): string {
   switch (char.value) {
diff --git a/src/features/game/utils/typing-metrics.ts b/src/features/game/utils/typing-metrics.ts
index 290c2fa..1fea311 100644
--- a/src/features/game/utils/typing-metrics.ts
+++ b/src/features/game/utils/typing-metrics.ts
@@ -1,5 +1,5 @@
-import {CharacterTypes, WhitespaceTypes} from "@/shared/types/character";
-import {IParsedSnippet} from "@/shared/types/snippet";
+import {CharacterTypes, WhitespaceTypes} from "@/features/shared/types/character";
+import {IParsedSnippet} from "@/features/shared/types/snippet";
 
 export function calculateWPM(milliseconds: number, totalCharacters: number) {
   const minutes = milliseconds / 1000 / 60;
diff --git a/src/features/settings/stores/settings-store.ts b/src/features/settings/stores/settings-store.ts
index f3059bb..89c803a 100644
--- a/src/features/settings/stores/settings-store.ts
+++ b/src/features/settings/stores/settings-store.ts
@@ -1,4 +1,4 @@
-import {ILanguage} from "@/shared/types/language";
+import {ILanguage} from "@/features/shared/types/language";
 import {create} from "zustand";
 import {persist} from "zustand/middleware";
 import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
diff --git a/src/shared/types/character.ts b/src/features/shared/types/character.ts
similarity index 100%
rename from src/shared/types/character.ts
rename to src/features/shared/types/character.ts
diff --git a/src/shared/types/language.ts b/src/features/shared/types/language.ts
similarity index 100%
rename from src/shared/types/language.ts
rename to src/features/shared/types/language.ts
diff --git a/src/shared/types/snippet.server.ts b/src/features/shared/types/snippet.server.ts
similarity index 100%
rename from src/shared/types/snippet.server.ts
rename to src/features/shared/types/snippet.server.ts
diff --git a/src/features/shared/types/snippet.ts b/src/features/shared/types/snippet.ts
new file mode 100644
index 0000000..6a1fd74
--- /dev/null
+++ b/src/features/shared/types/snippet.ts
@@ -0,0 +1,9 @@
+import {ICharacter} from "@/features/shared/types/character";
+import type {ISnippet as IServerSnippet} from "@/features/shared/types/snippet.server";
+
+export type IParsedSnippet = ICharacter[];
+
+export interface ISnippet {
+  parsedSnippet: IParsedSnippet;
+  rawSnippet: IServerSnippet;
+}
diff --git a/src/features/snippets/infrastructure/repositories/language.repository.server.ts b/src/features/snippets/infrastructure/repositories/language.repository.server.ts
index aaa3c3f..9a340e4 100644
--- a/src/features/snippets/infrastructure/repositories/language.repository.server.ts
+++ b/src/features/snippets/infrastructure/repositories/language.repository.server.ts
@@ -1,5 +1,5 @@
-import {prisma} from "@/shared/db/prisma";
-import {ILanguage} from "@/shared/types/language";
+import {prisma} from "@/server/prisma";
+import {ILanguage} from "@/features/shared/types/language";
 
 export async function doesLanguageExist(languageId: string): Promise<boolean> {
   const language = await prisma.language.findUnique({
diff --git a/src/features/snippets/infrastructure/repositories/snippet.repository.server.ts b/src/features/snippets/infrastructure/repositories/snippet.repository.server.ts
index c5084ba..7503a86 100644
--- a/src/features/snippets/infrastructure/repositories/snippet.repository.server.ts
+++ b/src/features/snippets/infrastructure/repositories/snippet.repository.server.ts
@@ -1,4 +1,4 @@
-import {prisma} from "@/shared/db/prisma";
+import {prisma} from "@/server/prisma";
 import {Snippet} from "@prisma/client";
 
 export async function findRandomSnippets(languageId: string, quantity: number): Promise<Pick<Snippet, "id" | "content">[]> {
diff --git a/src/features/snippets/logic/parsing/snippet-parse.client.ts b/src/features/snippets/logic/parsing/snippet-parse.client.ts
index 30121d8..da4be6e 100644
--- a/src/features/snippets/logic/parsing/snippet-parse.client.ts
+++ b/src/features/snippets/logic/parsing/snippet-parse.client.ts
@@ -1,7 +1,7 @@
-import {CharacterState, CharacterTypes, WhitespaceTypes} from "@/shared/types/character";
-import {IParsedSnippet} from "@/shared/types/snippet";
+import {CharacterState, CharacterTypes, WhitespaceTypes} from "@/features/shared/types/character";
+import {IParsedSnippet} from "@/features/shared/types/snippet";
 import {AUTO_CLOSING_CHARS} from "@/features/game/config/game";
-import {ISnippet} from "@/shared/types/snippet.server";
+import {ISnippet} from "@/features/shared/types/snippet.server";
 
 function createAutoClosingMaps(snippet: ISnippet): {autoClosingMap: Record<number, number>; reverseAutoClosingMap: Record<number, number>} {
   const pendingPairs: Record<string, number[]> = {};
diff --git a/src/features/snippets/services/get-random-snippets.client.ts b/src/features/snippets/services/get-random-snippets.client.ts
index 2861cd5..ffdf8da 100644
--- a/src/features/snippets/services/get-random-snippets.client.ts
+++ b/src/features/snippets/services/get-random-snippets.client.ts
@@ -1,5 +1,5 @@
-import type {ISnippet as IClientSnippet} from "@/shared/types/snippet";
-import type {ISnippet as IServerSnippet} from "@/shared/types/snippet.server";
+import type {ISnippet as IClientSnippet} from "@/features/shared/types/snippet";
+import type {ISnippet as IServerSnippet} from "@/features/shared/types/snippet.server";
 import {parseSnippet} from "@/features/snippets/logic/parsing/snippet-parse.client";
 
 export const buildClientSnippet = (rawSnippet: IServerSnippet, autoClosingEnabled: boolean): IClientSnippet | null => {
diff --git a/src/features/snippets/services/get-random-snippets.server.ts b/src/features/snippets/services/get-random-snippets.server.ts
index f337d8d..07ef7cb 100644
--- a/src/features/snippets/services/get-random-snippets.server.ts
+++ b/src/features/snippets/services/get-random-snippets.server.ts
@@ -1,4 +1,4 @@
-import {ISnippet} from "@/shared/types/snippet.server";
+import {ISnippet} from "@/features/shared/types/snippet.server";
 import {filterSnippets} from "@/features/snippets/logic/filter";
 import {findRandomSnippets} from "@/features/snippets/infrastructure/repositories/snippet.repository.server";
 import {extractAutoCompleteDisabledRanges} from "@/features/snippets/logic/parsing/snippet-parser.server";
diff --git a/src/shared/components/theme-provider.tsx b/src/providers/theme-provider.tsx
similarity index 100%
rename from src/shared/components/theme-provider.tsx
rename to src/providers/theme-provider.tsx
diff --git a/src/trpc/react.tsx b/src/providers/trpc-provider.tsx
similarity index 100%
rename from src/trpc/react.tsx
rename to src/providers/trpc-provider.tsx
diff --git a/src/proxy.ts b/src/proxy.ts
index 47d97d1..3850396 100644
--- a/src/proxy.ts
+++ b/src/proxy.ts
@@ -1,17 +1,14 @@
 import {NextResponse} from "next/server";
 import type {NextRequest} from "next/server";
-import {isDev} from "@/core/config/env";
 
 export async function proxy(req: NextRequest) {
-  if (!isDev) {
-    const internalApi = req.headers.get("x-internal-api");
+  const internalApi = req.headers.get("x-internal-api");
 
-    if (internalApi !== "true") {
-      return new NextResponse(JSON.stringify({error: "Forbidden"}), {
-        status: 403,
-        headers: {"Content-Type": "application/json"},
-      });
-    }
+  if (internalApi !== "true") {
+    return new NextResponse(JSON.stringify({error: "Forbidden"}), {
+      status: 403,
+      headers: {"Content-Type": "application/json"},
+    });
   }
 
   return NextResponse.next();
diff --git a/src/shared/db/prisma.ts b/src/server/prisma.ts
similarity index 100%
rename from src/shared/db/prisma.ts
rename to src/server/prisma.ts
diff --git a/src/server/trpc/routers/snippet.ts b/src/server/trpc/routers/snippet.ts
index fd5a6b2..b5a6274 100644
--- a/src/server/trpc/routers/snippet.ts
+++ b/src/server/trpc/routers/snippet.ts
@@ -1,14 +1,14 @@
 import {TRPCError} from "@trpc/server";
 import {z} from "zod";
-import {createTRPCRouter, rateLimitedProcedure} from "@/server/trpc/trpc";
+import {createTRPCRouter, publicProcedure} from "@/server/trpc/trpc";
 import {getRandomSnippets} from "@/features/snippets/services/get-random-snippets.server";
 import {doesLanguageExist, getLanguages} from "@/features/snippets/infrastructure/repositories/language.repository.server";
 
 export const snippetRouter = createTRPCRouter({
-  languages: rateLimitedProcedure.query(async () => {
+  languages: publicProcedure.query(async () => {
     return getLanguages();
   }),
-  random: rateLimitedProcedure
+  random: publicProcedure
     .input(
       z.object({
         languageId: z.string().min(1),
diff --git a/src/server/trpc/trpc.ts b/src/server/trpc/trpc.ts
index f3f8e1d..aafd4ca 100644
--- a/src/server/trpc/trpc.ts
+++ b/src/server/trpc/trpc.ts
@@ -1,21 +1,8 @@
-import {TRPCError, initTRPC} from "@trpc/server";
-import {rateLimit} from "@/core/middleware/rate-limiter";
+import {initTRPC} from "@trpc/server";
 import type {TRPCContext} from "./context";
 
 const t = initTRPC.context<TRPCContext>().create();
 
-const rateLimitMiddleware = t.middleware(({ctx, next}) => {
-  if (rateLimit(ctx.req)) {
-    throw new TRPCError({
-      code: "TOO_MANY_REQUESTS",
-      message: "Too many requests, please slow down.",
-    });
-  }
-
-  return next();
-});
-
 export const createTRPCRouter = t.router;
 export const publicProcedure = t.procedure;
-export const rateLimitedProcedure = publicProcedure.use(rateLimitMiddleware);
 export const mergeTRPCRouters = t.mergeRouters;
diff --git a/src/shared/types/snippet.ts b/src/shared/types/snippet.ts
deleted file mode 100644
index 1498347..0000000
--- a/src/shared/types/snippet.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import {ICharacter} from "@/shared/types/character";
-import type {ISnippet as IServerSnippet} from "@/shared/types/snippet.server";
-
-export type IParsedSnippet = ICharacter[];
-
-export interface ISnippet {
-  parsedSnippet: IParsedSnippet;
-  rawSnippet: IServerSnippet;
-}

From bf38b8c57a3782f7935b7c2c833deef22f7f7cea Mon Sep 17 00:00:00 2001
From: Mattia Cerutti <mattiacerutti04@gmail.com>
Date: Thu, 20 Nov 2025 00:12:56 +0100
Subject: [PATCH 3/6] refactor: extract snippet fetching logic to custom hook

---
 src/app/game/page.tsx                      | 142 +++++----------------
 src/features/game/hooks/useGameSnippets.ts |  85 ++++++++++++
 2 files changed, 119 insertions(+), 108 deletions(-)
 create mode 100644 src/features/game/hooks/useGameSnippets.ts

diff --git a/src/app/game/page.tsx b/src/app/game/page.tsx
index b67c2ed..5a55de9 100644
--- a/src/app/game/page.tsx
+++ b/src/app/game/page.tsx
@@ -1,116 +1,44 @@
 "use client";
 
-import {useEffect, useRef, useState} from "react";
-import {buildClientSnippet, buildClientSnippets} from "@/features/snippets/services/get-random-snippets.client";
+import {useEffect, useRef, useState, useEffectEvent} from "react";
 import useStopwatch from "@/features/game/hooks/useStopwatch";
-import {GameStatus} from "@/features/game/types/game-status";
-import {REFRESH_BUTTON_MIN_DELAY} from "@/features/game/config/game";
 import {useGameStore} from "@/features/game/state/game-store";
 import useSettingsStore from "@/features/settings/stores/settings-store";
 import GameView from "@/features/game/components/game-view";
 import EndgameView from "@/features/game/components/endgame-view";
+import {track} from "@/features/game/logic/track";
+import {useGameSnippets} from "@/features/game/hooks/useGameSnippets";
+import {GameStatus} from "@/features/game/types/game-status";
+import {buildClientSnippet} from "@/features/snippets/services/get-random-snippets.client";
+import type {ISnippet as IClientSnippet} from "@/features/shared/types/snippet";
 import type {ILanguage} from "@/features/shared/types/language";
-import type {ISnippet} from "@/features/shared/types/snippet";
 import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
-import {track} from "@/features/game/logic/track";
-import {api} from "@/providers/trpc-provider";
 
 function Home() {
   const status = useGameStore((state) => state.status);
-  const language = useGameStore((state) => state.language);
-  const currentSnippet = useGameStore((state) => state.currentSnippet);
   const initialize = useGameStore((state) => state.initialize);
-  const addSnippetsToQueue = useGameStore((state) => state.addSnippetsToQueue);
-  const goToNextSnippet = useGameStore((state) => state.goToNextSnippet);
   const resetCurrentSnippet = useGameStore((state) => state.resetCurrentSnippet);
   const setStatus = useGameStore((state) => state.setStatus);
   const registerPositionSample = useGameStore((state) => state.registerPositionSample);
-  const getSnippetQueue = useGameStore((state) => state.getSnippetQueue);
 
   const autoClosingMode = useSettingsStore((state) => state.autoClosingMode);
-  const setSelectedLanguage = useSettingsStore((state) => state.setSelectedLanguage);
 
   const [elapsedTime, setElapsedTime] = useState(0);
 
   const hiddenInputRef = useRef<HTMLInputElement | null>(null);
 
-  const onTick = (elapsedTime: number) => {
-    setElapsedTime(elapsedTime);
+  const onTick = (elapsed: number) => {
+    setElapsedTime(elapsed);
   };
 
-  const pushPositionSample = (elapsedTime: number) => {
+  const pushPositionSample = (elapsed: number) => {
     const userPosition = useGameStore.getState().userPosition;
     if (userPosition === null) return;
-    registerPositionSample(elapsedTime, userPosition);
+    registerPositionSample(elapsed, userPosition);
   };
 
   const {startStopwatch, stopStopwatch, resetStopwatch, getTime} = useStopwatch({onTick, onInterval: pushPositionSample});
-
-  const [isNextButtonLocked, setIsNextButtonLocked] = useState(false);
-
-  const backgroundFetchPromise = useRef<Promise<void> | null>(null);
-  const {
-    data: availableLanguages,
-    isLoading: isLoadingLanguages,
-    isError: languagesError,
-  } = api.snippet.languages.useQuery(undefined, {
-    staleTime: Infinity,
-    gcTime: Infinity,
-  });
-
-  const {mutateAsync: requestRandomSnippets} = api.snippet.random.useMutation();
-
-  const fetchClientSnippets = async (languageId: string) => {
-    const autoClosingEnabled = useSettingsStore.getState().autoClosingMode !== AutoClosingMode.DISABLED;
-    const rawSnippets = await requestRandomSnippets({languageId});
-    return buildClientSnippets(rawSnippets, autoClosingEnabled);
-  };
-
-  const setSnippets = async (selectedLanguage: ILanguage) => {
-    setSelectedLanguage(selectedLanguage);
-    resetStopwatch();
-    const snippets = await fetchClientSnippets(selectedLanguage.id);
-    initialize(selectedLanguage, snippets);
-  };
-
-  const backgroundGetSnippets = async () => {
-    if (!language) return;
-    const snippets = await fetchClientSnippets(language.id);
-    addSnippetsToQueue(snippets);
-  };
-
-  const goToNextSnippetWithPrefetch = async () => {
-    if (status !== GameStatus.PLAYING && status !== GameStatus.READY && status !== GameStatus.FINISHED) return;
-
-    const snippetQueue = getSnippetQueue();
-
-    const startTime = Date.now();
-    setIsNextButtonLocked(true);
-
-    if (snippetQueue.length === 0) {
-      setStatus(GameStatus.LOADING);
-
-      if (backgroundFetchPromise.current) {
-        await backgroundFetchPromise.current;
-        backgroundFetchPromise.current = null;
-      } else {
-        await setSnippets(language!);
-        setIsNextButtonLocked(false);
-        return;
-      }
-    } else if (snippetQueue.length <= 3 && !backgroundFetchPromise.current) {
-      backgroundFetchPromise.current = backgroundGetSnippets();
-    }
-
-    const elapsedTime = Date.now() - startTime;
-    const remainingTime = Math.max(REFRESH_BUTTON_MIN_DELAY - elapsedTime, 0);
-
-    goToNextSnippet();
-
-    setTimeout(() => {
-      setIsNextButtonLocked(false);
-    }, remainingTime);
-  };
+  const {availableLanguages, languagesError, isNextButtonLocked, activateLanguage, changeSnippet} = useGameSnippets();
 
   const handleResetSnippet = () => {
     resetStopwatch();
@@ -130,68 +58,66 @@ function Home() {
     track("GAME_END");
   };
 
-  const handleChangeSnippet = async () => {
+  const handleSnippetChange = async () => {
     setStatus(GameStatus.LOADING);
-    await goToNextSnippetWithPrefetch();
     resetStopwatch();
+    await changeSnippet();
     hiddenInputRef.current?.focus();
     track("SNIPPET_CHANGE");
   };
 
   const handleChangeLanguage = async (selectedLanguage: ILanguage) => {
-    await setSnippets(selectedLanguage);
+    resetStopwatch();
+    activateLanguage(selectedLanguage);
     track("LANGUAGE_CHANGE", {language: selectedLanguage.name});
   };
 
+  const activateLanguageEvent = useEffectEvent((language: ILanguage) => {
+    resetStopwatch();
+    activateLanguage(language);
+  });
+
+  // Initialize game on available languages load
   useEffect(() => {
     if (!availableLanguages) return;
 
     const selectedLanguage = useSettingsStore.getState().selectedLanguage;
     const langId = selectedLanguage?.id ?? Object.keys(availableLanguages)[0];
-
     if (!langId) return;
 
     const languageToUse = availableLanguages[langId];
+    if (!languageToUse) return;
 
-    setSnippets(languageToUse);
-  }, [availableLanguages, setSnippets]);
+    activateLanguageEvent(languageToUse);
+  }, [availableLanguages]);
 
-  const reparseExistingSnippets = async () => {
+  // Every time autoclosing mode changes, reparse all snippets
+  useEffect(() => {
     const gameState = useGameStore.getState();
     const activeLanguage = gameState.language;
     const activeSnippet = gameState.currentSnippet;
     if (!activeLanguage || !activeSnippet) return;
 
-    const snippetsToReparse = [activeSnippet, ...gameState.getSnippetQueue()];
-
     setStatus(GameStatus.LOADING);
     resetStopwatch();
 
+    const snippetsToReparse = [activeSnippet, ...gameState.getSnippetQueue()];
     const reparsedSnippets = snippetsToReparse
       .map((snippet) => buildClientSnippet(snippet.rawSnippet, autoClosingMode !== AutoClosingMode.DISABLED))
-      .filter((snippet): snippet is ISnippet => snippet !== null);
-
-    if (reparsedSnippets.length === 0) {
-      await setSnippets(activeLanguage);
-      return;
-    }
+      .filter((snippet): snippet is IClientSnippet => snippet !== null);
 
     initialize(activeLanguage, reparsedSnippets);
-  };
-
-  useEffect(() => {
-    reparseExistingSnippets();
-  }, [reparseExistingSnippets]);
+  }, [autoClosingMode, initialize, resetStopwatch, setStatus]);
 
-  if (status === GameStatus.FINISHED && currentSnippet) {
-    return <EndgameView handleChangeSnippet={handleChangeSnippet} handleRetrySnippet={handleResetSnippet} />;
+  if (status === GameStatus.FINISHED) {
+    return <EndgameView handleChangeSnippet={handleSnippetChange} handleRetrySnippet={handleResetSnippet} />;
   }
 
   if (languagesError) {
     return <div>Failed to load languages.</div>;
   }
 
-  if (status === GameStatus.LOADING || isLoadingLanguages || !availableLanguages || !currentSnippet || !language) {
+  if (status === GameStatus.LOADING) {
     return <div>Loading...</div>;
   }
 
@@ -199,11 +125,11 @@ function Home() {
     <GameView
       onGameFinished={handleEndGame}
       onGameStarted={handleStartGame}
-      changeSnippet={handleChangeSnippet}
+      changeSnippet={handleSnippetChange}
       resetSnippet={handleResetSnippet}
       changeLanguage={handleChangeLanguage}
       isRefreshing={isNextButtonLocked}
-      availableLanguages={availableLanguages}
+      availableLanguages={availableLanguages!}
       elapsedTime={elapsedTime}
       hiddenInputRef={hiddenInputRef}
     />
diff --git a/src/features/game/hooks/useGameSnippets.ts b/src/features/game/hooks/useGameSnippets.ts
new file mode 100644
index 0000000..1868777
--- /dev/null
+++ b/src/features/game/hooks/useGameSnippets.ts
@@ -0,0 +1,85 @@
+import {useRef, useState} from "react";
+import {api} from "@/providers/trpc-provider";
+import {useGameStore} from "@/features/game/state/game-store";
+import {GameStatus} from "@/features/game/types/game-status";
+import {REFRESH_BUTTON_MIN_DELAY} from "@/features/game/config/game";
+import type {ILanguage} from "@/features/shared/types/language";
+import type {ISnippet as IClientSnippet} from "@/features/shared/types/snippet";
+import useSettingsStore from "@/features/settings/stores/settings-store";
+import {AutoClosingMode} from "@/features/settings/types/autoclosing-mode";
+import {buildClientSnippets} from "@/features/snippets/services/get-random-snippets.client";
+
+export function useGameSnippets() {
+  const language = useGameStore((state) => state.language);
+  const initialize = useGameStore((state) => state.initialize);
+  const addSnippetsToQueue = useGameStore((state) => state.addSnippetsToQueue);
+  const goToNextSnippet = useGameStore((state) => state.goToNextSnippet);
+  const setStatus = useGameStore((state) => state.setStatus);
+  const getSnippetQueue = useGameStore((state) => state.getSnippetQueue);
+
+  const setSelectedLanguage = useSettingsStore((state) => state.setSelectedLanguage);
+  const autoClosingMode = useSettingsStore((state) => state.autoClosingMode);
+
+  const [isNextButtonLocked, setIsNextButtonLocked] = useState(false);
+  const backgroundFetchPromise = useRef<Promise<void> | null>(null);
+
+  const {data: availableLanguages, isLoading: isLoadingLanguages, isError: languagesError} = api.snippet.languages.useQuery();
+  const {mutateAsync: requestRandomSnippets} = api.snippet.random.useMutation();
+
+  const fetchSnippetsForLanguage = async (language: ILanguage): Promise<IClientSnippet[]> => {
+    const autoClosingEnabled = autoClosingMode !== AutoClosingMode.DISABLED;
+    const rawSnippets = await requestRandomSnippets({languageId: language.id});
+    return buildClientSnippets(rawSnippets, autoClosingEnabled);
+  };
+
+  const refillSnippetQueue = async (language: ILanguage) => {
+    const snippets = await fetchSnippetsForLanguage(language);
+    addSnippetsToQueue(snippets);
+  };
+
+  const activateLanguage = async (language: ILanguage) => {
+    setSelectedLanguage(language);
+    const snippets = await fetchSnippetsForLanguage(language);
+    initialize(language, snippets);
+  };
+
+  const changeSnippet = async () => {
+    const snippetQueue = getSnippetQueue();
+
+    const startTime = Date.now();
+    setIsNextButtonLocked(true);
+
+    if (snippetQueue.length === 0) {
+      setStatus(GameStatus.LOADING);
+
+      if (backgroundFetchPromise.current) {
+        await backgroundFetchPromise.current;
+        backgroundFetchPromise.current = null;
+      } else if (language) {
+        await activateLanguage(language);
+        setIsNextButtonLocked(false);
+        return;
+      }
+    } else if (snippetQueue.length <= 3 && !backgroundFetchPromise.current) {
+      backgroundFetchPromise.current = refillSnippetQueue(language!);
+    }
+
+    const elapsedTime = Date.now() - startTime;
+    const remainingTime = Math.max(REFRESH_BUTTON_MIN_DELAY - elapsedTime, 0);
+
+    goToNextSnippet();
+
+    setTimeout(() => {
+      setIsNextButtonLocked(false);
+    }, remainingTime);
+  };
+
+  return {
+    availableLanguages,
+    isLoadingLanguages,
+    languagesError,
+    isNextButtonLocked,
+    changeSnippet,
+    activateLanguage,
+  };
+}

From d29599d7f9d560cb0b4726fc8667f049a54f57d4 Mon Sep 17 00:00:00 2001
From: Mattia Cerutti <mattiacerutti04@gmail.com>
Date: Fri, 21 Nov 2025 15:16:48 +0100
Subject: [PATCH 4/6] refactor: change filename and move providers in
 components folder

---
 src/app/api/trpc/[trpc]/route.ts                  | 2 +-
 src/app/layout.tsx                                | 4 ++--
 src/{ => components}/providers/theme-provider.tsx | 0
 src/{ => components}/providers/trpc-provider.tsx  | 2 +-
 src/features/game/hooks/useGameSnippets.ts        | 6 +++---
 src/server/trpc/routers/{_app.ts => index.ts}     | 0
 6 files changed, 7 insertions(+), 7 deletions(-)
 rename src/{ => components}/providers/theme-provider.tsx (100%)
 rename src/{ => components}/providers/trpc-provider.tsx (93%)
 rename src/server/trpc/routers/{_app.ts => index.ts} (100%)

diff --git a/src/app/api/trpc/[trpc]/route.ts b/src/app/api/trpc/[trpc]/route.ts
index ef909ec..1db8009 100644
--- a/src/app/api/trpc/[trpc]/route.ts
+++ b/src/app/api/trpc/[trpc]/route.ts
@@ -1,6 +1,6 @@
 import {fetchRequestHandler} from "@trpc/server/adapters/fetch";
 import {NextRequest} from "next/server";
-import {appRouter} from "@/server/trpc/routers/_app";
+import {appRouter} from "@/server/trpc/routers";
 import {createTRPCContext} from "@/server/trpc/context";
 
 const handler = (req: NextRequest) =>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index dbb5037..dc15f91 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import Script from "next/script";
 import "./globals.css";
-import ThemeProvider from "@/providers/theme-provider";
-import {TRPCReactProvider} from "@/providers/trpc-provider";
+import ThemeProvider from "@/components/providers/theme-provider";
+import {TRPCReactProvider} from "@/components/providers/trpc-provider";
 
 export default function RootLayout({
   children,
diff --git a/src/providers/theme-provider.tsx b/src/components/providers/theme-provider.tsx
similarity index 100%
rename from src/providers/theme-provider.tsx
rename to src/components/providers/theme-provider.tsx
diff --git a/src/providers/trpc-provider.tsx b/src/components/providers/trpc-provider.tsx
similarity index 93%
rename from src/providers/trpc-provider.tsx
rename to src/components/providers/trpc-provider.tsx
index c6d2c62..a91f010 100644
--- a/src/providers/trpc-provider.tsx
+++ b/src/components/providers/trpc-provider.tsx
@@ -4,7 +4,7 @@ import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import {httpBatchLink} from "@trpc/client";
 import {createTRPCReact} from "@trpc/react-query";
 import {ReactNode, useState} from "react";
-import type {AppRouter} from "@/server/trpc/routers/_app";
+import type {AppRouter} from "@/server/trpc/routers";
 
 export const api = createTRPCReact<AppRouter>();
 
diff --git a/src/features/game/hooks/useGameSnippets.ts b/src/features/game/hooks/useGameSnippets.ts
index 1868777..9cb99f9 100644
--- a/src/features/game/hooks/useGameSnippets.ts
+++ b/src/features/game/hooks/useGameSnippets.ts
@@ -1,5 +1,5 @@
 import {useRef, useState} from "react";
-import {api} from "@/providers/trpc-provider";
+import {api} from "@/components/providers/trpc-provider";
 import {useGameStore} from "@/features/game/state/game-store";
 import {GameStatus} from "@/features/game/types/game-status";
 import {REFRESH_BUTTON_MIN_DELAY} from "@/features/game/config/game";
@@ -24,11 +24,11 @@ export function useGameSnippets() {
   const backgroundFetchPromise = useRef<Promise<void> | null>(null);
 
   const {data: availableLanguages, isLoading: isLoadingLanguages, isError: languagesError} = api.snippet.languages.useQuery();
-  const {mutateAsync: requestRandomSnippets} = api.snippet.random.useMutation();
+  const fetchRandomSnippets = api.snippet.random.useMutation();
 
   const fetchSnippetsForLanguage = async (language: ILanguage): Promise<IClientSnippet[]> => {
     const autoClosingEnabled = autoClosingMode !== AutoClosingMode.DISABLED;
-    const rawSnippets = await requestRandomSnippets({languageId: language.id});
+    const rawSnippets = await fetchRandomSnippets.mutateAsync({languageId: language.id});
     return buildClientSnippets(rawSnippets, autoClosingEnabled);
   };
 
diff --git a/src/server/trpc/routers/_app.ts b/src/server/trpc/routers/index.ts
similarity index 100%
rename from src/server/trpc/routers/_app.ts
rename to src/server/trpc/routers/index.ts

From 753305af30838401985f6db02da3246c07b75c51 Mon Sep 17 00:00:00 2001
From: Mattia Cerutti <mattiacerutti04@gmail.com>
Date: Fri, 21 Nov 2025 15:37:35 +0100
Subject: [PATCH 5/6] feat: add simple error request error handling

---
 src/app/game/page.tsx                      | 18 +++++++++++++++---
 src/components/providers/trpc-provider.tsx | 17 ++++++++++++++++-
 src/features/game/hooks/useGameSnippets.ts | 13 +++++++------
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/app/game/page.tsx b/src/app/game/page.tsx
index 5a55de9..201e452 100644
--- a/src/app/game/page.tsx
+++ b/src/app/game/page.tsx
@@ -38,7 +38,7 @@ function Home() {
   };
 
   const {startStopwatch, stopStopwatch, resetStopwatch, getTime} = useStopwatch({onTick, onInterval: pushPositionSample});
-  const {availableLanguages, languagesError, isNextButtonLocked, activateLanguage, changeSnippet} = useGameSnippets();
+  const {availableLanguages, error, isNextButtonLocked, activateLanguage, changeSnippet} = useGameSnippets();
 
   const handleResetSnippet = () => {
     resetStopwatch();
@@ -113,8 +113,20 @@ function Home() {
     return <EndgameView handleChangeSnippet={handleSnippetChange} handleRetrySnippet={handleResetSnippet} />;
   }
 
-  if (languagesError) {
-    return <div>Failed to load languages.</div>;
+  if (error) {
+    return (
+      <div className="flex flex-col gap-5">
+        <h1 className="text-4xl">There was an error! :(</h1>
+        <p>
+          Something went wrong while getting your game ready, try again later. <br />
+          If the issue persists, please&nbsp;
+          <a className="underline" href="https://github.com/mattiacerutti/code-typer/issues">
+            open an issue
+          </a>
+          &nbsp;on Github.
+        </p>
+      </div>
+    );
   }
 
   if (status === GameStatus.LOADING) {
diff --git a/src/components/providers/trpc-provider.tsx b/src/components/providers/trpc-provider.tsx
index a91f010..be9ea10 100644
--- a/src/components/providers/trpc-provider.tsx
+++ b/src/components/providers/trpc-provider.tsx
@@ -8,8 +8,23 @@ import type {AppRouter} from "@/server/trpc/routers";
 
 export const api = createTRPCReact<AppRouter>();
 
+export function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: 3,
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+      },
+      mutations: {
+        retry: 3,
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 10000),
+      },
+    },
+  });
+}
+
 export function TRPCReactProvider({children}: {children: ReactNode}) {
-  const [queryClient] = useState(() => new QueryClient());
+  const [queryClient] = useState(() => createQueryClient());
   const [trpcClient] = useState(() =>
     api.createClient({
       links: [
diff --git a/src/features/game/hooks/useGameSnippets.ts b/src/features/game/hooks/useGameSnippets.ts
index 9cb99f9..1285fa9 100644
--- a/src/features/game/hooks/useGameSnippets.ts
+++ b/src/features/game/hooks/useGameSnippets.ts
@@ -23,8 +23,10 @@ export function useGameSnippets() {
   const [isNextButtonLocked, setIsNextButtonLocked] = useState(false);
   const backgroundFetchPromise = useRef<Promise<void> | null>(null);
 
-  const {data: availableLanguages, isLoading: isLoadingLanguages, isError: languagesError} = api.snippet.languages.useQuery();
-  const fetchRandomSnippets = api.snippet.random.useMutation();
+  const {data: availableLanguages, isError: languagesError} = api.snippet.languages.useQuery();
+  const {error: randomError, ...fetchRandomSnippets} = api.snippet.random.useMutation();
+
+  const error = languagesError || randomError;
 
   const fetchSnippetsForLanguage = async (language: ILanguage): Promise<IClientSnippet[]> => {
     const autoClosingEnabled = autoClosingMode !== AutoClosingMode.DISABLED;
@@ -76,10 +78,9 @@ export function useGameSnippets() {
 
   return {
     availableLanguages,
-    isLoadingLanguages,
-    languagesError,
-    isNextButtonLocked,
-    changeSnippet,
     activateLanguage,
+    changeSnippet,
+    error,
+    isNextButtonLocked,
   };
 }

From b4c24ce0fb280c1c4d7d29f319fc544c2892f24f Mon Sep 17 00:00:00 2001
From: Mattia Cerutti <mattiacerutti04@gmail.com>
Date: Fri, 21 Nov 2025 16:02:30 +0100
Subject: [PATCH 6/6] fix: clear snippet refill promise to prevent empty-queue
 crash

---
 src/features/game/hooks/useGameSnippets.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/features/game/hooks/useGameSnippets.ts b/src/features/game/hooks/useGameSnippets.ts
index 1285fa9..6e59605 100644
--- a/src/features/game/hooks/useGameSnippets.ts
+++ b/src/features/game/hooks/useGameSnippets.ts
@@ -56,14 +56,15 @@ export function useGameSnippets() {
 
       if (backgroundFetchPromise.current) {
         await backgroundFetchPromise.current;
-        backgroundFetchPromise.current = null;
       } else if (language) {
         await activateLanguage(language);
         setIsNextButtonLocked(false);
         return;
       }
     } else if (snippetQueue.length <= 3 && !backgroundFetchPromise.current) {
-      backgroundFetchPromise.current = refillSnippetQueue(language!);
+      backgroundFetchPromise.current = refillSnippetQueue(language!).finally(() => {
+        backgroundFetchPromise.current = null;
+      });
     }
 
     const elapsedTime = Date.now() - startTime;