shadcn-github

A GitHub repository browser built with Next.js and shadcn/ui. Search and explore GitHub repositories with syntax-highlighted code preview, pull requests, issues, and an interactive file tree.

Features

• Repository search - Find any GitHub repository by name
• Code browsing - Navigate files with an interactive file tree and syntax-highlighted code preview
• Pull requests - View pull request details and file diffs
• Issues - Browse and read repository issues
• Dark mode - Light and dark theme support
• Demo mode - Configure predefined repositories for showcasing without hitting API rate limits

Tech Stack

• Next.js 16 (App Router, React Server Components)
• React 19 with React Compiler
• shadcn/ui component library
• TailwindCSS 4
• Octokit for GitHub API
• Better-Auth for authentication
• Drizzle ORM with PostgreSQL (Neon)
• Turborepo monorepo

Getting Started

# Install dependencies
bun install

# Set up environment variables
cp apps/web/.env.example apps/web/.env
# Edit .env with your database URL, auth secret, and optionally a GitHub token

# Push database schema
bun run db:push

# Start development server
bun run dev

Open http://localhost:3000 to use the app.

Project Structure

shadcn-github/
├── apps/
│   └── web/                # Next.js application
│       ├── src/app/        # App Router pages
│       ├── src/components/ # React components
│       └── src/lib/        # GitHub API client, utilities
├── packages/
│   ├── auth/               # Better-Auth configuration
│   ├── db/                 # Drizzle ORM database layer
│   ├── env/                # Environment variable validation (T3 Env)
│   └── config/             # Shared TypeScript config

Scripts

Environment Variables