🚀 GitHub Contribution Listing

A beautiful, modern web application to track and display GitHub contributions (Pull Requests and Issues) with an elegant interface and powerful filtering capabilities.

✨ Features

• 🔍 Search GitHub Users - Find any GitHub user and view their contributions
• 📊 Contribution Dashboard - View merged PRs and closed issues in one place
• 📱 Responsive Design - Beautiful UI that works on all devices
• 🔄 Pagination - Efficiently browse through large contribution lists
• 📈 Statistics - See total counts and contribution summaries
• 🎨 Modern UI - Clean, professional interface with dark/light mode support
• ⚡ Fast Performance - Optimized API calls with smart caching
• 🔗 Embeddable - Generate embed codes for your contributions
• 🚦 Rate Limited - Protected API with 1000 requests/hour limit

🛠️ Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• API: GitHub GraphQL API
• Icons: Lucide React

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• GitHub Personal Access Token

Installation

1. Clone the repository

   git clone https://github.com/yourusername/github-contribution-listing.git
   cd github-contribution-listing

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up environment variables

   Create a .env.local file in the root directory:

   GITHUB_TOKEN=your_github_personal_access_token_here

   To get a GitHub token:

   • Go to GitHub Settings > Developer settings > Personal access tokens
   • Generate a new token with public_repo scope
   • Copy the token to your .env.local file

4. Run the development server

   npm run dev
   # or
   yarn dev

5. Open your browser

   Navigate to http://localhost:3000

📖 Usage

1. Enter a GitHub username in the search field
2. Click "Track Contributions" to fetch data
3. Browse contributions using the pagination controls
4. View statistics in the user profile section
5. Generate embed codes for sharing

Example Users to Try

• torvalds - Linus Torvalds
• gaearon - Dan Abramov
• sindresorhus - Sindre Sorhus
• tj - TJ Holowaychuk

🔧 Configuration

Environment Variables

Variable	Description	Required
GITHUB_TOKEN	GitHub Personal Access Token	Yes

Rate Limiting

The API is rate limited to 1000 requests per hour globally to prevent abuse and ensure fair usage.

📁 Project Structure

├── app/
│   ├── api/github/route.ts    # GitHub API integration
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Main page component
├── components/
│   ├── contributions-dashboard.tsx
│   ├── embed-code.tsx
│   ├── footer.tsx
│   ├── header.tsx
│   ├── search-form.tsx
│   ├── ui/                    # shadcn/ui components
│   └── user-profile.tsx
├── hooks/
│   └── use-toast.ts           # Toast notifications
├── lib/
│   └── utils.ts               # Utility functions
└── public/                    # Static assets

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Guidelines

1. Fork the repository
2. Create a 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

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

🐛 Bug Reports

If you find a bug, please open an issue with:

• Clear description of the problem
• Steps to reproduce
• Expected vs actual behavior
• Screenshots (if applicable)

💡 Feature Requests

Have an idea for improvement? Open an issue with the enhancement label and describe:

• The feature you'd like to see
• Why it would be useful
• Any implementation ideas

🙏 Acknowledgments

• GitHub for providing the GraphQL API
• Vercel for hosting platform
• shadcn for the amazing UI components
• All contributors who help improve this project

📊 Stats

---

Made with ❤️ by Your Name

⭐ Star this repo if you find it helpful!