### Run Development Server

Source: https://github.com/emreyurur/git-scout/blob/master/README.md

Use these commands to start the Next.js development server. Open http://localhost:3000 in your browser to view the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Format Date to Relative Time

Source: https://context7.com/emreyurur/git-scout/llms.txt

Formats an ISO date string into a human-readable relative time string using the date-fns library. Examples show formatting for hours, days, and months.

```typescript
import { formatRelativeTime } from "@/lib/utils";

formatRelativeTime("2024-01-15T10:00:00Z");
// Returns: "Updated 2 hours ago"

formatRelativeTime("2024-01-10T10:00:00Z");
// Returns: "Updated 5 days ago"

formatRelativeTime("2023-12-01T10:00:00Z");
// Returns: "Updated about 2 months ago"
```

--------------------------------

### NextAuth GitHub OAuth Configuration

Source: https://context7.com/emreyurur/git-scout/llms.txt

Configures NextAuth.js with GitHub provider, requesting user info, email, and repo scopes. The access token is stored in the JWT and session for API calls. Usage example in a server component is provided.

```typescript
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      authorization: {
        params: {
          scope: "read:user user:email repo",
        },
      },
    }),
  ],
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token;
      }
      return token;
    },
    async session({ session, token }) {
      if (session.user) {
        (session as any).accessToken = token.accessToken;
      }
      return session;
    },
  },
});

// Usage in server components
import { auth } from "@/auth";

export default async function ProtectedPage() {
  const session = await auth();

  if (!session?.user) {
    redirect("/");
  }

  const accessToken = (session as any)?.accessToken;
  // Use accessToken for GitHub API calls
}
```

--------------------------------

### Configure GitHub OAuth and API Access

Source: https://context7.com/emreyurur/git-scout/llms.txt

Set up these environment variables in your .env.local file to enable GitHub authentication and API interactions. GITHUB_ID and GITHUB_SECRET are for OAuth, while GITHUB_TOKEN allows for unauthenticated API calls.

```bash
# .env.local

# GitHub OAuth App credentials (required for authentication)
GITHUB_ID=your_github_oauth_client_id
GITHUB_SECRET=your_github_oauth_client_secret

# GitHub Personal Access Token (for unauthenticated API calls)
GITHUB_TOKEN=your_github_personal_access_token

# Optional: Default username for fallback public profile
NEXT_PUBLIC_GITHUB_USERNAME=leerob

# NextAuth secret (auto-generated in development)
AUTH_SECRET=your_auth_secret_for_production
```

--------------------------------

### Display Repository Card with Metadata

Source: https://context7.com/emreyurur/git-scout/llms.txt

Use this component to render a single repository's details in a card format. It displays essential metadata like name, description, topics, language, stars, forks, and last update time. Requires a Repository object as input.

```typescript
import ProjectCard from "@/components/ProjectCard";
import { Repository } from "@/lib/github";

const repo: Repository = {
  id: 1,
  name: "awesome-project",
  description: "An awesome open source project",
  html_url: "https://github.com/user/awesome-project",
  stargazers_count: 15000,
  forks_count: 2500,
  open_issues_count: 150,
  language: "TypeScript",
  topics: ["react", "nextjs", "typescript"],
  updated_at: "2024-01-15T10:00:00Z",
  pushed_at: "2024-01-15T09:30:00Z",
  created_at: "2023-01-01T00:00:00Z",
  owner: {
    login: "user",
    avatar_url: "https://avatars.githubusercontent.com/u/123"
  }
};

// Renders a clickable card that opens the GitHub repo
<ProjectCard repo={repo} />
```

--------------------------------

### RepoExplorer Component Integration

Source: https://context7.com/emreyurur/git-scout/llms.txt

Demonstrates how to use the RepoExplorer client-side component within a Next.js server component. The server component fetches initial repository data using getGlobalTrendingRepos.

```typescript
import RepoExplorer from "@/components/RepoExplorer";
import { getGlobalTrendingRepos } from "@/lib/github";

// Server component fetches data
export default async function HomePage() {
  const repos = await getGlobalTrendingRepos("stars", "All");

  return <RepoExplorer initialRepos={repos} />;
}

// Available filter categories in RepoExplorer:
// - "All Trending" (default)
// - "Frontend" (TypeScript, React, Vue, etc.)
// - "Backend" (Go, Node.js, databases)
// - "Web3" (Blockchain, Solidity, smart contracts)
// - "AI & ML" (Machine learning, PyTorch, transformers)

// Available sort options:
// - "Most Stars" (default)
// - "Recently Updated"
// - "Most Forked"
// - "Help Wanted"
```

--------------------------------

### Client-Side Login and Logout Components

Source: https://context7.com/emreyurur/git-scout/llms.txt

