Frontend Star Ranking

A website that displays GitHub star rankings for popular frontend projects.

Features

• 📊 Real-time display of GitHub star counts
• 🏷️ Project categorization (Meta-Frameworks, Frameworks, UI Libraries, etc.)
• 📱 Responsive design for both desktop and mobile
• 🔄 Local caching to reduce API calls
• 📈 Visual comparison of star differences between projects
• ⚡ Built with Next.js and TypeScript

Tech Stack

• Next.js - React framework
• TypeScript - Type safety
• Tailwind CSS - Styling
• SWR - Data fetching
• GitHub API - Data source

Getting Started

Prerequisites

• Node.js 18.x or later
• pnpm 8.x or later

Installation

1. Clone the repository:

git clone https://github.com/yayxs/front-end-star-ranking.git
cd front-end-star-ranking

2. Install dependencies:

pnpm install

3. Create a .env.local file in the root directory and add your GitHub token:

GITHUB_TOKEN=your_github_token_here

4. Start the development server:

pnpm dev

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

Configuration

GitHub Token

To avoid API rate limits, you need to create a GitHub Personal Access Token:

1. Go to GitHub Settings > Developer Settings > Personal Access Tokens
2. Generate a new token with public_repo scope
3. Copy the token to your .env.local file

Adding Projects

Edit app/api/github/route.ts to add or modify projects:

const FRONTEND_REPOS: RepoInfo[] = [
  { repo: 'vercel/next.js', category: 'Meta-Frameworks' },
  // Add more projects here
];

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.