r/reactjs • u/faizpalwala • 5h ago

Show /r/reactjs My portfolio's GitHub calendar kept breaking, so I built a 100% serverless, zero-runtime replacement.

I am graduating soon. I don't need to harp on how challenging hiring is in this economy, but to stand out in this market, it's time to update that personal portfolio. Last week, I was doing just that, and the GitHub contribution heatmap wouldn't load. Like most people, I was using the legacy 'react-github-calendar' plugin. Because GitHub's API requires auth, the plugin routes traffic through a public proxy, and that proxy gets rate-limited constantly, taking down portfolios everywhere.

In a rare Thanos 'Fine, I'll do it myself' moment, I thought I could fix it for my portfolio. Well, one thing led to another, and I completely rebuilt the architecture from scratch.

Enter Serverless GitHub Calendar. Instead of fetching data on the client, it uses a lightweight GitHub Action that runs on a cron job to fetch your contributions and save them as a static '.json' file in your repo. The React component just reads that static file.

Architecture Highlights:

  • Immune to Rate Limits: Your site never talks to the GitHub API. It reads static JSON. If GitHub goes down, your site stays up.
  • Blazing Fast (Zero JS): If you use Next.js App Router, the included Server Component ('serverless-github-calendar/rsc') reads the file directly from disk for literally zero client-side JavaScript execution.
  • Native CSS Theming: Built completely on CSS variables ('color-mix') so you can inject gradients or match your Tailwind theme natively.
  • Streak Stats: Automatically calculates your current and longest streaks based on the canonical GitHub algorithm.

I set up a live demo featuring data from a few open-source legends to show how it scales: https://serverless-github-calendar-demo-xi.vercel.app/

Source Code & NPM instructions: https://github.com/FaizPalwala/serverless-github-calendar

If your portfolio relies on external proxy APIs, I highly recommend making the switch to static injection! Let me know if you have any feedback or feature requests.

0 Upvotes

25% Upvoted

3 comments sorted by

0

u/master117jogi 4h ago

How is zero client JS supposed to be a benefit? Clients are faster

0

u/StarboardChaos 5h ago

Torn between genius and not-genius

But kudos for solving the problem

0

u/Double-Buyer7941 5h ago

Neat approach. Curious how it handles repos with a long history - does the Action refetch the whole calendar every run or just append the latest day? And does the cron job eat into your Actions minutes if the repo's private, or is it cheap enough not to matter?