Blocchi puzzle

A tetromino game based on React, Redux, TypeScript, and functional programming.

🚀 Play the game: https://gibbok.github.io/blocchi-puzzle/game/

👨‍💻 UI components: https://gibbok.github.io/blocchi-puzzle/storybook/

Introduction

Recently I took some time to work through the remaking of a classic tetromino game as a side project, although the game logic is fairly straightforward, I wanted to implement it using a professional approach and most modern front-end technologies and techniques.

Technology overview

The game is built in TypeScript, using functional programming techniques with fp-ts.

UI components are written in React in isolation using Storybook. Application state management is handled using Redux with middleware redux-thunk. The layout is fluid and responsive based on CSS3 written using styled-components.

Animations created using GSAP and react-transition-group with CSS transitions.

All tests are written using Jest and Sinon with coverage to near 100%. UI snapshots and behavioral testing is performed using react-test-renderer. To mock the store redux-mock-store was used.

Additional visual regression testing is setup using Loki. End-to-end testing made with Cypress. Continuous integration with Travis CI.

Screenshot