Skip to content

Repository files navigation

GitHub Trending

Spot what's gaining momentum on GitHub — daily, weekly, monthly, and across 25 curated topics — without scrolling GitHub's own trending page by hand.

MIT License Node.js React

Live Demo · Report Bug · Request Feature

English | 中文


GitHub Trending homepage screenshot

Overview

GitHub Trending helps you spot which repositories are gaining momentum — today, this week, this month, or within a specific topic — without scrolling GitHub's own trending page by hand. A CLI script snapshots GitHub's search API on a schedule (via cron) into versioned JSON/CSV files under docs/, and a React web app turns those snapshots into a fast, exportable, bilingual browsing experience with 25 curated topic pages spanning languages, frameworks, and fast-moving AI tooling (Claude Code, Codex, Gemini, DeepSeek, and more).

Key Features

Feature Description
Real-time Data Live GitHub API integration for trending repositories
Dual View Modes Table view for data analysis, Card view for visual browsing
Smart Filtering Filter by categories, keywords, and 20+ attributes
Weekly & Monthly Snapshots Curated top-20 pages refreshed on a rolling schedule, with week-over-week/month-over-month comparisons
Topic Pages 25 curated topics (AI, React, DevOps, Security, Claude Code, Gemini, DeepSeek, ...), each with its own daily-refreshed trending page and a quick topic switcher
Personalized Subscriptions Pick topics of interest and submit them straight to a Google Sheet
Cross-Page Discovery Homepage, Weekly, Monthly, Topics, Subscribe, and Demo pages link to each other through themed teaser sections, joined by short gradient dividers
RanBOT Family Cross-promo grid linking out to 8 sibling RanBOT products, from hosted apps to open-source scrapers
Export Options Download as CSV, JSON, or copy to clipboard
Dark Theme Modern glassmorphism design with smooth animations
Bilingual Full English and Chinese language support

Quick Start

Prerequisites

Installation

# Clone the repository
git clone https://github.com/encoreshao/github-trending.git
cd github-trending

# Install dependencies
npm install

# Start development server
npm run dev

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

Using the App

  1. Navigate to Live Demo (/demo)
  2. Enter your GitHub token in the Settings panel
  3. Select the fields you want to display
  4. Click Fetch Data to load trending repositories
  5. Switch between Table and Card views
  6. Export your data as needed

Pages

Route Description
/ Homepage: daily trending grid, Weekly/Monthly teasers, and the RanBOT family promo
/demo Interactive repository analysis tool, followed by Daily Trending, Weekly, and Monthly teasers
/weekly Top 20 repos created in the last 30 days, refreshed every Monday — cross-links to Monthly Highlights and Daily Trending
/monthly Top 20 repos created in the last 90 days, refreshed on the 1st of each month — cross-links to Weekly Highlights and a Subscribe CTA
/topics Index of all 25 topics, each linking to its own topic page
/topics/:slug Top 20 repos for one topic, created in the last 7 days — includes a topic switcher up top and Daily/Weekly/Monthly overview sections
/subscribe Topic-based subscription setup, submits to Google Sheets, followed by the RanBOT family promo
* Custom 404 page for unmatched or explicitly blocked routes (see src/blockedRoutes.js)

Each page mixes 3-5 sections rather than repeating the same ones everywhere — see RanBOT Family below for the full cross-promo list.


RanBOT Family

The homepage, Subscribe, and Demo pages cross-promote the wider RanBOT product family:

Product Category Description
Skills Productivity Curated skill playbooks to level up how you work with AI
PPT Content Turn ideas into polished presentations in minutes
RSS Content Follow the sources that matter, all in one feed
Video Content AI-assisted video creation and editing
Data Graph Data Visualize and explore connected data
TikTok Scraper Scraping Pull trending TikTok videos and creator data on demand
X Scraper Scraping Collect tweets, threads, and profile data from X
Product Hunt Discovery Track daily-launching products before they trend

The list is defined in src/components/RanbotPromoSection.jsx — add an entry there (name, url, icon, category, blurb, features, gradient) to promote a new product.


Tech Stack

  • Frontend: React 18, Vite, Ant Design 5
  • Styling: CSS3 with glassmorphism effects
  • API: GitHub REST API
  • Data: axios, papaparse, file-saver

Project Structure

