A fun, gamified learning app for 10–11 year olds — spelling games, maths games, and a progress garden that grows as you learn. No scores, no timers, no pressure — just encouragement and delight.
Built with love by a parent who wanted something better than flashcards. 💚
- 🔍 Word Search — find words hidden in a grid
- 🃏 Memory Match — classic card-matching with spelling words
- 🔀 Word Scramble — unscramble the letters
- ✏️ Missing Letters — fill in the blanks
- 🔤 Word Builder — hear a word, build it letter by letter
- 🎯 Spell Catcher — catch the correct spelling as it flies by
- 🌋 Word Volcano — words erupt, match them before they vanish
- 🟩 Wordal — Wordle-style guessing with your spelling words
- 🔢 Times Table Explorer — interactive multiplication grid with explore, practice, and pattern modes
- 🫧 Number Bubbles — pop the right answer
- ⛰️ Math Mountain — climb to the top by solving problems
- 🧩 Puzzle Pieces — reveal a picture by answering questions
- 🐸 Number River — hop across lily pads to the right answer
- 🧭 Math Maze — navigate through rooms by solving equations
- 🌊 Number Cascade — answers cascade down, catch the right one
- 🃏 Spot Match — find the matching icon between two cards (unlockable)
- 🌻 My Garden — a garden that grows as you learn (flowers, trees, butterflies!)
- 🏆 Achievements — 10 unlockable badges (First Sprout, Word Wizard, Maths Maestro, and more)
- 🎮 Game unlock system — fun games are unlocked by earning correct answers across all games
- ⭐ Streak tracking — encourages daily practice
- 💬 Feedback — students can submit feedback from the app
- 🔐 Admin area — manage spellings, times tables, difficulties, settings, view progress, read feedback
# Clone and install
git clone <your-repo-url> spellbound
cd spellbound
npm install
# Build and run
npm run build
npm startThen open http://localhost:3000 in your browser. That's it!
On first launch, SpellBound automatically:
- Creates the SQLite database at
data/spellbound.db - Sets up all tables
- Seeds a default profile called "Learner"
- Sets the admin password to
spellbound123
No configuration needed — it just works.
Navigate to the admin area via the sidebar or go to /admin.
- Default password:
spellbound123 - To change it: Log in → Settings → Update password
- Sessions last 24 hours and are stored in memory
From the admin dashboard you can:
- 📝 Manage spelling lists (create, edit, archive, activate)
- 🔢 Configure which times tables and difficulty levels are available
- 📊 View learning progress and statistics
- 💬 Read student feedback
- ⚙️ App settings (change password, reset progress)
⚠️ Please change the default password on first use!
Fun games (like Spot Match) are unlocked by playing spelling and maths games. Every correct answer counts toward unlocking milestones. For example, Spot Match unlocks after 20 correct answers across any game.
This gives kids a motivating reason to practise — the more they learn, the more games they unlock! The unlock status is visible on the Games hub page, where locked games show their requirements.
There are two ways to add spelling words:
- Log in to the admin area
- Go to Manage Spellings
- Create a new list with a name (e.g., "Week 12")
- Add words (with optional hints)
- Activate the list to make it available in games
- From the spelling hub, click "Add My Words"
- Or go directly to
/entry - Type a list name and add words (minimum 3)
- The list is automatically created and activated
| Technology | Purpose |
|---|---|
| Next.js 16 (App Router) | Full-stack React framework |
| TypeScript | Type safety |
| Tailwind CSS v4 | Utility-first styling |
| Framer Motion | Animations and transitions |
| Phosphor Icons | Beautiful duotone icon library |
| SQLite via better-sqlite3 | Local database |
| bcryptjs | Password hashing |
spellbound/
├── data/ # SQLite database (auto-created)
├── public/ # Static assets
├── src/
│ ├── app/
│ │ ├── page.tsx # Home page
│ │ ├── layout.tsx # Root layout with sidebar
│ │ ├── spelling/ # Spelling hub + 8 game pages
│ │ ├── maths/ # Maths hub + 7 game pages
│ │ ├── games/ # Fun games hub + Spot Match
│ │ ├── progress/ # My Garden progress page
│ │ ├── entry/ # Child word entry page
│ │ ├── feedback/ # Student feedback page
│ │ ├── dev/ # Dev tools + icon library
│ │ ├── admin/ # Admin dashboard
│ │ │ ├── spellings/ # Manage spelling lists
│ │ │ ├── tables/ # Configure times tables
│ │ │ ├── progress/ # View learning progress
│ │ │ ├── feedback/ # Read student feedback
│ │ │ └── settings/ # App settings (password, reset)
│ │ └── api/ # API routes
│ │ ├── achievements/
│ │ ├── admin/ # login, logout
│ │ ├── entry/
│ │ ├── feedback/ # Student feedback
│ │ ├── maths/tables/# Times table config
│ │ ├── progress/
│ │ ├── settings/
│ │ ├── spellings/ # CRUD + activate
│ │ └── unlocks/ # Game unlock status
│ ├── components/
│ │ ├── ui/ # Reusable UI components
│ │ ├── svg/ # Custom flower, bee & rainbow SVGs
│ │ └── layout/ # Sidebar navigation
│ └── lib/
│ ├── db.ts # Database access layer
│ ├── schema.sql # Database schema (7 tables)
│ ├── achievements.ts # Achievement definitions
│ ├── auth.ts # Admin authentication
│ ├── maths-helpers.ts # Question generation + utilities
│ ├── sounds.ts # Synthesised sound effects + speech
│ └── unlocks.ts # Fun game unlock definitions
├── Dockerfile # Multi-stage Docker build
├── docker-compose.yml # Container orchestration
├── deploy.sh # Home server deploy script
├── package.json
└── tsconfig.json
# Run in development mode (with hot reload)
npm run dev
# Run on a custom port
PORT=3456 npm run dev
# Lint the codebase
npm run lint
# Run tests (211 tests)
npm test
# Build for production
npm run build
# Start the production server
npm start- Location:
data/spellbound.db(relative to project root) - Auto-created on first run
- Uses WAL journal mode for performance
- Foreign keys are enabled
SpellBound works without any environment variables. Optional:
| Variable | Default | Description |
|---|---|---|
NODE_ENV |
development |
Set to production for secure cookies |
PORT |
3000 |
Server port (Next.js default) |
SpellBound is designed to run on a home server — a Raspberry Pi, an old laptop, a NAS, or any machine on your local network.
# Build once
npm run build
# Run it
npm start
# Or with a custom port
PORT=8080 npm startFor auto-start on boot, use your OS's service manager (systemd, launchd, etc.) or a process manager like pm2:
npm install -g pm2
pm2 start npm --name spellbound -- start
pm2 save
pm2 startup💡 Tip: Access from other devices on your network at
http://<server-ip>:3000
SpellBound includes a production-ready Docker setup for easy deployment.
# Build and run locally with Docker
docker compose up --build
# Or deploy on your home server
./deploy.shHow it works:
- Multi-stage Dockerfile produces a lean standalone Next.js image
- GitHub Actions CI pipeline (on push to
main) runs tests, builds the Docker image, and pushes to GitHub Container Registry (GHCR) deploy.shpulls the latest image and restarts the container- SQLite database is persisted via a Docker volume (
spellbound-data) - Puzzle images are bind-mounted from the host for easy updates
- API Reference — Complete REST API documentation
- AGENTS.md — Guide for AI coding agents working on this codebase
MIT — do whatever you like with it. If it helps your kids learn, that makes me happy. 🌻