Hi, I want to share a project I launched recently on Vercel called GitHub Stats Extended. It dynamically generates stats cards, e.g. about your GitHub contributions, your most used languages, etc: https://github-stats-extended.vercel.app/api?username=anuraghazrahttps://github-stats-extended.vercel.app/api/top-langs/?username=anuraghazra&langs_count=4
All cards are customizable with different layouts, themes and other options. There is also a step-by-step wizard which lets users create their own cards.
Stack
- React 19
- Tailwind CSS
- Vite
- pnpm
- postgreSQL
- GitHub API
- Vercel
Motivation
"GitHub Stats Extended" is based on the popular "GitHub Readme Stats" project which is so widely used that their deployment sometimes can not handle the large amount of requests they get. "GitHub Stats Extended" extends that project in many ways, most notably by using advanced Vercel features to handle the high number of requests and to minimize latency.
Used Vercel Features
The project is a pnpm monorepo consisting of a frontend served as static files and a backend running as serverless functions. The backend uses a postgreSQL database from Nile via Vercel's marketplace integration to track recurring requests and pre-compute data accordingly. It also uses Vercel's Incremental Static Regeneration, also known as Prerender Functions, to cache generated responses on server side.
Taking advantage of advanced Vercel features like Incremental Static Regeneration is usually done via frameworks like Next.js. However, in GitHub Stats Extended I didn't want to introduce a whole framework just for this. So I wrote a custom build command instead which directly interacts with Vercel's "Build Output API". It arranges static files and backend code into the expected locations, configures Incremental Static Regeneration, etc. As far as I know using the Build Output API directly is quite uncommon and I thought this might be an interesting approach to share here.
Acknowledgements
GitHub Stats Extended is based on "GitHub Readme Stats" and on "GitHub Trends" and it received contributions from various people on GitHub. Check out the GitHub repo for more details.
Live Site: https://github-stats-extended.vercel.app/frontend
GitHub Repo: https://github.com/stats-organization/github-stats-extended
I would love to get your feedback on how to use the various Vercel features optimally!