feat: display friendly error messages on API failure (closes #34)

app/api/compare/route.ts

@@ -36,13 +36,44 @@ export async function GET(request: Request) {
     return NextResponse.json({ success: true, users: results });
   } catch (error: any) {
     console.error("GitHub score error:", error);
-    const message =
-      error?.message === "User not found"
-        ? "GitHub user not found"
-        : "Failed to calculate score";
+
+    let message = "Something went wrong. Please try again later.";
+    let status = 500;
+
+    const msg = (error?.message ?? "").toLowerCase();
+    const isNotFound =
+      msg === "user not found" ||
+      msg.includes("could not resolve to a user") ||
+      msg.includes("user not found") ||
+      error?.errors?.some((e: any) =>
+        e?.type === "NOT_FOUND" || e?.message?.toLowerCase().includes("user")
+      );
+
+    if (isNotFound) {
+      message =
+        "One or more GitHub users could not be found. Please check the usernames and try again.";
+      status = 404;
+    } else if (
+      msg.includes("rate limit") ||
+      msg.includes("api rate limit") ||
+      error?.status === 403
+    ) {
+      message =
+        "GitHub API rate limit exceeded. Please wait a few minutes and try again.";
+      status = 429;
+    } else if (
+      msg.includes("enotfound") ||
+      msg.includes("econnrefused") ||
+      msg.includes("fetch failed")
+    ) {
+      message =
+        "Unable to reach GitHub. Please check your internet connection and try again.";
+      status = 503;
+    }
+
     return NextResponse.json(
       { success: false, error: message },
-      { status: 500 }
+      { status }
     );
   }
 }

app/page.tsx

@@ -74,7 +74,7 @@ export default function HomePage() {
               DevImpact
             </span>
           </div>
-       
+
         </div>
       </header>
       <div className="max-w-6xl mx-auto px-4 py-10 space-y-6">
@@ -84,14 +84,10 @@ export default function HomePage() {
           reset={reset}
           swapUsers={swapUsers}
           data={data}
+          error={error}
         />
 
         {loading && skeleton}
-        {error && (
-          <div className="card p-4 text-sm text-red-600 bg-red-50 border border-red-100">
-            {error}
-          </div>
-        )}
         {data && <ResultDashboard user1={data.user1} user2={data.user2} />}
         {!loading && !error && !data && (
           <div className="flex flex-col items-center justify-center py-20 text-center text-muted-foreground gap-4">