Building a Privacy-First Health Calculator Platform with Next.js 15 and TypeScript

I built a health calculator platform used by 10,000+ people monthly across 150+ countries — and it stores exactly zero bytes of user data. Here's how.

The Motivation

Every health calculator I found online had the same problems: they required email signups to see results, stored health data on unknown servers, used unnamed formulas of questionable accuracy, and buried the actual answer under supplement ads.

I wanted to build the opposite: a platform where you get an accurate, clinician-reviewed result in 30 seconds with zero friction and zero data collection. That's HealthCalcPro.

The Tech Stack

Framework: Next.js 15 (App Router + Server Components)
Language: TypeScript (strict mode)
Styling: Tailwind CSS
Database: Supabase (PostgreSQL)
Deployment: Vercel (Edge Network)
CDN: Cloudflare
Performance: 100/100 PageSpeed target
Accessibility: WCAG 2.2 compliant

Architecture Decisions

1. Client-Side Only Computation

This was the foundational decision. Every health calculation runs entirely in the browser using TypeScript functions. No form data is ever POSTed to a server.

// Example: Mifflin-St Jeor BMR calculation
// Source: Mifflin MD et al. (1990) - Am J Clin Nutr

interface UserMetrics {
  weight: number;    // kg
  height: number;    // cm
  age: number;       // years
  sex: 'male' | 'female';
}

function calculateBMR(metrics: UserMetrics): number {
  const { weight, height, age, sex } = metrics;

  const base = (10 * weight) + (6.25 * height) - (5 * age);

  return sex === 'male' 
    ? base + 5 
    : base - 161;
}

function calculateTDEE(bmr: number, activityLevel: number): number {
  // Activity multipliers from ACSM guidelines
  // Sedentary: 1.2 | Light: 1.375 | Moderate: 1.55
  // Active: 1.725 | Very Active: 1.9
  return Math.round(bmr * activityLevel);
}

The benefit: I can truthfully tell users that nothing they enter ever leaves their device. Open the Network tab — you'll see zero POST requests during any calculation.

2. Named Formulas with Unit Tests

Every calculator maps directly to a published, peer-reviewed formula:

Each formula has unit tests that validate against published examples:

// Unit test: Mifflin-St Jeor validation
// Published example: 70kg male, 175cm, 30 years = BMR ~1,698

describe('calculateBMR', () => {
  it('matches published Mifflin-St Jeor example for males', () => {
    const result = calculateBMR({
      weight: 70,
      height: 175,
      age: 30,
      sex: 'male'
    });
    expect(result).toBeCloseTo(1698, 0);
  });

  it('matches published example for females', () => {
    const result = calculateBMR({
      weight: 60,
      height: 165,
      age: 25,
      sex: 'female'
    });
    expect(result).toBeCloseTo(1370, 0);
  });

  it('handles edge case: very low BMI', () => {
    const result = calculateBMR({
      weight: 40,
      height: 150,
      age: 18,
      sex: 'female'
    });
    expect(result).toBeGreaterThan(0);
    expect(result).toBeLessThan(2000);
  });
});

3. Mobile-First Responsive Design

63% of our traffic comes from mobile. Every calculator is designed mobile-first with Tailwind CSS:

// Responsive calculator card grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {calculators.map((calc) => (
    <CalculatorCard
      key={calc.slug}
      title={calc.title}
      description={calc.description}
      category={calc.category}
      href={`/calculators/${calc.slug}`}
    />
  ))}
</div>

Input forms use large touch targets, clear labels, and instant visual feedback — because fumbling with tiny number inputs on a phone while trying to check your calorie needs is a terrible experience.

4. Server Components for Performance

Next.js 15's App Router lets us split the application into server and client components strategically:

Server Components (no JS shipped to client):
├── Layout, navigation, footer
├── Calculator page shells
├── Health guide articles
├── SEO metadata generation
└── Static content rendering
Client Components (interactive):
├── Calculator input forms
├── Result displays with animations
├── Health Dashboard charts
├── Health Age Quiz flow
└── Unit conversion toggles

This means the initial page load is extremely fast — only the interactive calculator form ships JavaScript to the client. The surrounding content renders on the server.

5. Schema.org Structured Data

Every calculator page includes comprehensive JSON-LD markup for both traditional search engines and AI search engines:

{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "BMI Calculator",
  "description": "Free clinician-reviewed BMI calculator...",
  "applicationCategory": "HealthApplication",
  "operatingSystem": "Any (web browser)",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "author": {
    "@type": "Organization",
    "name": "HealthCalcPro",
    "url": "https://www.healthcalcpro.com"
  }
}

Plus FAQPage schema on every calculator for featured snippet targeting:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "How do I calculate my BMI?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "BMI is calculated by dividing weight (kg) by height (m) squared..."
    }
  }]
}

The Results

Six months after launch:

• 10,000+ monthly users across 150+ countries
• 500,000+ calculations performed
• 4.9/5 average rating from user feedback
• 100/100 PageSpeed on most calculator pages
• Zero data breaches (hard to breach data you don't collect)

Advanced Features

Beyond the core calculators:

Health Age Quiz — A 12-question assessment built as a multi-step React form that estimates biological age based on lifestyle factors. Uses a scoring algorithm weighted by published longevity research.

Personal Health Dashboard — Stores results in the browser's local state (never on our servers) and displays trend charts using Recharts. Users can track BMI, calories, body fat, and other metrics over time.

AI Workout Builder — Generates personalized exercise plans using AI based on fitness level, available equipment, and goals.

AI Store — 19+ premium products including Claude Code skills, AI agents, and automation tools that fund the ongoing development of the free calculators.

What I Learned

Privacy as a feature, not a constraint. Not collecting data isn't just ethical — it simplifies architecture, eliminates compliance headaches (GDPR, HIPAA), and builds trust that converts to word-of-mouth growth.

Named formulas build credibility. Linking to the actual PubMed paper behind each calculation transforms "some random online calculator" into "a tool I trust enough to recommend to my patients." Several healthcare professionals have told us exactly this.

Mobile-first is non-negotiable for health tools. People check their BMI or calorie needs on their phone, usually right after a doctor's appointment or during meal prep. If the experience is bad on mobile, they leave.

Plain-English matters more than precision. A result of "Your BMI is 24.8, which falls in the normal weight range according to WHO standards" is infinitely more useful than just "24.8" — even though the math is identical.

Try It

If you're a developer who's built health or fitness tools, I'd love to hear your approach. And if you're someone who's been frustrated by the state of online health calculators, give HealthCalcPro a try:

🌐 Website: healthcalcpro.com
🧬 Health Age Quiz: healthcalcpro.com/health-age-quiz
📊 Dashboard: healthcalcpro.com/dashboard
🏋️ AI Workout: healthcalcpro.com/workout
🛒 AI Store: healthcalcpro.com/ai-store/en
📚 Health Guides: healthcalcpro.com/guides
📂 GitHub: github.com/ismailGunaydn/HealthCalcPro
🗂 Wikidata: Q135988866
💼 LinkedIn: linkedin.com/company/healthcalcpro
✍️ Medium: Why We Built HealthCalcPro
📊 Crunchbase: crunchbase.com/organization/healthcalcpro

İsmail Günaydın — Founder of HealthCalcPro. Full-stack web engineer with 15+ years of experience. I build privacy-first web applications and operate a network of 16 digital brands. LinkedIn · Portfolio