src/
├── api/                 # GitHub API + Google Sheets integration
├── data/
│   └── topics.js        # Single source of truth for the 25 topics (id/name/description/icon)
├── components/          # Reusable UI components
│   ├── Header           # Navigation bar
│   ├── Footer           # Site footer, incl. the full topics link list
│   ├── RepoTable        # Table view component
│   ├── RepoCard         # Card view component
│   ├── TrendingPeriodPage # Shared shell for Weekly/Monthly/Topic pages
│   ├── TopicSwitcher         # Scrollable topic-pill switcher shown on topic pages
│   ├── PeriodOverviewSection # Weekly/Monthly teaser card (themed variant per period)
│   ├── DailyOverviewSection  # Daily trending ticker, links back to the homepage
│   ├── RanbotPromoSection    # "Part of the RanBOT family" cross-promo grid
│   ├── SubscribeCtaBanner    # Compact subscribe call-to-action banner
│   ├── SectionDivider        # Short gradient divider between homepage-style sections
│   └── Settings         # Configuration panel
├── pages/               # Route pages
│   ├── HomePage
│   ├── DemoPage
│   ├── WeeklyPage
│   ├── MonthlyPage
│   ├── TopicsIndexPage  # /topics — grid of all 25 topics
│   ├── TopicPage        # /topics/:slug — one topic's trending page
│   ├── SubscriptionPage
│   └── NotFoundPage
├── blockedRoutes.js     # Paths to force through the 404 page
├── locales/             # i18n translations
└── utils/               # Helper functions

CLI Script (Optional)

For automated data collection:

# Set up environment
echo "GITHUB_TOKEN=your_token" > .env

# Run the script for a given period (defaults to daily)
node index.js --period=daily
node index.js --period=weekly
node index.js --period=monthly

# or via npm
npm run trending:daily
npm run trending:weekly
npm run trending:monthly

Each period saves a JSON + CSV snapshot named by the period's start date:

Period Output path Filename
daily docs/YYYY/MM/ YYYY-MM-DD (today)
weekly docs/weekly/YYYY/MM/ YYYY-MM-DD (Monday of the current ISO week)
monthly docs/monthly/YYYY/ YYYY-MM (current month)

The daily run additionally fetches one snapshot per topic (searching GitHub's topic:<slug> qualifier, last 7 days, sorted by stars) for every entry in src/data/topics.js, saved to docs/topics/<slug>/YYYY/MM/YYYY-MM-DD.{json,csv} — this is what powers the /topics/:slug pages.

Automate with Cron

# Daily at 9 AM
0 9 * * * cd /path/to/github-trending && npm run trending:daily

# Weekly, Monday at 9 AM
0 9 * * 1 cd /path/to/github-trending && npm run trending:weekly

# Monthly, 1st of the month at 9 AM
0 9 1 * * cd /path/to/github-trending && npm run trending:monthly

Ready-made wrappers for each cadence also live in scripts/ (run.sh, run-weekly.sh, run-monthly.sh).


Configuration

Web App Settings

Settings are automatically saved in localStorage:

  • GitHub Token - Your personal access token (stored locally)
  • Display Fields - Choose from 20+ repository attributes
  • Page Size - Number of repos per page (1-100)
  • Language - English or Chinese

Subscribe → Google Sheets

The /subscribe form posts submissions to a Google Apps Script Web App, which appends them to a Google Sheet. Set the webhook URL in .env:

VITE_GOOGLE_SHEETS_WEBHOOK_URL=https://script.google.com/macros/s/.../exec

See docs/subscribe-google-sheets-setup.md (local-only, not tracked in git) for the Apps Script deployment steps. Without this variable set, submissions fail with a clear error instead of silently doing nothing.

Available Fields

Basic URLs Dates Stats
Name HTML URL Created Stars
Owner Git URL Updated Forks
Avatar SSH URL Pushed Issues
Description Clone URL Size
Topics SVN URL Language
License Homepage

Troubleshooting

Issue Solution
Rate limit exceeded Ensure valid GitHub token with public_repo scope
No data returned Verify token and network connectivity
Build errors Run rm -rf node_modules && npm install

Contributing

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

License

MIT License - see LICENSE for details.


Made with ❤️ by RanBOT Labs

About

GitHub Daily/Weekly/Monthly Trending Repositories

Topics

Resources

Stars

49 stars

Watchers

2 watching

Forks

Releases

Packages

Used by

Contributors

Languages