The classic Tetris, built in Typescript & React.
When i was first learning to code I built a Tetris clone in Java, since then whenever i learn a new language or framework I try to build a Tetris clone to nail the basics.
This is far from the first React project I've built, but i wanted to try out React 19 + Compiler, and see how it compares to the old useMemo based approach.
It's ended up being a nice example of how i approach building a React app, so i've made it public.
Hosted at tetris-react.dlundy.au
Built with:
- React 19 + Compiler (Goodbye useMemo!)
- Vite for the build system
- TailwindCSS for basic CSS styling & animations
- Immer for immutable state updates
- Prettier for code formatting
- ESLint for code linting
- TypeScript
- PNPM for package management
- CDK for deployment to AWS
Future features:
- Score (Double check this is correct?)
- Levels
- Implement "Super Rotation System" rules - https://tetris.fandom.com/wiki/SRS
- On Ground "Hold" physics logic
- Verify i rotate correctly - from the center of the piece
- Wall Kick
- Floor Kick
- Handle keyboard & tick logic ourselves
- Mobile controls & viewport
- Sound FX / Music
- Online Leaderboard, allowing submissions from any client