Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/junhey/kid-smart-learning


https://github.com/junhey/kid-smart-learning

Last synced: about 7 hours ago
JSON representation

Awesome Lists containing this project

README 

          
# Kid Smart Learning ๐ŸŽ“



An interactive, gamified learning website for children ages 5-7, featuring fun English and Math games with a star-based reward system.



**Live Demo:** [kid-smart-learning.vercel.app](https://kid-smart-learning-em5eci9lj-junheys-projects.vercel.app) *(deploy to get your URL)*



---



# ๅ„ฟ็ซฅๆ™บๆ…งๅญฆไน  ๐ŸŽ“



ไธ€ๆฌพไธ“ไธบ 5-7 ๅฒๅ„ฟ็ซฅ่ฎพ่ฎก็š„ไบ’ๅŠจๆธธๆˆๅŒ–ๅญฆไน ็ฝ‘็ซ™๏ผŒๅŒ…ๅซ่‹ฑ่ฏญๅ’Œๆ•ฐๅญฆ่ถฃๅ‘ณๆธธๆˆ๏ผŒไปฅๅŠๆ˜Ÿๆ˜Ÿๅฅ–ๅŠฑ็ณป็ปŸใ€‚



---



## Features / ๅŠŸ่ƒฝ็‰น่‰ฒ



- ๐Ÿ”ค **5 English Games** โ€” Alphabet Balloons, Word Match, Phonics Fun, Listen & Choose, Sentence Builder

- ๐Ÿ”ข **5 Math Games** โ€” Count It, Adding Fun, Shape Match, Big or Small, Math Shooter

- โญ **Reward System** โ€” Stars, Levels (1-10), Achievements stored in localStorage

- ๐ŸŽต **Audio Support** โ€” Web Speech API for pronunciation

- ๐Ÿ“ฑ **Responsive** โ€” Optimized for iPad/tablet/desktop

- ๐ŸŽจ **Animations** โ€” Framer Motion throughout



---



## Tech Stack



| Technology | Version |

|---|---|

| Next.js | 14 (App Router) |

| React | 18 |

| TypeScript | 5 |

| TailwindCSS | 3 |

| Framer Motion | 11 |



---



## Quickstart / ๅฟซ้€Ÿๅผ€ๅง‹



```bash

# Clone the repository

git clone https://github.com/yourusername/kid-smart-learning.git

cd kid-smart-learning



# Install dependencies

npm install



# Start development server

npm run dev



# Open http://localhost:3000

```



### Build for production / ็”Ÿไบงๆž„ๅปบ



```bash

npm run build

npm start

```



---



## Games Overview / ๆธธๆˆไป‹็ป



### ๐Ÿ“š English Games



| Game | Description |

|---|---|

| ๐ŸŽˆ **Alphabet Balloons** | Pop the balloon with the correct letter as balloons float up |

| ๐Ÿถ **Word Match** | See an emoji picture, pick the matching word from 4 choices |

| ๐Ÿ”ค **Phonics Fun** | See a letter, find which picture starts with that sound |

| ๐Ÿ‘‚ **Listen & Choose** | Hear a word spoken aloud, pick the matching emoji picture |

| โœ๏ธ **Sentence Builder** | Click word tiles to arrange them into a correct sentence |



### ๐Ÿ”ข Math Games



| Game | Description |

|---|---|

| ๐Ÿ”ข **Count It!** | Count the emoji objects and select the correct number (1-15) |

| โž• **Adding Fun** | Visual addition and subtraction with emoji groups |

| ๐Ÿ”ท **Shape Match** | Match shape names to CSS/SVG drawn shapes |

| โš–๏ธ **Big or Small?** | Compare two numbers and choose > or < |

| ๐ŸŽฏ **Math Shooter** | Shoot the floating bubble with the correct answer |



---



## Reward System / ๅฅ–ๅŠฑ็ณป็ปŸ



```

Stars โญ  โ†’  earned per correct answer

Level ๐Ÿ†  โ†’  1-10 based on stars (every 10 stars = 1 level)

```



### Achievements / ๆˆๅฐฑ



| Achievement | Unlock Condition |

|---|---|

| ๐ŸŒŸ First Star | Get your first correct answer |

| ๐Ÿ’ฏ Perfect Round | Complete a game with all correct |

| ๐Ÿ”ฅ Streak 10 | Answer 10 in a row correctly |



---



## Project Structure / ้กน็›ฎ็ป“ๆž„



```

kid-smart-learning/

โ”œโ”€โ”€ app/

โ”‚   โ”œโ”€โ”€ layout.tsx          # Root layout, fonts

โ”‚   โ”œโ”€โ”€ page.tsx            # Home page

โ”‚   โ”œโ”€โ”€ globals.css         # Global styles & animations

โ”‚   โ”œโ”€โ”€ english/page.tsx    # English hub (5 games)

โ”‚   โ””โ”€โ”€ math/page.tsx       # Math hub (5 games)

โ”œโ”€โ”€ components/

โ”‚   โ”œโ”€โ”€ ui/

โ”‚   โ”‚   โ”œโ”€โ”€ StarReward.tsx  # Animated star burst

โ”‚   โ”‚   โ”œโ”€โ”€ ProgressBar.tsx # Colorful progress bar

โ”‚   โ”‚   โ””โ”€โ”€ SoundButton.tsx # Button with audio click

โ”‚   โ”œโ”€โ”€ games/

โ”‚   โ”‚   โ”œโ”€โ”€ english/        # 5 English game components

โ”‚   โ”‚   โ””โ”€โ”€ math/           # 5 Math game components

โ”‚   โ””โ”€โ”€ layout/

โ”‚       โ”œโ”€โ”€ Header.tsx      # Stars + level display

โ”‚       โ”œโ”€โ”€ Navigation.tsx  # Back/Home nav

โ”‚       โ””โ”€โ”€ RewardPanel.tsx # Full reward panel

โ”œโ”€โ”€ data/

โ”‚   โ”œโ”€โ”€ english/

โ”‚   โ”‚   โ”œโ”€โ”€ alphabet.json   # 26 letters with words

โ”‚   โ”‚   โ”œโ”€โ”€ words.json      # 100+ words (5 categories)

โ”‚   โ”‚   โ””โ”€โ”€ sentences.json  # 30 sentence templates

โ”‚   โ””โ”€โ”€ math/

โ”‚       โ”œโ”€โ”€ numbers.json    # 1-20 in English & Chinese

โ”‚       โ””โ”€โ”€ shapes.json     # 8 shapes with properties

โ”œโ”€โ”€ hooks/

โ”‚   โ”œโ”€โ”€ useSound.ts         # Web Speech API hook

โ”‚   โ”œโ”€โ”€ useReward.ts        # Stars/levels/achievements

โ”‚   โ””โ”€โ”€ useProgress.ts      # Game progress tracking

โ””โ”€โ”€ lib/

    โ””โ”€โ”€ gameUtils.ts        # Shuffle, random, scoring utils

```



---



## Deployment / ้ƒจ็ฝฒ



### Vercel (Recommended)



#### ๐Ÿš€ ้ฆ–ๆฌก้ƒจ็ฝฒ



1. Push to GitHub

2. Import project at [vercel.com/new](https://vercel.com/new)

3. Deploy automatically!



#### โš™๏ธ ้…็ฝฎ่‡ชๅŠจ้ƒจ็ฝฒ๏ผˆGitHub Actions๏ผ‰



**้—ฎ้ข˜**: ๅฆ‚ๆžœไฝ ็œ‹ๅˆฐ `Error: Input required and not supplied: vercel-token`



**่งฃๅ†ณๆ–นๆกˆ**: ้œ€่ฆ้…็ฝฎ GitHub Secrets



1. **่ฟ่กŒ้…็ฝฎๅŠฉๆ‰‹**๏ผˆๆŽจ่๏ผ‰:

   ```bash

   npm run setup:deploy

   # ๆˆ–่€…

   ./scripts/setup-deployment.sh

   ```



2. **ๆ‰‹ๅŠจ้…็ฝฎ**:

   - ๆŸฅ็œ‹่ฏฆ็ป†ๆŒ‡ๅ—: [DEPLOYMENT_SETUP.md](./DEPLOYMENT_SETUP.md)

   - ่Žทๅ– Vercel Token: https://vercel.com/account/tokens

   - ๆทปๅŠ  GitHub Secrets: https://github.com/junhey/kid-smart-learning/settings/secrets/actions



3. **้œ€่ฆๆทปๅŠ ็š„ Secrets**:

   - `VERCEL_TOKEN` - ไปŽ Vercel Dashboard ๅˆ›ๅปบ

   - `VERCEL_ORG_ID` - ่ฟ่กŒ `vercel link` ๅŽ่Žทๅ–

   - `VERCEL_PROJECT_ID` - ่ฟ่กŒ `vercel link` ๅŽ่Žทๅ–



The workflow in `.github/workflows/deploy.yml` will:

- โœ… Type-check on every push

- โœ… Build and deploy to Vercel on merge to `main`

- โœ… Create preview deployments for PRs



---



## Design System / ่ฎพ่ฎก่ง„่Œƒ



### Colors / ้ขœ่‰ฒ



| Token | Hex | Usage |

|---|---|---|

| Primary | `#FFB84D` | Buttons, accents |

| Secondary | `#4DD0E1` | Math theme |

| Danger | `#FF6B6B` | Wrong answers |

| Success | `#81C784` | Correct answers |

| Purple | `#A78BFA` | Levels, rewards |



### Typography

- **Nunito** โ€” Primary font (rounded, child-friendly)

- **Fredoka One** โ€” Display letters in games



### Touch Targets

- All interactive elements: minimum 64px height

- Large emoji buttons: 80-100px height



---



## Roadmap / ่ทฏ็บฟๅ›พ



- [ ] More English categories (body parts, weather, food)

- [ ] Chinese language support (Mandarin mode)

- [ ] Multiplayer / family mode

- [ ] More math: multiplication intro, skip counting

- [ ] Story mode with narrative

- [ ] Parent dashboard with progress reports

- [ ] Offline PWA support

- [ ] More languages (Spanish, French)



---



## Changelog / ๆ›ดๆ–ฐๆ—ฅๅฟ—



### v1.0.0 (2026-03-10)

- Initial release

- 5 English games: AlphabetBalloon, WordMatch, PhonicsGame, ListenAndChoose, SentenceBuilder

- 5 Math games: NumberCount, AdditionGame, ShapeMatch, CompareNumbers, MathShooter

- Reward system: stars, levels 1-10, achievements (firstStar, perfectRound, streak10)

- JSON curriculum: 26 letters, 100+ words, 30 sentences, 8 shapes

- Framer Motion animations throughout all games

- Web Speech API for pronunciation in English games

- Responsive design for iPad/tablet/desktop

- GitHub Actions CI/CD workflow for Vercel



---



## Contributing / ่ดก็Œฎ



Contributions welcome! Please:

1. Fork the repository

2. Create a feature branch: `git checkout -b feature/new-game`

3. Commit your changes

4. Open a Pull Request



---



## License / ่ฎธๅฏ่ฏ



MIT License โ€” free for educational use.



---



Made with โค๏ธ for curious kids everywhere!

ไธบไธ–็•Œๅ„ๅœฐๅฅฝๅฅ‡็š„ๅญฉๅญไปฌ็”จ็ˆฑๅˆถไฝœ๏ผ