I Built 6 Niche Calculator Sites with Astro — Here's the Full Stack and Monetization Plan

`

Last year I decided to stop building things for clients and start building things for myself. The goal was simple: a portfolio of small, useful web tools that could generate passive AdSense revenue without needing a team, a marketing budget, or constant content production.

Six sites later, here's what I built, how I built it, and what the realistic path to monetization looks like. No hype — just the actual decisions I made and why.

The Concept: Niche Calculator Sites

The idea is boring on purpose. Financial calculators for specific audiences — people who have a specific, high-intent question and need an answer fast. These visitors aren't browsing. They're about to make a decision. That intent is what makes the niche valuable for AdSense (finance keywords carry some of the highest CPMs on the web).

The six sites I built, in order of priority:

Each site is standalone, targets a different audience, and can rank independently. The portfolio approach means one Google algorithm update doesn't kill the whole thing.

The Tech Stack

Web: Astro

I chose Astro for the web versions. For a calculator-heavy site, it's close to ideal:

• Static by default — pages ship as HTML. Core Web Vitals are easy to hit without optimization theater.
• Islands architecture — the calculators are interactive React components, everything else is zero-JS static HTML. I'm not shipping a full React bundle for a page that's 90% text.
• File-based routing — simple to maintain. Each calculator is its own .astro file.
• Built-in SEO primitives — straightforward to wire up canonical tags, Open Graph, structured data.

The calculators themselves are React components with client:load hydration. State stays local — no backend, no database, no API calls. Just math in the browser.

--- // src/pages/self-employment-tax.astro import Layout from '../layouts/Layout.astro'; import SECalculator from '../components/SECalculator.jsx'; --- <Layout title="Self-Employment Tax Calculator 2026"> <h1>Self-Employment Tax Calculator</h1> <SECalculator client:load /> </Layout>

That's it. No SSR complexity, no hydration mismatch headaches for a simple calculator.

Mobile: Expo + Capacitor

For Android, I wrapped the same Astro web app using Capacitor via Expo. The same calculator components run inside a WebView. I'm not maintaining two codebases — it's one codebase with a Capacitor layer on top.

The mobile strategy is secondary for now. The web sites are where SEO traffic lands. Mobile is a future AdMob surface once the web properties have established authority.

Hosting

Cloudflare Pages. Free tier, global CDN, deploys from GitHub on push. For static sites there's genuinely no reason to pay for hosting.

Calculator Architecture: Keeping It Simple

Each calculator follows the same pattern:

1. Controlled inputs — number fields, dropdowns, sliders where useful
2. Live computation — results recalculate on every input change, no submit button
3. Explanation section — below the calculator, a plain-English breakdown of the math
4. Related calculators — internal links to other tools on the same site

The explanation section is important for two reasons: it helps users understand the output, and it's the SEO content that tells Google what the page is about. I'm not writing 2,000-word blog posts. I'm writing 300–500 words of genuinely useful explanation tied directly to the calculator's output.

One thing I got wrong early: I initially put all calculators on a single page with anchor links. Bad idea — Google can't assign individual rankings to anchor fragments the same way it can to standalone URLs. Each calculator is now its own page.

The Math Layer

All calculation logic is pure JavaScript functions — no libraries, no dependencies. This keeps bundle size tiny and makes the math auditable. For something like a self-employment tax calculator:

function calculateSETax(netProfit) { const seBase = netProfit * 0.9235; // 92.35% of net profit const seTax = seBase * 0.153; // 15.3% SE tax rate const deduction = seTax * 0.5; // above-the-line deduction return { seTax, deduction, netAfterDeduction: netProfit - deduction }; }

No black boxes. Users who want to verify the math can inspect the source. That transparency is part of the value proposition — especially in finance niches where trust matters.

SEO Strategy: Topical Authority, Not Volume

I'm not trying to rank for "tax calculator" — that's a Intuit / H&R Block keyword. The strategy is topical depth within a narrow niche:

• self-employment tax calculator for freelancers
• COBRA vs ACA cost comparison calculator
• owner-operator trucking cost per mile calculator
• debt settlement calculator lump sum

These are lower volume but high intent, low competition, and high CPM. Someone searching for "COBRA vs ACA calculator" is in an active coverage decision. That's exactly the kind of visitor that generates AdSense revenue.

All six sites are currently in positions 60–90. The ranking phase requires backlinks — which I'm now actively building through HARO responses, resource page outreach, and guest posts on personal finance blogs using the calculator data as the hook.

Site Architecture for SEO

mainstreetnumbers.com/ ├── self-employment-tax-calculator/ ├── sba-loan-calculator/ ├── break-even-calculator/ ├── payroll-tax-calculator/ ├── quarterly-tax-calculator/ └── [topic]/resources/ ← supporting content pages

Flat structure, descriptive URLs, no dynamic query strings. Each calculator page targets one primary keyword and two or three secondary variants.

Monetization: AdSense in High-CPM Niches

Finance is the highest-CPM AdSense category. Insurance keywords in particular can hit $8–$25 RPM depending on the specific topic and traffic source. The ceiling across all six sites — if they reach their traffic targets — is around $13,000–$14,000/month in AdSense revenue.

That number sounds large until you understand the CPM math:

• A finance site doing $12 average RPM needs ~1.1M monthly pageviews to hit $13K
• Spread across 6 sites, that's ~185K pageviews per site per month
• At positions 5–10 for 15–20 calculator pages each, that's achievable — but it requires actually ranking

Which is why the backlink campaign matters more than any other single variable right now.

The sites are built. The calculators work. The SEO foundation is correct. The only missing variable is domain authority — and that's a backlink problem, not a product problem.

What I'd Do Differently

Start the backlink campaign earlier. I spent the first four months on product polish when the sites were already good enough to outreach with at month two. Time spent on pixel-perfect calculator UI is wasted if the page isn't ranking.

Build fewer, deeper sites. Six sites is manageable but I underestimated the content depth needed per site. Four sites with 25 calculators each would have been a stronger topical authority play than six sites with 12 calculators each.

Add an email capture earlier. Calculator sites are perfect for lead magnets — a "save your calculation" prompt could build an email list from day one. I didn't do this and it's a missed asset.

Current Status

All six sites are live. Positions are 60–90 across the board — typical for new sites without established domain authority. The plan for the next 90 days is entirely focused on backlink acquisition: HARO responses, resource page inclusions, and niche edit placements on existing finance articles.

If you're building something similar or have thoughts on the Astro + calculator architecture, I'd love to hear it in the comments. And if you're a personal finance blogger who covers small business, insurance, real estate, trucking, or debt relief — the calculator data is available if it's useful for your content.

`