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.
Type Name Latest commit message Commit time
Failed to load latest commit information.

React Redux Chess

Build Status


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
$ 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.


  • 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



$ npm run storybook

Then visit http://localhost:9009/

Unit tests

$ npm run test

ESLint (eslint-config-react-app)

$ npm run lint


A demo is deployed on heroku using create-react-app-buildpack.


This project is licensed under the MIT License - see the file for details.

You can’t perform that action at this time.