Staging

apps/web/example.env

@@ -0,0 +1,4 @@
+APP_URL=https://react-wheel-picker.chanhdai.com
+
+# https://github.com/settings/tokens
+GITHUB_API_TOKEN=

apps/web/src/app/api/stargazers_count/route.ts

@@ -0,0 +1,17 @@
+export async function GET() {
+  const data = await fetch(
+    "https://api.github.com/repos/ncdai/react-wheel-picker",
+    {
+      headers: {
+        Accept: "application/vnd.github+json",
+        Authorization: `Bearer ${process.env.GITHUB_API_TOKEN}`,
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+      next: { revalidate: 86400 }, // Cache for 1 day (86400 seconds)
+    },
+  );
+  const json = await data.json();
+  return Response.json({
+    stargazers_count: json?.stargazers_count ?? -1,
+  });
+}

apps/web/src/components/stars-count.tsx

@@ -3,23 +3,23 @@
 import React from "react";
 import useSWR from "swr";
 
-const fetcher = (url: string) =>
-  fetch(url, { next: { revalidate: 86400 } }).then((r) => r.json()); // Cache for 1 day (86400 seconds)
+const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
 type StarsCountResponse = {
   stargazers_count: number;
 };
 
 export function StarsCount() {
-  const { data } = useSWR<StarsCountResponse>(
-    `https://api.github.com/repos/ncdai/react-wheel-picker`,
-    fetcher,
-  );
+  const { data } = useSWR<StarsCountResponse>(`/api/stargazers_count`, fetcher);
 
   if (!data) {
     return <span className="h-3 w-6 rounded-full bg-muted" />;
   }
 
+  if (data.stargazers_count < 0) {
+    return <span className="h-3 w-6 rounded-full bg-muted" />;
+  }
+
   return (
     <span className="mt-px w-6 text-center font-mono text-xs/none font-medium text-muted-foreground tabular-nums">
       {data.stargazers_count.toLocaleString()}

package.json

@@ -35,7 +35,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "prettier": "3.5.3",
-    "turbo": "^2.5.3",
+    "turbo": "^2.5.4",
     "typescript": "^5.8.3"
   }
 }