DEV Community

Ahnhyeongkyu
Ahnhyeongkyu

Posted on

I Built a Free Statistics Calculator with Next.js — Here's What I Learned

#webdev #javascript #nextjs #opensource

As a developer who also does research, I got tired of switching between SPSS, R, and Excel just to run basic statistical tests. So I built StatMate — a free, browser-based statistics calculator that handles 20 different tests and outputs APA-formatted results.

Here's the story of how I built it and what I learned along the way.

The Problem

Every semester, thousands of students and researchers face the same struggle:

  • SPSS costs $100+/month
  • R has a steep learning curve
  • Excel can't format APA tables automatically
  • Online calculators only handle one test at a time

I wanted to build something that just works — paste your data, pick a test, get properly formatted results.

The Stack

  • Next.js 16 with Turbopack for fast builds
  • TypeScript for type-safe statistics calculations
  • Tailwind CSS v4 for styling
  • next-intl for trilingual support (English, Korean, Japanese)
  • All statistics computed client-side in the browser — no data leaves your machine

What It Does

StatMate currently supports 20 statistical tests:

  • Parametric: t-tests (independent, paired, one-sample), ANOVA (one-way, two-way, repeated measures), simple & multiple regression, logistic regression
  • Non-parametric: Mann-Whitney U, Wilcoxon, Kruskal-Wallis, Friedman
  • Other: Chi-square, Fisher's exact, McNemar, correlation, descriptive stats, sample size/power, Cronbach's alpha, factor analysis (EFA)

Every test includes:

  • APA 7th edition formatted results — copy-paste ready
  • Assumption checks (normality, homogeneity of variance)
  • Interactive charts (box plots, scatter plots, residual plots)
  • PDF export (free) and Word/DOCX export (Pro)
  • Example data so users can try before entering their own

Technical Challenges

1. Implementing Statistics from Scratch

No external stats library — I wrote all 20 statistical modules in TypeScript. The trickiest parts:

  • Matrix operations for factor analysis (eigenvalue decomposition, varimax rotation)
  • Probability distributions (t, F, chi-square) using series approximations
  • Post-hoc tests (Bonferroni, Tukey HSD, Dunn's test)

I validated every calculator against R 4.3 to ensure accuracy.

2. APA Formatting

APA 7th edition has very specific formatting rules. Each test has its own reporting format:

t(58) = 2.45, p = .017, d = 0.63
F(2, 87) = 4.12, p = .019, partial eta-squared = .086
Enter fullscreen mode Exit fullscreen mode

Building a system that automatically generates these strings with correct rounding, italics handling, and effect size interpretation was more work than expected.

3. i18n for Statistics

Translating a statistics app into 3 languages isn't just about UI text. Statistical terminology, APA conventions, and number formatting all vary by locale. next-intl handled most of it, but edge cases required custom logic.

What I Learned

  1. Client-side computation is underrated. Users trust a tool more when their data never leaves the browser.
  2. APA formatting is a product feature, not a nice-to-have. It's the #1 thing users mention.
  3. Trilingual from day one opened up markets I wouldn't have reached otherwise.
  4. Free tools need a Pro tier to be sustainable. Ours includes AI-powered result interpretation and DOCX export.

Try It Out

StatMate is live at statmate.org. Everything is free — 20 calculators, PDF export, assumption checks, and charts.

If you're building tools for researchers or students, I'd love to hear about your experience. Drop a comment or check out the project!

Have questions about implementing statistics in JavaScript, APA formatting, or building multilingual Next.js apps? Happy to discuss in the comments.

Top comments (0)