A modern, Apple-inspired web application for discovering and analyzing trending GitHub repositories. Features a beautiful homepage, subscription system, and live demo with comprehensive repository analysis tools.
Languages / θ―θ¨: English | δΈζ
- Apple-Style Design: Clean, professional interface with smooth animations
- Homepage: Compelling landing page with feature highlights and call-to-actions
- Subscription System: Category-based subscription with 18+ technology categories
- Live Demo: Interactive demonstration of the trending repository analysis tool
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Real-time Data: Fetch trending repositories with live GitHub API integration
- Dual View Modes: Table view for detailed data and Card view for visual browsing
- Smart Filtering: Advanced filtering by categories, keywords, and attributes
- Export Capabilities: Export data as CSV, JSON, or copy to clipboard
- Customizable Fields: Select from 20+ repository attributes to display
- Bilingual Support: Full English and Chinese language support
- Automated Fetching: Fetches top 20 trending GitHub repositories
- Multiple Output Formats: Saves data as Markdown, JSON, and CSV files
- Cron Automation: Can be automated via cron for daily data collection
-
Install dependencies
npm install
-
Start the development server
npm run dev
-
Explore the website
- Homepage: Visit http://localhost:5173 for the landing page
- Subscribe: Navigate to
/subscribe
to choose your technology categories - Live Demo: Visit
/demo
to try the repository analysis tool
-
Get a GitHub Token (for demo functionality)
- Go to GitHub Settings > Developer settings > Personal access tokens
- Generate a new token with
public_repo
scope - Enter the token in the demo application
/
- Homepage: Landing page with feature highlights and navigation/subscribe
- Subscription: Category selection for personalized updates/demo
- Live Demo: Interactive repository analysis tool
- Apple-Inspired UI: Clean typography, subtle animations, and professional color scheme
- Consistent Button Style: Transparent backgrounds with blue borders and hover effects
- Responsive Layout: Optimized for all screen sizes
- Modern Icons: Ant Design icon library with semantic meaning
- React 18 with Vite for fast development
- React Router for client-side navigation
- Ant Design 5 for UI components
- CSS Modules for scoped styling
- GitHub API for real-time repository data
npm run build
-
Set up your environment
- Create a
.env
file in the project root:GITHUB_TOKEN=your_github_token
- Create a
-
Run the script
node index.js
- Trending data will be saved in the
docs/
directory as Markdown, JSON, and CSV files
- Trending data will be saved in the
-
Automate with cron (Optional)
# Add to crontab for daily execution at 9 AM 0 9 * * * cd /path/to/github-trending && node index.js
- Frontend: React 18, Ant Design 5, Vite
- Styling: CSS3 with modern grid layouts and responsive design
- Data Processing: axios, file-saver, papaparse, react-copy-to-clipboard
- Build Tool: Vite for fast development and optimized production builds
- Runtime: Node.js
- HTTP Client: axios
- File System: fs-extra
- Data Processing: json2csv
- Environment: dotenv
github-trending/
βββ src/
β βββ components/
β β βββ AttributeSelector.jsx # Field selection component
β β βββ RepoCardView.jsx # Card view component
β β βββ RepoTable.jsx # Table view component
β β βββ SettingsPanel.jsx # Settings panel
β β βββ TokenInput.jsx # Token input component
β βββ api/
β β βββ github.js # GitHub API integration
β βββ App.jsx # Main application component
β βββ App.css # Application styles
β βββ main.jsx # Application entry point
βββ docs/ # Output directory for CLI script
βββ index.js # Node.js CLI script
βββ package.json # Dependencies and scripts
βββ README.md # This file
-
Settings Panel (Left Sidebar)
- GitHub Token: Enter your personal access token
- Field Selection: Choose which repository attributes to display
- Page Size: Set number of repositories per page (1-100)
- Category Filter: Filter by specific keywords or categories
- Language: Switch between English and δΈζ
-
Data Display (Main Area)
- View Modes: Toggle between Table and Card views
- Table View: Detailed tabular data with sortable columns
- Card View: Visual cards with repository information
- Export Options: CSV, JSON, or copy to clipboard
-
Available Fields
- Repository name, stars, owner, avatar
- Description, topics, URLs (HTML, Git, SSH, Clone, SVN)
- Creation/update/push dates
- Size, language, forks, issues, license
- Default branch and homepage
The CLI script generates three types of files in the docs/
directory:
-
Markdown Files (
YYYY-MM-DD.md
andYYYY-MM-DD-table.md
)- Detailed repository information
- Table format for easy reading
- Includes all metadata
-
JSON File (
YYYY-MM-DD.json
)- Structured data for programmatic use
- Selected fields only for efficiency
-
CSV File (
YYYY-MM-DD.csv
)- Spreadsheet-compatible format
- All repository fields included
- Settings are automatically saved in browser localStorage
- Token is stored securely (not transmitted to external servers)
- Field selections persist between sessions
- Configure via
.env
file - Modify
index.js
to change output formats or fields - Adjust date range by modifying
getLastWeekDate()
function
- Web Application: Edit
src/components/AttributeSelector.jsx
- Node.js Script: Modify the
fields
array insaveReposToCsv()
- Web Application: Modify
src/App.css
for custom styling - Card Layout: Adjust grid settings in
.grid
class - Colors: Update CSS custom properties
- Web Application: Extend
src/api/github.js
for additional GitHub API endpoints - Node.js Script: Modify the search query in
fetchTrendingRepos()
- Node.js: Version 16 or higher
- GitHub Token: Personal Access Token with
public_repo
scope - Browser: Modern browser with ES6+ support
-
Rate Limit Exceeded
- Ensure you have a valid GitHub token
- Check token permissions include
public_repo
scope
-
No Data Returned
- Verify your token is correct
- Check network connectivity
- Ensure repositories exist for the date range
-
Build Errors
- Clear node_modules and reinstall:
rm -rf node_modules && npm install
- Check Node.js version compatibility
- Clear node_modules and reinstall:
- Fork the repository
- Create a feature branch:
git checkout -b feature-name
- Make your changes
- Commit your changes:
git commit -m 'Add feature'
- Push to the branch:
git push origin feature-name
- Submit a pull request
This project is available as open source under the terms of the MIT License.
- GitHub Repository: https://github.com/encoreshao/github-trending
- Online Demo: https://github.ranbot.online
- Issues: Report bugs or request features