Skip to content
An interactive chessboard UI built with React and Redux.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
public
src
.eslintrc.js
.gitignore
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
package-lock.json
package.json

README.md

React Redux Chess

Build Status

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.

You can’t perform that action at this time.