Provides client-side components for initiating GitHub login via NextAuth's signIn function and a user menu component with a signOut button.

```typescript
"use client";
import { signIn, signOut } from "next-auth/react";

// Login button component
export function LoginButton() {
  return (
    <button onClick={() => signIn("github")}>
      Login with GitHub
    </button>
  );
}

// User menu with logout
export function UserMenu({ user }: { user: any }) {
  return (
    <div>
      <img src={user.image} alt={user.name} />
      <span>{user.name}</span>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
}
```

--------------------------------

### Fetch User Repositories with Authentication

Source: https://context7.com/emreyurur/git-scout/llms.txt

Retrieves repositories for an authenticated user, including private ones, or falls back to a default public user if not authenticated. Repositories are sorted by most recently updated. Can be filtered by category using `categorizeProject` and sorted by stars.

```typescript
import { getUserRepositories } from "@/lib/github";
import { auth } from "@/auth";

// Get session and access token
const session = await auth();
const accessToken = (session as any)?.accessToken;

// Fetch authenticated user's repositories (all visibility)
const myRepos = await getUserRepositories(accessToken);

// Fetch without authentication (falls back to default public user)
const publicRepos = await getUserRepositories();

// Filter by category
import { categorizeProject, Category } from "@/lib/utils";

const frontendRepos = myRepos.filter(repo =>
  categorizeProject(repo.topics) === "Frontend"
);

// Sort by stars
const sortedByStars = myRepos.sort((a, b) =>
  b.stargazers_count - a.stargazers_count
);
```

--------------------------------

### getUserStarredRepos

Source: https://context7.com/emreyurur/git-scout/llms.txt

Fetches repositories starred by the authenticated user.

```APIDOC
## getUserStarredRepos

### Description
Fetches up to 100 repositories starred by the authenticated user, sorted by when they were starred (most recent first).

### Parameters
#### Query Parameters
- **accessToken** (string) - Required - GitHub OAuth access token

### Response
#### Success Response (200)
- **Array of Repository Objects** - Returns a list of starred repository objects.
```

--------------------------------

### Fetch User's Starred Repositories

Source: https://context7.com/emreyurur/git-scout/llms.txt

Fetches repositories starred by the authenticated user, sorted by the time they were starred (most recent first). Useful for identifying recently updated starred repositories for notifications.

```typescript
import { getUserStarredRepos } from "@/lib/github";
import { auth } from "@/auth";

const session = await auth();
const accessToken = (session as any)?.accessToken;

// Fetch user's starred repositories
const starredRepos = await getUserStarredRepos(accessToken);

// Check for recently updated starred repos (notifications logic)
const oneDayAgo = new Date();
oneDayAgo.setDate(oneDayAgo.getDate() - 1);

const recentlyUpdated = starredRepos.filter(repo => {
  const pushedDate = new Date(repo.pushed_at);
  return pushedDate > oneDayAgo;
});

console.log(`You have ${recentlyUpdated.length} starred repos with updates in the last 24h`);
```

--------------------------------

### getUserRepositories

Source: https://context7.com/emreyurur/git-scout/llms.txt

Retrieves repositories for an authenticated user or falls back to a default public user.

```APIDOC
## getUserRepositories

### Description
Retrieves up to 100 repositories for an authenticated user or falls back to a default public user. Includes private repositories when authenticated.

### Parameters
#### Query Parameters
- **accessToken** (string) - Optional - GitHub OAuth access token for authenticated requests

### Response
#### Success Response (200)
- **Array of Repository Objects** - Returns a list of repository objects containing details like name, description, and stargazers_count.
```

--------------------------------

### Categorize GitHub Repository Topics

Source: https://context7.com/emreyurur/git-scout/llms.txt

Categorizes a repository based on its GitHub topics array by matching keywords against predefined categories. Returns 'All Projects' if no specific category matches.

```typescript
import { categorizeProject, Category } from "@/lib/utils";

// Categorize based on repository topics
const topics1 = ["machine-learning", "pytorch", "transformers"];
categorizeProject(topics1); // Returns: "AI & ML"

const topics2 = ["react", "nextjs", "typescript"];
categorizeProject(topics2); // Returns: "Frontend"

const topics3 = ["solidity", "ethereum", "smart-contracts"];
categorizeProject(topics3); // Returns: "Blockchain"

const topics4 = ["go", "golang", "kubernetes"];
categorizeProject(topics4); // Returns: "Backend"

const topics5 = ["documentation", "readme"];
categorizeProject(topics5); // Returns: "All Projects"

// Available categories type
type Category = 'AI & ML' | 'Blockchain' | 'Frontend' | 'Backend' | 'All Projects' | 'All';
```

--------------------------------

### Fetch Global Trending GitHub Repositories

