React Redux Chess
An interactive chessboard built with React and Redux.
See demo on Heroku.
This is a pet project to practice and improve my front-end development skills.
Full story available on my blog.
$ git clone https://github.com/TimAstier/react-redux-chess $ cd react-redux-chess $ npm install
- react-dnd - Drag and Drop for React
- reselect - selector library for Redux
- styled-components - a convenient way to style components with CSS
- storybook - an UI development environment
PNG files of chess pieces are from Wikimedia Commons.
- Chessboard UI
- 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
- 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
- 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
- Hand-made sketches
- UI presentational components developed in isolation with Storybook
- TDD with unit testing (Jest)
- All changes in CHANGELOG.md
$ npm run storybook
Then visit http://localhost:9009/
$ npm run test
$ npm run lint
A demo is deployed on heroku using create-react-app-buildpack.
This project is licensed under the MIT License - see the LICENSE.md file for details.