Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gibbok/blocchi-puzzle
A tetromino game based on React, Redux, TypeScript, and functional programming.
https://github.com/gibbok/blocchi-puzzle
fp-ts functional-programming reactjs redux side-project storybook styled-components tetris tetris-game tetromino typescript
Last synced: 3 months ago
JSON representation
A tetromino game based on React, Redux, TypeScript, and functional programming.
- Host: GitHub
- URL: https://github.com/gibbok/blocchi-puzzle
- Owner: gibbok
- License: mit
- Created: 2019-07-22T07:43:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T15:17:35.000Z (almost 2 years ago)
- Last Synced: 2023-03-04T04:05:44.526Z (almost 2 years ago)
- Topics: fp-ts, functional-programming, reactjs, redux, side-project, storybook, styled-components, tetris, tetris-game, tetromino, typescript
- Language: TypeScript
- Homepage: https://gibbok.github.io/blocchi-puzzle/game/
- Size: 26.3 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://www.typescriptlang.org/), using functional programming techniques with [fp-ts](https://github.com/gcanti/fp-ts).
UI components are written in [React](https://reactjs.org/) in isolation using [Storybook](https://storybook.js.org/).
Application state management is handled using [Redux](https://redux.js.org/) with middleware [redux-thunk](https://github.com/reduxjs/redux-thunk).
The layout is fluid and responsive based on CSS3 written using [styled-components](https://styled-components.com/).
Animations created using [GSAP](https://greensock.com/gsap/) and [react-transition-group](https://github.com/reactjs/react-transition-group) with CSS transitions.
All tests are written using [Jest](https://jestjs.io/) and [Sinon](https://sinonjs.org/) with coverage to near 100%. UI snapshots and behavioral testing is performed using [react-test-renderer](https://reactjs.org/docs/test-renderer.html). To mock the store [redux-mock-store](https://github.com/reduxjs/redux-mock-store) was used.
Additional visual regression testing is setup using [Loki](https://loki.js.org/). End-to-end testing made with [Cypress](https://www.cypress.io/). Continuous integration with [Travis CI](https://travis-ci.com/).
## Screenshot
