A multiplication-tables practice app for kids, built with React + Vite. Features a 10-second timer, pedagogical tricks, score tracking, and confetti for high scores.
- Practice tables ×2 through ×10
- Sequential or random question order
- 10-second countdown timer with color feedback
- Pedagogical tips (tricks) per table and factor
- Full table modal (pausable timer)
- LocalStorage record tracking per table
- Review section showing which answers were wrong
- Confetti animation for scores ≥ 8/10
- Responsive — works on mobile (375px) and desktop
- React 18 — UI with
useReducerfor game state - Vite 5 — build tool and dev server
- Vanilla CSS — single
src/index.css, neo-brutalist design - LocalStorage — persists best scores, no backend required
- Vercel — static deploy target
npm install
npm run devOpen http://localhost:5173.
| Command | Description |
|---|---|
npm run dev |
Start development server with HMR |
npm run build |
Build for production → dist/ |
npm run preview |
Serve the production build locally |
npm i -g vercel
vercelFollow the prompts. Vercel auto-detects Vite; no extra configuration needed.
- Push the repo to GitHub.
- Go to vercel.com → New Project → import the repo.
- Vercel detects Vite automatically. Click Deploy.
The vercel.json at the root sets up SPA rewrites so all routes serve index.html.
src/
App.jsx # game state (useReducer), timer, navigation
main.jsx # React entry point
index.css # all styles
data/
tablas.js # TRUCOS object, obtenerTruco, generarPreguntas
components/
ScreenInicio.jsx # table selection + mode toggle
ScreenPractica.jsx # question card, timer bar, answer input
ScreenResultados.jsx # score, review, confetti
ModalTabla.jsx # full table overlay (pauses timer)
docs/
architecture.md # stack decisions and component structure
screens.md # screen specs and HTML class reference
logic.md # state shape, timer logic, localStorage
design.md # CSS variables, typography, responsive rules
data.md # TRUCOS data and trick pedagogy notes
MIT