React Redux Chess
What
An interactive chessboard built with React and Redux.
See demo on Heroku.
Why
This is a pet project to practice and improve my front-end development skills.
Full story available on my blog.
Install
$ git clone https://github.com/TimAstier/react-redux-chess
$ cd react-redux-chess
$ npm install
Built with
- react - a JavaScript library for building user interfaces
- react-dnd - Drag and Drop for React
- redux - a predictable state container for JavaScript apps
- reselect - selector library for Redux
- Immutable - immutable JavaScript objects
- styled-components - a convenient way to style components with CSS
- storybook - an UI development environment
- jest - zero configuration testing platform for JavaScript
PNG files of chess pieces are from Wikimedia Commons.
TODO
- Chessboard UI
- Pieces
- Initialise board with pieces
- Set up Redux
- Improve app structure
- Move pieces with drag-and-drop
- Active color indicator
- Implement chess rules
- Should not be able to move to current square
- Can only move pieces with active color
- Restrict move possibilities based on piece type
- rook
- knight
- bishop
- queen
- king
- pawn
- Pieces can't move on a square occupied by own color
- Pieces can't jump above other pieces (except knights)
- King can't move to an attacked square
- Handle 'En passant' capture
- Castling
- Checkmate
- Start a new game
- Move to previous / next move
- Highlight last move
- Game moves displayed in PGN format
- Go back to a previous position by clicking the PGN
Development process
- Hand-made sketches
- UI presentational components developed in isolation with Storybook
- TDD with unit testing (Jest)
- All changes in CHANGELOG.md
Testing
Storybook
$ npm run storybook
Then visit http://localhost:9009/
Unit tests
$ npm run test
ESLint (eslint-config-react-app)
$ npm run lint
Deployment
A demo is deployed on heroku using create-react-app-buildpack.
License
This project is licensed under the MIT License - see the LICENSE.md file for details.