Portfolio Dashboard: How to fetch API data (GitHub/LeetCode) in a static Vite app without rate limits?

[Exoriy]

Hey guys! I'm currently in my 2nd semester of CS and building my first real portfolio website on the side to practice web dev. I'm using a static setup with Vite and Vanilla JS.

I want to pull my GitHub activity and maybe some LeetCode stats into a small dashboard section. But since I don't have a backend (just static HTML/JS), how do I handle API rate limits? I don't want the API to block requests if someone refreshes the page a few times.

Also, how do I hide my API keys if I need them for the requests? Since we mostly do Java at uni, I'm a bit lost on the best practice for static frontend apps here. Thanks!

[Ph4ntomic]

Hey! I ran into the exact same issue when building my Vite portfolio. Coming from our uni Java projects, the whole static frontend thing takes a minute to get used to.

Since you don't have a backend, you basically have two clean ways to solve this, depending on what the API requires:

1. The pure frontend way: localStorage caching
If the API is public and doesn't need a secret token, just cache the data right in the browser!

• How to do it: Fetch the data once, then use localStorage.setItem() to save the JSON and a timestamp. On the next page reload, check if the timestamp is older than, say, an hour. If not, just load the saved JSON.
• Why it's great: It’s super fast, costs nothing, and completely saves you from hitting rate limits for returning visitors.

2. The modern approach: Serverless Functions
If the API (like GitHub) needs a Personal Access Token to increase your rate limits, you cannot put that token in your Vanilla JS code. Anyone could steal it via the browser console.

• How to do it: If you host your portfolio on Vercel or Netlify (which are free and awesome for static sites), you can write a tiny "Serverless Function" in JavaScript. Your frontend calls your function, and the function securely holds your hidden API key, talks to GitHub, and sends the data back to your frontend.
• Why it's great: Your keys stay 100% hidden, and you avoid those annoying CORS errors you often get in the browser.

My tip: Start with localStorage for the simple public data. But for the GitHub token, definitely look into Vercel/Netlify functions—it's surprisingly easy to set up and looks great on a student CV.

Good luck with the project! :)