Skip to content

README.md

Latest commit

 

History

History
210 lines (162 loc) · 6.61 KB

README.md

File metadata and controls

210 lines (162 loc) · 6.61 KB
Raw

RepoRadar

A modern GitHub analytics platform that provides deep insights into GitHub profiles and repositories with beautiful, interactive visualizations.

Next.js TypeScript TailwindCSS React Query

Overview

RepoRadar analyzes GitHub profiles and repositories, providing detailed metrics, trends, and quality indicators. It helps developers understand coding patterns, repository health, and contribution trends through interactive charts and visualizations.

Key Features

  • User Profile Analysis - Comprehensive GitHub user insights with contribution trends
  • Repository Analysis - Detailed metrics for any public repository
  • Language Statistics - Visual breakdown of programming languages used
  • Repository Health Scoring - Quality indicators based on activity, documentation, and maintenance
  • Contribution Heatmaps - 90-day activity calendar visualization
  • Commit Analytics - Code frequency and commit activity charts
  • Search History - Persistent local storage for recent searches

Tech Stack

Category Technologies
Framework Next.js 15 (App Router), React 19, TypeScript 5
Styling Tailwind CSS 4, shadcn/ui, Radix UI
State Management TanStack React Query 5
Charts Recharts
Validation Zod, React Hook Form
Code Quality Biome (linting & formatting)

Project Structure

src/
├── app/                    # Next.js App Router
│   ├── page.tsx            # Main dashboard
│   ├── layout.tsx          # Root layout with providers
│   └── globals.css         # Global styles
│
├── components/
│   ├── github/             # User analysis components
│   │   ├── user-profile.tsx
│   │   ├── activity-heatmap.tsx
│   │   ├── contribution-chart.tsx
│   │   ├── language-chart.tsx
│   │   ├── repo-health.tsx
│   │   └── ...
│   │
│   ├── repo/               # Repository analysis components
│   │   ├── repo-overview.tsx
│   │   ├── commit-activity.tsx
│   │   ├── contributors.tsx
│   │   └── ...
│   │
│   └── ui/                 # shadcn/ui components
│
├── hooks/
│   ├── use-github-insights.ts   # User data fetching
│   ├── use-repo-insights.ts     # Repository data fetching
│   └── use-search-history.ts    # LocalStorage persistence
│
├── lib/
│   └── github/
│       ├── api.ts          # GitHub API wrapper & analysis
│       └── types.ts        # TypeScript interfaces
│
└── providers/
    └── query-provider.tsx  # TanStack Query setup

Getting Started

Prerequisites

  • Node.js 18+
  • npm, yarn, or pnpm

Installation

# Clone the repository
git clone https://github.com/yourusername/repo-radar.git
cd repo-radar

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Available Scripts

Command Description
npm run dev Start development server with Turbopack
npm run build Create production build
npm run start Start production server
npm run lint Run Biome linter
npm run format Format code with Biome

Architecture

Data Flow

User Input (Search Form)
        ↓
Auto-detect mode (User/Repository)
        ↓
TanStack Query hooks (caching & state)
        ↓
GitHub API calls (parallel requests)
        ↓
Data analysis & processing
        ↓
Interactive visualizations

Key Design Decisions

  • TanStack Query for server state management with 5-minute stale time caching
  • Component composition with small, focused components
  • Custom hooks encapsulating complex data fetching logic
  • TypeScript throughout for type safety
  • Parallel API requests for faster data loading

API Rate Limits

The app uses the public GitHub API which has the following limits:

  • Unauthenticated: 60 requests/hour
  • Built-in caching (5-min stale time) minimizes API calls

Features Deep Dive

User Analysis

Component Description
UserProfile Avatar, bio, stats, social links
StatsOverview Repos, followers, contributions summary
ActivityHeatmap 90-day contribution calendar
LanguageChart Pie chart of languages used
RepoHealthCard Health scores for top repositories
CodeComplexityCard Code quality grades (A-F)
PopularRepos Top starred repositories

Repository Analysis

Component Description
RepoOverview Description, topics, links
RepoStats Stars, forks, issues, watchers
CommitActivity Weekly commits (last 52 weeks)
CodeFrequency Additions vs deletions over time
Contributors Top contributors with stats
IssuesPRs Open/closed issues and PRs
RecentCommits Latest commit history
Releases Version history

Contributing

Contributions are welcome! Here's how to get started:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Make your changes
  4. Run linting (npm run lint)
  5. Commit your changes (git commit -m 'Add amazing feature')
  6. Push to the branch (git push origin feature/amazing-feature)
  7. Open a Pull Request

Code Style

This project uses Biome for linting and formatting. Run npm run format before committing.

Adding New Components

  1. UI components go in src/components/ui/
  2. GitHub-related components go in src/components/github/
  3. Repository-related components go in src/components/repo/
  4. Use TypeScript interfaces from src/lib/github/types.ts

Roadmap

  • GitHub OAuth for higher API rate limits
  • Organization analytics
  • Repository comparison tool
  • Export reports as PDF
  • Trending repositories discovery

Deploy on Vercel

The easiest way to deploy this Next.js app is on Vercel:

Deploy with Vercel

License

This project is open source and available under the MIT License.

Built with Next.js, TypeScript, and TailwindCSS