Make your GitHub profile beautiful and attractive with README widgets. Free streak cards, skill set badges, and followers check—open source, self-hosted. Deploy on Netlify or Vercel.
- GitHub Streak Card – Current streak, longest streak, total contributions, top languages, and profile stats in one SVG card (with or without avatar).
- Skill Set Widget – Badge-style card for your tech stack (icons from Simple Icons).
- Visitor Counter Card – Badge that counts README/profile views; increments on each load.
- Themes – Preset themes and custom colors via query params. API-first: all cards are served as SVG; no auth required for public card URLs.
- Followers Check – See unfollowers, not mutuals, followers, following. Whitelist users, follow/unfollow from the app. Requires GitHub OAuth.
Live widgets from the deployed app. Markdown to copy, then the rendered image.
<img src="https://gitstrength.netlify.app/api/card?username=yourname" alt="GitHub Streak Card" width="100%" />
<img src="https://gitstrength.netlify.app/api/skill-set-card?skills=TypeScript,React,Next.js,Node.js,Tailwind%20CSS,Vue.js,Svelte" alt="Skill Set" width="100%" />
[](https://github.com/web2and3/gitstrength-github-improver)
| Page | Description |
|---|---|
| / | Home – Continue with GitHub to get started |
| /streak | Streak card generator – Enter username, customize theme, copy image URL for README |
| /skill-set | Skill set widget – Add skills, pick theme, copy image URL |
| /visitor-count | Visitor counter – Key + label, copy README badge URL |
| /followers-check | Followers tool – Unfollowers, not mutuals, follow/unfollow (requires sign-in) |
git clone https://github.com/web2and3/gitstrength-github-improver.git
cd gitstrength-github-improver
pnpm install
cp .env.example .env
# Edit .env: add GITHUB_ID, GITHUB_SECRET, NEXTAUTH_SECRET, NEXTAUTH_URL (see docs/SETUP.md)
pnpm devOpen http://localhost:3000.
| Doc | Description |
|---|---|
| Setup | Local development, environment variables |
| Deployment | Netlify & Vercel, production env |
| API reference | Card and data endpoints |
| Features | Overview of widgets and tools |
| Contributing | How to contribute |
| Recommended categories | Ideas for new widgets/tools |
Replace YOUR_DEPLOYMENT_URL with your deployed base URL (e.g. https://gitstrength.netlify.app).
<img src="YOUR_DEPLOYMENT_URL/api/card?username=YOUR_GITHUB_USERNAME" alt="GitHub Streak Card" width="100%" /><img src="YOUR_DEPLOYMENT_URL/api/card-with-avatar?username=YOUR_GITHUB_USERNAME" alt="GitHub Streak Card" width="100%" /><img src="YOUR_DEPLOYMENT_URL/api/card?username=YOUR_GITHUB_USERNAME&theme=%7B%22backgroundColor%22%3A%22%230f172a%22%2C%22textColor%22%3A%22%23e2e8f0%22%2C%22accentColor%22%3A%220ea5e9%22%7D" alt="GitHub Streak Card" width="100%" /><img src="YOUR_DEPLOYMENT_URL/api/skill-set-card?skills=TypeScript,React,Next.js,Node.js,Tailwind%20CSS" alt="Skill Set" width="100%" />Use a unique key (e.g. your username). The count increments each time the image is loaded.
[](YOUR_REPO_OR_PROFILE_URL)| Endpoint | Method | Description |
|---|---|---|
/api/card |
GET | Streak card SVG (no avatar) |
/api/card-with-avatar |
GET | Streak card SVG (with avatar) |
/api/streak |
GET | JSON streak + profile data |
/api/skill-set-card |
GET | Skill set SVG |
/api/visitor-count |
GET | Visitor counter badge SVG |
/api/github-contributions |
POST | Contribution/streak data (used internally) |
See docs/API.md for query parameters and response formats.
- Netlify: Connect repo, build command
pnpm build(ornpm run build), publish.next. Use @netlify/plugin-nextjs. SetNEXT_PUBLIC_APP_URLandNEXTAUTH_URLto your site URL. - Vercel: Connect repo; Next.js is detected. Set env vars in the dashboard.
Details: docs/DEPLOYMENT.md.
- Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS
- NextAuth.js (GitHub OAuth), Radix UI, Lucide icons
MIT © web2and3