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

ScholarKit — Sun, 20 Sep 2026 07:12:14 +0000

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:

Intrusive Ads & Popups: Flooded with multi-layered display ads that shift the layout while typing.
Tab-Throttling Bugs: Timers and countdowns that lose sync and lag whenever you switch browser tabs.
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);

DEV Community: ScholarKit

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

1. The Stack: Zero-Server Static Architecture

2. Solving JavaScript Tab Throttling for Study Timers