DEV Community

Ritanjit Das
Ritanjit Das

Posted on

How I Built a Blazing-Fast, Privacy-First MPA with Astro, React, and Tailwind v4

#productivity #opensource #astro #ui

When you search for "GPA Calculator" online, you're usually met with websites that look like they were abandoned in 2005. They are bloated with third-party tracking scripts, pop-up ads, cookie consent forms, and slow server-side calculations.

I wanted to build a modern, elegant, and privacy-first alternative called Edu GPA (https://edugpacalculator.com) that scores 100/100 on Lighthouse.

Here is a breakdown of how I designed and engineered it.

The Architecture: Static Shell with React Islands

To get a perfect Lighthouse score, I chose Astro as the core framework.

Astro uses an "Islands Architecture," which means it compiles the entire website to static HTML and only hydrates interactive components.

  • Static Pages: The home layout, FAQ, and Guide pages are served as 100% static HTML. No JavaScript is shipped for these.
  • The Calculator Island: The calculator grid is a dynamic React component. 
// src/pages/index.astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Calculator from '../components/react/calculator/Calculator';
---
<BaseLayout title="Free GPA Calculator">
  <Calculator client:load /> 
</BaseLayout>
Enter fullscreen mode Exit fullscreen mode

Using client:load ensures that the React component is hydrated instantly when the page loads, while keeping the rest of the page static.

Privacy-First: 100% Client-Side Calculations

Most calculators force you to create an account or send your grade inputs to a backend database.

Edu GPA stores and calculates everything client-side.

  • Grades are calculated dynamically in state.
  • PDF generation uses client-side libraries.
  • No cookies are dropped, and no user data ever leaves the browser.

Home Page UI

Convert Page UI

This simplified our hosting infrastructure. The entire app is deployed on Cloudflare Workers.

Styling with Tailwind CSS v4

This project was styled using the new Tailwind CSS v4. The compilation speeds are incredibly fast, and the v4 theme configuration integrates beautifully with CSS variables:

@theme {
  --color-primary: #cc785c;
  --color-canvas: #faf9f5;
  --color-ink: #141413;
  --font-serif: Copernicus, Tiempos Headline, Georgia, serif;
}
Enter fullscreen mode Exit fullscreen mode

The UX Details: Warm Canvas Theme

Instead of using standard "developer blue" (#3b82f6) and slate, I designed the app around a warm cream canvas and slab-serif headers. This editorial approach makes grade tracking feel less like an administrative chore and more like a premium workspace.

Check out the live app at edugpacalculator.com and tell me what you think of the performance!

Top comments (0)