MindGames
A modern mental math training application designed to improve arithmetic skills through chain-based problem solving.
What is MindGames?
MindGames is a Next.js web application that generates linked math problem chains for mental arithmetic practice. Unlike traditional math drills where each problem is independent, MindGames creates connected problems where each answer becomes the starting value for the next calculation.
This chain-based approach encourages sequential mental calculation, improving both speed and accuracy while making practice more engaging than traditional worksheets.
Key Features
Chain-Based Problems
Problems flow naturally from one to the next, creating a continuous calculation experience:
24 → ÷4 → [6] → ×5 → [30] → +12 → [42] → -8 → [34] Each answer feeds into the next problem, encouraging sequential mental calculation without paper.
Operation Mix Control
Customize the balance of arithmetic operations with percentage-based presets:
| Preset | Add | Subtract | Multiply | Divide | Best For |
|---|---|---|---|---|---|
| Random | 25% | 25% | 25% | 25% | Balanced practice |
| Basic | 40% | 40% | 10% | 10% | Beginners |
| Advanced | 20% | 20% | 30% | 30% | Intermediate |
| Expert | 10% | 10% | 40% | 40% | Advanced users |
Kid and Adult Profiles
Two distinct modes optimized for different audiences:
- • Encouraging messages after each chain
- • Confetti celebration on completion
- • Fun, motivating language
- • Larger touch targets
- • Clean, professional interface
- • Focus on metrics and accuracy
- • No animations or celebrations
- • Compact information density
Responsive Design
- Desktop (1600px): Wide layout with persistent settings sidebar
- Tablet: Collapsible settings panel
- Mobile: Vertical layout with full equations (e.g.,
32 × 3 = ?) - Theme: Dark and light mode support
Technology Stack
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 14 | App Router, server components |
| Language | TypeScript | Type safety, better DX |
| Styling | Tailwind CSS | Utility-first styling |
| State | React Context + useReducer | Global state management |
| Icons | Lucide React | Consistent iconography |
| Animations | canvas-confetti | Kid mode celebrations |
| Testing | Jest + RTL | Unit and integration tests |
Quick Start
# Clone the repository git clone https://github.com/zeroleaf/MindGames.git cd MindGames # Install dependencies npm install # Start development server npm run dev # Open http://localhost:3000