Plusik Math Trainer

A static bilingual math trainer for Ukrainian-speaking children joining Spanish first grade.

Plusik helps a child practice the exact worksheet-style math skills used in class while seeing Ukrainian and Spanish labels side by side. It is built as a touch-first static app: no backend, no accounts, no analytics, and no AI calls.

Screenshots

Highlights

• Ukrainian-first and Spanish-underneath UI, with UK-only and ES-only modes.
• 13 practice areas: 12 worksheet skill modules plus bilingual word problems.
• iPad and iPhone friendly: large tap targets, on-screen number pad, no keyboard required.
• Local-only persistence with localStorage.
• Static Vite SPA deployable to AWS Amplify Hosting.
• PR CI on Linux with production build and smoke test.

Tech Stack

• Vite + React 18 + TypeScript
• Tailwind CSS
• lucide-react
• Web Audio API for tiny generated feedback sounds
• localStorage for progress

Develop

npm install
npm run dev

Or as a one-liner:

npm install && npm run dev

Open the Vite URL, usually http://localhost:5173.

Build

npm run build

The static site is generated in dist/.

Test

npm run build
npm test

The test command starts vite preview from the built dist/ folder and checks that the app serves both / and a module deep route.

CI

Pull requests to main run GitHub Actions on Linux (ubuntu-latest):

• npm ci
• npm run build
• npm test

What Is Included

• Number recognition, hundred chart, place value, addition/subtraction with and without carrying/borrowing.
• Decomposition, euro coin counting, exact payment by tapping coins, balance comparisons, fruit equations, and word problems.
• Local-only persistence under the math-trainer/v1 localStorage key.
• No backend, accounts, analytics, database, Firebase, or Amplify backend resources.

Deploy To AWS Amplify Hosting

This is Amplify Hosting only. Do not run amplify init; there is no Amplify backend.

1. Push the app to a new GitHub repo:

git init
git add .
git commit -m "init"
git branch -M main
git remote add origin git@github.com:YOUR_USER/YOUR_REPO.git
git push -u origin main

2. In the AWS Console, open Amplify → Create new app → Host web app.

3. Choose GitHub, authorize AWS Amplify, then pick the repo and the main branch.

4. Amplify uses the root amplify.yml build spec and builds the Vite app with npm ci and npm run build. Accept the defaults and click Save and deploy.

5. After about 2 minutes, Amplify gives a URL like:

https://main.d1a2b3c4.amplifyapp.com

Send that link to the iPad.

6. Add the SPA rewrite rule once, or refreshing a deep route like /module/addition-no-carry can return 404. In Amplify, go to App settings → Rewrites and redirects and add:

Source address	Target address	Type
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>	/index.html	200 (Rewrite)

7. Optional: connect a custom domain in App settings → Domain management.

Subsequent deploys are automatic on every push to main.

Add A Word Problem

Edit src/data/wordProblems.ts and add one object to the wordProblems array:

{
  id: "unique-short-id",
  uk: "Український текст задачі з тими самими числами.",
  es: "Texto español del problema con los mismos números.",
  operation: "add", // or "subtract"
  top: 24,
  bottom: 13,
  answer: 37,
}

Keep Spanish proper nouns, like María or Juan, unchanged.