Your GitHub README Is Your Developer Identity Card – Boost It with GitStrength 🚀
Your GitHub profile README isn’t just a markdown file — it’s your developer identity card.
A strong README with contribution stats, a clean tech stack display, and a bit of personality can:
- Impress recruiters
- Build credibility
- Show consistency
- Make your profile memorable
That’s why I built GitStrength — an open-source, API-first app that generates beautiful GitHub profile widgets.
Live Demo: https://gitstrength.netlify.app
Repository: https://github.com/web2and3/gitstrength-github-improver
What Is GitStrength?
GitStrength is a Next.js-based app that provides:
- README widget generators → SVG cards (no authentication required)
- GitHub account tools → Interactive features like unfollowers (GitHub OAuth required)
Everything is API-first.
Each widget is simply a GET endpoint that returns an SVG (or JSON when needed).
You just paste a URL into your README inside an <img> tag — done.
✨ Widgets You Can Add to Your README
🔥 1. GitHub Streak Card
A single clean card showing:
- Current streak
- Longest streak
- Total contributions
- Top languages
- Optional avatar
Add to your README:
<img src="https://gitstrength.netlify.app/api/card?username=YOUR_GITHUB_USERNAME" alt="GitHub Streak Card" width="100%" />
With avatar:
<img src="https://gitstrength.netlify.app/api/card-with-avatar?username=YOUR_GITHUB_USERNAME" alt="GitHub Streak Card" width="100%" />
You can also pass a custom theme (URL-encoded JSON) to fully customize colors.
💻 2. Skill Set Widget
Display your tech stack in a clean badge-style card.
Icons are powered by Simple Icons (TypeScript, React, Next.js, Tailwind CSS, and more).
Add to your README:
<img src="https://gitstrength.netlify.app/api/skill-set-card?skills=TypeScript,React,Next.js,Node.js,Tailwind%20CSS" alt="Skill Set" width="100%" />
Just modify the comma-separated skills list.
There’s also a built-in generator at:
/skill-set
with presets and theme options.
👀 3. Visitor Counter
Track how many times your README gets viewed.
You choose a unique key (username or repo name).
Add to your README:
[](YOUR_REPO_OR_PROFILE_URL)
Supports:
- Custom themes
- Custom label
- JSON format (
format=json)
🔄 4. Followers Check Tool (OAuth Required)
This is an interactive tool (not a README widget).
Sign in with GitHub and see:
- Who unfollowed you
- Not mutual followers
- Search followers/following
- Whitelist users
- Bulk follow / unfollow
Perfect for cleaning up your following list and maintaining a strong GitHub network.
🚀 Quick Start
Option A — Use the Hosted Version
- Go to https://gitstrength.netlify.app
- Choose a widget
- Configure it
- Copy the image URL into your README
No sign-in needed for README widgets.
Option B — Self-Host It
git clone https://github.com/web2and3/gitstrength-github-improver.git
cd gitstrength-github-improver
pnpm install
cp .env.example .env
Set environment variables:
- GITHUB_ID
- GITHUB_SECRET
- NEXTAUTH_SECRET
- NEXTAUTH_URL
Then:
pnpm dev
Open:
http://localhost:3000
For production, deploy to Netlify or Vercel.
Deployment docs are available in the /docs folder.
🛠 Tech Stack
- Next.js (App Router)
- React
- TypeScript
- Tailwind CSS
- NextAuth.js (GitHub OAuth)
- Radix UI
- Lucide Icons
All widgets return pure SVG (or JSON for visitor count).
They’re lightweight, cacheable, and embeddable anywhere.
📊 Feature Overview
| Feature | Auth Required | Output |
|---|---|---|
| Streak Card | No | SVG URL |
| Skill Set | No | SVG URL |
| Visitor Count | No | SVG URL |
| Followers Tool | Yes | Interactive Dashboard |
💡 Final Thoughts
As developers, we obsess over architecture and performance — but often ignore our GitHub presentation.
GitStrength makes it:
- Simple
- API-first
- Customizable
- Self-hostable
- Open source
If you want a stronger GitHub profile or an easy way to track unfollowers, give it a try.
Star the repo if you find it useful.
Contributions are welcome.
If you use it, drop your profile in the comments — I’d love to see it.
Thanks for reading 🙌
Top comments (0)