Tap the Notes – 4/4 piano rhythm game (Next.js + React + TypeScript)

An educational mini-game for children to practise rhythm accuracy in 4/4 – the most common time signature in beginner piano pieces.

Target audience:
Kids who already know basic note values and can play simple songs on the piano, and are ready to work on clapping / tapping in time.

The game is deliberately small but focused, built to showcase:

• Next.js + React + TypeScript fundamentals
• styled-components with SSR support in Next.js
• Real-time timing logic with a 4-beat count-in
• Light Web Audio API usage for a metronome click
• A simple but clear mapping from rhythm notation → piano playing

---

What the game teaches

4/4 and piano playing

• The game is in 4/4 time:
  4 beats per bar, with each beat usually feeling like a step in your hands when you play.
• The bar is split into 8 equal boxes, each one an eighth note (1 & 2 & 3 & 4 &):
  • Numbers 1 2 3 4 are the main beats.
  • The “&” in between are the off-beats.
• Many simple piano pieces (especially for beginners) are in 4/4 and use combinations of:
  • quarter notes (one per beat),
  • eighth notes (two per beat),
  • and occasional rests.
• Practising clapping / tapping these rhythms while staying with the metronome helps:
  • keep both hands together,
  • avoid speeding up or slowing down,
  • internalise what 4/4 “feels like” before playing.

The game turns a single bar of 4/4 into 8 tappable slots which directly correspond to what a teacher might clap, count, and then ask the child to play on the piano.

---

Game concept

What the child sees

• A one-bar rhythm in 4/4, drawn as 8 boxes (eighth-note grid).
• Each box is either:
  • a note (●) – clap/tap here, or
  • a rest (·) – stay quiet.
• Under each box there’s a label:
  • 1 & 2 & 3 & 4 &
• A glowing highlight moves across the 8 boxes, and a metronome click plays as it moves.

Count-in and play

1. The child chooses a rhythm pattern and tempo (BPM).
2. They press “Start bar (4-beat count-in)”.
3. A 4-beat count-in happens first:
   • You see “Count-in: 1/4, 2/4, 3/4, 4/4”.
   • You hear four metronome clicks.
   • This mimics how a teacher would count “1, 2, 3, 4, play”.
4. After the count-in, the bar starts:
   • A highlight sweeps through the 8 slots.
   • The child taps either:
     • the Tap button, or
     • the Spacebar.
5. At the end of the bar they see:
   • Accuracy %
   • Correct notes / total
   • Number of “ghost taps” (taps on rests or very off-beat)
   • A grade (“Amazing!”, “Great job!”, “Keep practising!”)

Because of the count-in, it’s now possible to hit the first note with accurate timing — just like playing with a teacher counting you in.

---

Rhythm patterns

There are a few built-in patterns to cover basic 4/4 rhythms related to early piano repertoire:

1. Steady Steps

   • Four quarter notes on beats 1 2 3 4 (slots 0, 2, 4, 6).
   • This is the classic “clap every beat” bar and trains a stable pulse.

2. Walking Eighths

   • All eight boxes are notes.
   • Feels like “walking” eighth notes in the right hand: 1 & 2 & 3 & 4 &.

3. Jump Around

   • Notes on 1, the & of 2, 3, and the & of 4.
   • Introduces off-beats and a more “bouncy” feel common in livelier pieces.

Patterns are defined as simple arrays of 0 | 1 flags, making it trivial to add new ones.

---

Tech stack

• Next.js (App Router)
• React with hooks
• TypeScript
• styled-components with SSR integration
• Web Audio API for metronome clicks

No external animation libraries are used; all visual polish is via CSS-in-JS.

---

Getting started

1. Create a Next.js app (if needed)

npx create-next-app@latest tap-the-notes --typescript
cd tap-the-notes