Welcome! In this tutorial, you’ll build a fully functional version of Tetris using React and Redux Toolkit — one step at a time.
You'll start with a basic React app and work all the way up to a polished, interactive game with score tracking, keyboard controls, and automatic block dropping.
This tutorial is hands-on and code-first. After each short page, your game will still run — no broken builds, no skipped logic. You'll also find:
- 🤖 AI Prompts to help you explore concepts deeper
- 🧠 Check for Understanding to reinforce learning
- ✅ Working Code after every step
Each step builds on the one before it:
- 00-Introduction – Set up your React app
- 01-Grid-Square – Create the basic square component
- 02-Grid-Board – Build a 10×18 game board
- 03-Next-Block – Add the next shape preview
- 04-Score-Board – Display score and game controls
- 05-Arranging-the-Page – Use CSS Grid for layout
- 06-Controls – Add movement buttons
- 07-Message-Popup – Display pause and game over messages
- 08-Redux-Toolkit – Set up the Redux store
- 09-Organizing-Code – Move helpers to a
utilsfolder - 10-Default-State – Define initial game state
- 11-Connect-Next-Block – Pull shape data from Redux
- 12-Connecting-Grid-Board – Draw the board dynamically
- 13-connect-Controls – Hook up controls to actions
- 14-Connect-Message-Popup – Show pause and game over states
- 15-Connect-Score-Board – Connect score and control buttons
- 16-Rotating-Blocks – Add rotation logic
- 17-Moving-Blocks – Move blocks and place them
- 18-Creating-a-Timer – Drop blocks over time
- 19-Game-Over-and-Restart – End and restart the game
- 20-Stretch Goals - Try these stretch goals!
- Core React concepts: components, props, and hooks
- Redux Toolkit: slices, state, and dispatch
- Grid-based rendering logic
- Game loop timing with
requestAnimationFrame - UI layout using CSS Grid
Start with 00-Introduction.md and follow the steps in order. Each page keeps your app functional and helps you build real logic and design patterns.
Good luck and have fun — let's build Tetris! 🧱