How I Built a High-Performance, Edge-Hosted Student Toolkit with Astro and Cloudflare

When students need to calculate their semester CGPA, estimate exam attendance cutoffs, or convert their GPA into a percentage for job applications, they usually end up on legacy calculator sites that suffer from three huge problems:

1. Intrusive Ads & Popups: Flooded with multi-layered display ads that shift the layout while typing.
2. Tab-Throttling Bugs: Timers and countdowns that lose sync and lag whenever you switch browser tabs.
3. Data Privacy Concerns: Passing grades and course names to server-side backends.

I wanted to fix this by building ScholarKit — an open-source, lightning-fast academic utility engine designed to run 100% client-side.

Here is a breakdown of the architecture, engineering decisions, and lessons learned.

1. The Stack: Zero-Server Static Architecture

I opted for Astro paired with React islands:

• Astro SSG: Compiles 24 pages into pure, minimal HTML and CSS. There is zero runtime JavaScript on editorial content pages.
• React Islands (client:load): Only the interactive calculation widgets hydrate on the client.
• TypeScript: Strict numeric types to guard against floating-point drift (e.g., 0.1 + 0.2 !== 0.3).
• Cloudflare Pages: Free, global edge hosting with sub-50ms latency worldwide.

2. Solving JavaScript Tab Throttling for Study Timers

Most online Pomodoro timers use a naive setInterval:

javascript
// ❌ FAILS when the tab is backgrounded
setInterval(() => {
  secondsLeft -= 1;
}, 1000);

Enter fullscreen mode Exit fullscreen mode