Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gifflet/github-stats-cloud
Modern GitHub stats badge generator built with Next.js 14, Edge Runtime, and Cloudflare Workers.
https://github.com/gifflet/github-stats-cloud
cloudflare-pages cloudflare-workers github-badges github-profile github-stats nextjs responsive-design
Last synced: about 1 month ago
JSON representation
Modern GitHub stats badge generator built with Next.js 14, Edge Runtime, and Cloudflare Workers.
- Host: GitHub
- URL: https://github.com/gifflet/github-stats-cloud
- Owner: gifflet
- Created: 2024-11-16T15:36:33.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-17T23:18:48.000Z (2 months ago)
- Last Synced: 2024-11-18T00:27:20.136Z (2 months ago)
- Topics: cloudflare-pages, cloudflare-workers, github-badges, github-profile, github-stats, nextjs, responsive-design
- Language: TypeScript
- Homepage: https://git-metrics-cloud-app.pages.dev
- Size: 627 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌟 GitHub Stats Cloud
A modern web application that generates beautiful GitHub statistics badges and repository insights.
## ✨ Features
- 🎯 Generate embeddable GitHub stats badges
- 📊 View detailed repository information
- 🌓 Dark/Light mode support
- 📱 Responsive design
- ⚡ Built with Edge Runtime
- 📋 Easy copy-paste embedding
## 🚀 Demo
Visit the live application at [this link](https://git-metrics-cloud-app.pages.dev).
## 🛠️ Tech Stack
- Next.js 14
- TypeScript
- Tailwind CSS
- Cloudflare Pages
- Edge Runtime
## 🏗️ Architecture
The application is built using Next.js App Router and deployed on Cloudflare Pages. It uses Edge Runtime for optimal performance and low latency. The backend API is powered by Cloudflare Workers.
## 🚦 Getting Started
### Prerequisites
- Node.js 18+
- npm or yarn
### Installation
1. Clone the repository
```bash
git clone https://github.com/yourusername/github-stats-cloud.git
```
2. Install dependencies
```bash
npm install
```
3. Create a `.env.local` file
```env
NEXT_PUBLIC_GITHUB_API_URL=https://github-stats-api.sousaguilherme89.workers.dev
```
4. Run the development server
```bash
npm run dev
```
## 🎨 Usage
### Generating a Badge
1. Visit the homepage
2. Enter a GitHub username
3. Select "Profile Badge" option
4. Copy either the Markdown or HTML code
5. Paste the code in your README or website
Example badge code:
[](https://github-stats-api.sousaguilherme89.workers.dev/username)
### Viewing Repository Stats
1. Visit the homepage
2. Enter a GitHub username
3. Select "Repository List" option
4. Browse through the user's repositories with detailed statistics
## 🔧 API Reference
The application uses the following API endpoints:
### Get User Statistics
```http
GET /:username
```
Returns user's GitHub statistics including total stars, forks, and repositories.
### Generate Badge
```http
GET /:username/badge
```
Generates a SVG badge with user's GitHub statistics.
### List Repositories
```http
GET /:username/repositories
```
Returns a list of user's repositories with detailed information.
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## 👏 Acknowledgments
- Next.js team for the amazing framework
- Cloudflare for the edge computing platform
- All contributors who help improve this project.