GitHub Dashboard SPA 🚀

A modern GitHub dashboard built with React 19, Relay, and TailwindCSS. View and manage your repositories efficiently!

✨ Current Features

User Interactions

• 👥 Follow/Unfollow Users
  • Manage following status
  • View follower/following counts
  • Quick user profile access

Repository Details

• 🌿 Branch Management
  • List all branches
  • Branch protection status
  • Latest commit information
• 📝 Commit History
  • View recent commits
  • Commit details and messages
  • Author information

Repository Management

• 🗑️ Bulk Repository Deletion
  • Select multiple repositories
  • Confirm and delete in batch
• 📋 Repository Listing
  • View all your repositories
  • Sort by various criteria
  • Quick access to repository details

Advanced Search

• 🔍 Visual Query Builder
  • Complex GitHub search syntax made easy
  • Date range filters (created, updated, pushed)
  • Language filters
  • Star count filters
  • Size and fork filters

🔥 Tech Stack

• ⚛️ React 19 (Latest)
• 🎯 Relay - Facebook's GraphQL client
• 🎨 TailwindCSS 4
• ⚡ Vite
• 🛣️ TanStack Router
• 🔒 Clerk Auth
• 💅 Radix UI + shadcn/ui

Why Relay over Apollo? 🤔

Relay is purpose-built by Meta (Facebook) for efficient data fetching with GraphQL:

• Collocated data requirements with components
• Compile-time GraphQL validation
• Built-in data consistency
• Automatic query/fragment composition
• Optimized for performance with automatic request batching
• Strong TypeScript support

Why SPA instead of SSR? 🌐

This application is built as a Single Page Application (SPA) using Vite instead of Next.js SSR for several reasons:

1. No SEO requirements - dashboard is private/authenticated
2. Better GitHub API rate limiting - requests are per-user browser instead of shared server
3. Faster subsequent page loads with client-side caching
4. Simpler deployment (static files only)

🚀 Getting Started

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Generate Relay types
pnpm relay

# Build for production
pnpm build

📜 Available Scripts

pnpm dev - Start development server pnpm build - Build for production pnpm relay - Generate Relay types pnpm lint - Lint code pnpm preview - Preview production build pnpm tsc - Type check

📦 Key Dependencies

React 19 for modern React features Relay 18.2 for GraphQL data fetching TailwindCSS 4 for styling Radix UI primitives with shadcn/ui components TanStack Router for type-safe routing Clerk for authentication