Math Tools

An interactive math tools web app for students, inspired by Big Ideas Math. Built with React, Vite, TypeScript, and Tailwind CSS.

Live Demo →

Light	Dark

Tools

Algebra Tiles

Drag positive and negative unit, x, and x² tiles onto a board to model algebraic expressions and equations. Toggle equation mode to work with two sides, and remove zero pairs with one click.

Light	Dark

Balance Scale

Add weights to either side of a scale and watch it tilt in real time. Supports numeric weights (1, 2, 5, 10) and an unknown x. With x on the scale it shows the equation and solves it — x on either side or both, with fractions and negatives (x + 2 = 5 gives x = 3, 2x = 5 gives x = 5/2), and it says so when every x works or none does.

Light	Dark

Desmos Graphing Calculator

Full Desmos graphing calculator embedded directly — graph equations, explore functions, and adjust settings interactively.

Desmos Geometry Tool

Full Desmos geometry tool embedded — draw points, lines, circles, polygons, and geometric constructions.

Fraction Models

Visualize fractions as SVG pie circles or bar models. Adjust numerator and denominator with steppers, switch between views, and enable compare mode to see two fractions side by side with a <, =, or > result.

Light	Dark

Number Line

An interactive SVG number line with draggable markers. Add multiple markers, zoom in and out, and see each marker's value update live as you drag.

Light	Dark

Place Value

Enter any number up to 999,999 and decompose it into color-coded block stacks for each place (ones through hundred-thousands). Adjust individual columns with + / − buttons.

Light	Dark

Probability Tools

Simulate coin flips, dice rolls, and a configurable spinner. Run single trials or batch runs (×10, ×50, ×100). Results display in a live frequency bar chart with percentages.

Light	Dark

Scientific Calculator

Full scientific calculator with trig (sin, cos, tan), logarithms (log, ln), exponents, square roots, factorials, π, e, and memory (M+, MR, MC). Toggle between DEG and RAD mode.

Light	Dark

Unit Converter

Convert length, weight, temperature, volume, speed and area — metric and US customary — and see the value in every other unit of that kind at once. Conversion factors are the exact definitions (1 in = 0.0254 m, 1 lb = 453.592 g, 1 US gal = 3.78541 L).

Light	Dark

Dark Mode

Every tool supports a full dark mode. Click the sun/moon icon in the top-right corner of any page to toggle it. Your preference is saved to localStorage and automatically applied on return visits. On first load, the app respects your system's prefers-color-scheme setting.

Light	Dark

Tech Stack

Framework	React 19 + Vite 8
Language	TypeScript
Styling	Tailwind CSS 3
Routing	React Router 7 (hash-based)
Drag & Drop	@dnd-kit/core
Charts	Recharts
Math Engine	mathjs

Getting Started

Note: npm install must be run on a local drive — Google Drive's filesystem cannot handle npm's concurrent writes.

Option A — Run setup.bat (Windows)

Double-click setup.bat. It copies the project to C:\Users\<you>\projects\MathTools and runs npm install automatically.

Option B — Manual

# Clone or copy to a local directory
git clone https://github.com/TokkatheDj/MathTools.git
cd MathTools

npm install
npm run dev

Open http://localhost:5174.

Tests

npm test

37 tests: the Balance Scale's solver (x on either side, fractions, negatives, every-x and no-x cases) and the Scientific Calculator's engine (log is base 10, ln, √, and degree-mode trig over a whole expression, e.g. sin(30+60) = 1).

Build for production

npm run build

The dist/ folder can be opened as a static site directly from the filesystem (hash routing means no server is required).