Redesign UI

packages/nextjs/app/api/repositories/export/route.ts

@@ -1,11 +1,66 @@
 import { NextResponse } from "next/server";
 import { Pool } from "pg";
+import { Repository, mockRepositories } from "~~/lib/mockData";
 
-const pool = new Pool({
-  connectionString: process.env.POSTGRES_URL,
-});
+const pool = process.env.POSTGRES_URL
+  ? new Pool({
+      connectionString: process.env.POSTGRES_URL,
+    })
+  : null;
+
+function generateCsv(repositories: Repository[]) {
+  const headers = [
+    "ID",
+    "Full Name",
+    "Name",
+    "Owner",
+    "URL",
+    "Homepage",
+    "Stars",
+    "Forks",
+    "Created At",
+    "Updated At",
+    "Last Seen",
+    "Saved At",
+    "Source",
+  ];
+
+  const csvRows = [
+    headers.join(","),
+    ...repositories.map(repo => {
+      return [
+        repo.id,
+        `"${repo.full_name}"`,
+        `"${repo.name}"`,
+        `"${repo.owner}"`,
+        `"${repo.url}"`,
+        repo.homepage ? `"${repo.homepage}"` : "",
+        repo.stars || 0,
+        repo.forks || 0,
+        repo.created_at || "",
+        repo.updated_at || "",
+        repo.last_seen || "",
+        repo.saved_at || "",
+        `"${(repo.source || []).join("; ")}"`,
+      ].join(",");
+    }),
+  ];
+
+  return csvRows.join("\n");
+}
 
 export async function GET() {
+  if (!pool) {
+    const csvContent = generateCsv(mockRepositories);
+    return new NextResponse(csvContent, {
+      status: 200,
+      headers: {
+        "Content-Type": "text/csv",
+        "Content-Disposition": `attachment; filename="repositories-${new Date().toISOString().split("T")[0]}.csv"`,
+      },
+    });
+  }
+
   let client;
 
   try {
@@ -22,47 +77,7 @@ export async function GET() {
     `);
 
     const repositories = result.rows;
-
-    // Convert to CSV format
-    const headers = [
-      "ID",
-      "Full Name",
-      "Name",
-      "Owner",
-      "URL",
-      "Homepage",
-      "Stars",
-      "Forks",
-      "Created At",
-      "Updated At",
-      "Last Seen",
-      "Saved At",
-      "Source",
-    ];
-
-    // Create CSV content
-    const csvRows = [
-      headers.join(","),
-      ...repositories.map(repo => {
-        return [
-          repo.id,
-          `"${repo.full_name}"`,
-          `"${repo.name}"`,
-          `"${repo.owner}"`,
-          `"${repo.url}"`,
-          repo.homepage ? `"${repo.homepage}"` : "",
-          repo.stars || 0,
-          repo.forks || 0,
-          repo.created_at || "",
-          repo.updated_at || "",
-          repo.last_seen || "",
-          repo.saved_at || "",
-          `"${(repo.source || []).join("; ")}"`,
-        ].join(",");
-      }),
-    ];
-
-    const csvContent = csvRows.join("\n");
+    const csvContent = generateCsv(repositories);
 
     // Return CSV file
     return new NextResponse(csvContent, {

packages/nextjs/app/api/repositories/route.ts

@@ -1,11 +1,77 @@
 import { NextRequest, NextResponse } from "next/server";
 import { Pool } from "pg";
+import { Repository, mockRepositories } from "~~/lib/mockData";
 
-const pool = new Pool({
-  connectionString: process.env.POSTGRES_URL,
-});
+const pool = process.env.POSTGRES_URL
+  ? new Pool({
+      connectionString: process.env.POSTGRES_URL,
+    })
+  : null;
+
+function getMockResponse(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const page = parseInt(searchParams.get("page") || "1");
+  const limit = parseInt(searchParams.get("limit") || "30");
+  const sortBy = searchParams.get("sortBy") || "id";
+  const sortOrder = searchParams.get("sortOrder") || "desc";
+  const search = searchParams.get("search") || "";
+
+  const offset = (page - 1) * limit;
+
+  const allowedSortFields = ["id", "stars", "forks", "name", "owner", "created_at", "updated_at", "last_seen"];
+  const validSortBy = allowedSortFields.includes(sortBy) ? sortBy : "id";
+  const validSortOrder = sortOrder.toLowerCase() === "asc" ? "asc" : "desc";
+
+  let filtered = [...mockRepositories];
+
+  if (search) {
+    const searchLower = search.toLowerCase();
+    filtered = filtered.filter(
+      r =>
+        r.full_name.toLowerCase().includes(searchLower) ||
+        r.name.toLowerCase().includes(searchLower) ||
+        r.owner.toLowerCase().includes(searchLower),
+    );
+  }
+
+  filtered.sort((a, b) => {
+    const aVal = a[validSortBy as keyof Repository];
+    const bVal = b[validSortBy as keyof Repository];
+    if (typeof aVal === "number" && typeof bVal === "number") {
+      return validSortOrder === "asc" ? aVal - bVal : bVal - aVal;
+    }
+    const aStr = String(aVal || "");
+    const bStr = String(bVal || "");
+    return validSortOrder === "asc" ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr);
+  });
+
+  const totalCount = filtered.length;
+  const totalPages = Math.ceil(totalCount / limit);
+  const repositories = filtered.slice(offset, offset + limit);
+
+  return NextResponse.json({
+    repositories,
+    pagination: {
+      currentPage: page,
+      totalPages,
+      totalCount,
+      limit,
+      hasNext: page < totalPages,
+      hasPrev: page > 1,
+    },
+    sorting: {
+      sortBy: validSortBy,
+      sortOrder: validSortOrder,
+    },
+    search,
+  });
+}
 
 export async function GET(request: NextRequest) {
+  if (!pool) {
+    return getMockResponse(request);
+  }
+
   try {
     const { searchParams } = new URL(request.url);
     const page = parseInt(searchParams.get("page") || "1");

packages/nextjs/app/api/repositories/stats/route.ts

@@ -1,11 +1,18 @@
 import { NextResponse } from "next/server";
 import { Pool } from "pg";
+import { getMockStats } from "~~/lib/mockData";
 
-const pool = new Pool({
-  connectionString: process.env.POSTGRES_URL,
-});
+const pool = process.env.POSTGRES_URL
+  ? new Pool({
+      connectionString: process.env.POSTGRES_URL,
+    })
+  : null;
 
 export async function GET() {
+  if (!pool) {
+    return NextResponse.json(getMockStats());
+  }
+
   try {
     const client = await pool.connect();
 

packages/nextjs/app/layout.tsx

@@ -5,14 +5,14 @@ import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
 export const metadata = getMetadata({
-  title: "Scaffold-ETH 2 App",
-  description: "Built with 🏗 Scaffold-ETH 2",
+  title: "Scaffold-ETH Projects",
+  description: "Open source projects built with Scaffold-ETH",
 });
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
-    <html suppressHydrationWarning className={``}>
-      <body>
+    <html suppressHydrationWarning>
+      <body className="antialiased">
         <ThemeProvider enableSystem>
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
         </ThemeProvider>