Skip to contentMatera Digital

CheeseMath

Project Write-up

CheeseMath · Advanced calculator suite with two versions

An advanced calculator suite with two versions in one repo: an original React 18 app with AnimeJS, Jest unit tests, and Selenium E2E tests, and a modern rebuild in Next.js 16 with TypeScript, Bun, NextUI, Tailwind CSS, and Framer Motion. Features math tools, string manipulation, regex analyzer, and credit card validation.
Problem

Learning to write tests for my own code

I wanted to learn Jest by writing unit tests for my own code — not a tutorial example, but something I built from scratch. An advanced calculator suite gave me enough complexity to exercise real test cases: math operations, string manipulation, regex analysis, and credit card validation. The project grew into two versions: the original React 18 app and a modern Next.js 16 rebuild.

Solution

What I built

CheeseMath is an advanced calculator suite with two versions in one repo. The original is a React 18 app with AnimeJS animations, Jest unit tests, Selenium E2E tests, and coverage reports. The rebuild is a modern Next.js 16 app with TypeScript, Bun, NextUI, Tailwind CSS, and Framer Motion. Both versions include math tools, string manipulation, a regex analyzer, and credit card validation.

Original (React 18)

  • React 18 application with AnimeJS animations
  • Jest unit tests in /CheeseMath/tests/
  • Selenium E2E tests for full user flows
  • Coverage reports for test visibility
  • Math tools, string manipulation, regex analyzer, credit card validation

Rebuild (Next.js 16)

  • Next.js 16 with TypeScript and Bun runtime
  • NextUI components with Tailwind CSS
  • Framer Motion for animations
  • Same feature set: math tools, string manipulation, regex analyzer, credit card validation
  • Planned Vitest/Playwright tests (not yet implemented)
My Role

What I did

  • Solo developer — built both versions of the application
  • Wrote unit tests for my own code for the first time using Jest
  • Set up Selenium E2E tests and coverage reports for the original
  • Rebuilt the app in Next.js 16 with TypeScript and modern tooling
  • Implemented math tools, string manipulation, regex analyzer, and credit card validation
  • Integrated Framer Motion animations in the Next.js version
  • Published to GitHub Pages with MIT license
What's in the Repo

Real artifacts you can verify

  • GitHub repo: github.com/BradleyMatera/CheeseMath-Jest-Tests
  • Live demo: bradleymatera.github.io/CheeseMath-Jest-Tests
  • Commits: 40 commits on the main branch
  • Created: August 11, 2024
  • License: MIT
  • Two versions: /CheeseMath (legacy React 18) and /cheese-math-nextjs (modern Next.js 16)
  • Original tests: Jest unit tests in /CheeseMath/tests/ and Selenium E2E tests
  • Next.js tests: Vitest/Playwright planned but not yet implemented
  • Honest limitations: CheeseMath looks goofy, but the whole point was learning Jest. This was the first time I wrote unit tests for my own code. The Next.js version has planned testing features not yet implemented. The name is silly — it was a learning project that grew.
Tech Stack

Technologies used

React 18Next.js 16TypeScriptBunJestSeleniumNextUITailwind CSSFramer MotionAnimeJSGitHub Pages