Source: https://context7.com/emreyurur/git-scout/llms.txt

Fetches trending GitHub repositories globally, supporting various sort options and categories. The function is cached for 1 hour. Available sort options: 'stars', 'updated', 'forks', 'created', 'help-wanted-issues'. Available categories: 'All', 'AI & ML', 'Blockchain', 'Frontend', 'Backend'.

```typescript
import { getGlobalTrendingRepos, SortOption } from "@/lib/github";

// Fetch all trending repos sorted by stars
const allTrending = await getGlobalTrendingRepos("stars", "All");

// Fetch AI & ML category repos
const aiRepos = await getGlobalTrendingRepos("stars", "AI & ML");

// Fetch Blockchain category repos sorted by recently updated
const web3Repos = await getGlobalTrendingRepos("updated", "Blockchain");

// Available sort options: 'stars' | 'updated' | 'forks' | 'created' | 'help-wanted-issues'
// Available categories: 'All' | 'AI & ML' | 'Blockchain' | 'Frontend' | 'Backend'

// Example response structure
const repo = {
  id: 123456,
  name: "next.js",
  description: "The React Framework",
  html_url: "https://github.com/vercel/next.js",
  stargazers_count: 120000,
  forks_count: 25000,
  open_issues_count: 2500,
  language: "TypeScript",
  topics: ["react", "nextjs", "typescript"],
  updated_at: "2024-01-15T10:00:00Z",
  pushed_at: "2024-01-15T09:30:00Z",
  created_at: "2016-10-25T00:00:00Z",
  owner: {
    login: "vercel",
    avatar_url: "https://avatars.githubusercontent.com/u/14985020"
  }
};
```

--------------------------------

### Display Notification Bell for Starred Repos

Source: https://context7.com/emreyurur/git-scout/llms.txt

This component shows a notification bell with a dropdown listing recently updated starred repositories. It supports pagination for extensive lists and provides relative time displays for updates. Ensure 'updatedRepos' are pre-filtered on the server.

```typescript
import NotificationBell from "@/components/NotificationBell";
import { getUserStarredRepos } from "@/lib/github";

// Server-side: Calculate recently updated repos
const starred = await getUserStarredRepos(accessToken);
const oneDayAgo = new Date();
oneDayAgo.setDate(oneDayAgo.getDate() - 1);

const updatedRepos = starred.filter(repo => {
  const pushedDate = new Date(repo.pushed_at);
  return pushedDate > oneDayAgo;
});

// Pass to client component
<NotificationBell updatedRepos={updatedRepos} />

// Features:
// - Red badge indicator when notifications exist
// - Paginated list (4 items per page)
// - Relative time display for each update
// - Direct links to GitHub repositories
```

--------------------------------

### getGlobalTrendingRepos

Source: https://context7.com/emreyurur/git-scout/llms.txt

Fetches trending GitHub repositories globally with caching support and category filtering.

```APIDOC
## getGlobalTrendingRepos

### Description
Fetches trending GitHub repositories globally with caching support. Uses parallel API queries to gather diverse repositories from different categories and deduplicates results.

### Parameters
#### Query Parameters
- **sort** (string) - Required - Sort option: 'stars' | 'updated' | 'forks' | 'created' | 'help-wanted-issues'
- **category** (string) - Required - Category: 'All' | 'AI & ML' | 'Blockchain' | 'Frontend' | 'Backend'

### Response
#### Success Response (200)
- **id** (number) - Repository ID
- **name** (string) - Repository name
- **description** (string) - Repository description
- **html_url** (string) - URL to the repository
- **stargazers_count** (number) - Number of stars
- **forks_count** (number) - Number of forks
- **open_issues_count** (number) - Number of open issues
- **language** (string) - Primary programming language
- **topics** (array) - List of repository topics
- **updated_at** (string) - Last updated timestamp
- **pushed_at** (string) - Last pushed timestamp
- **created_at** (string) - Creation timestamp
- **owner** (object) - Repository owner details
```

--------------------------------

### Combine Tailwind CSS Class Names

Source: https://context7.com/emreyurur/git-scout/llms.txt

Utility function 'cn' combines Tailwind CSS classes using clsx and tailwind-merge. It supports conditional class application and automatically resolves conflicts between class names.

```typescript
import { cn } from "@/lib/utils";

// Conditional class names
const isActive = true;
const className = cn(
  "px-4 py-2 rounded-lg",
  isActive ? "bg-indigo-500 text-white" : "bg-gray-200 text-gray-700",
  "hover:opacity-80"
);

// Merge conflicting Tailwind classes (tailwind-merge handles conflicts)
cn("px-4 px-6"); // Returns: "px-6"
cn("text-red-500 text-blue-500"); // Returns: "text-blue-500"
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.