Chess Transcriber

A transcriber React app to play a game of chess and transcribe the moves to the Standard Algebraic Notation used by FIDE. Alternatively, one can input SAN for a given game and walk through the moves observing the corresponding board positions.

Tech

• React for the frontend UI & Redux for chessboard state management (rearchitected app to not require Redux)
• vite & pnpm as primary development tools
• HTML, CSS, TS as the principal programming/markup languages

Special lessons

• Using React hooks, managing state (with lifts to parent components when necessary), using Redux for the more complicated chessboard
• Integrating external libraries like chess.js (mature library written over 10 years) which is responsible for the underlying chess logic
• Testing the projects with unit tests (Jest) and end-to-end tests (Playwright) (Special note: Jest needs Babel to support ES6 module syntax).
• Setting up a CI/CD pipeline for testing, building & deploying app.
• Formatting package.json grouping together related dependencies (pinned)

Directory structure & project architecture

• src contains the main source tree, with subfolders redux containing the Redux store logic and components containing the left sidebar & the main Chessboard component (abstracted by functionality).
• Project architected as a standard React + Typescript web app.

Future extensions with minimal effort

• Make the web app responsive (this step requires non-trivial UI design decisions).
• Augment with the well-known express and socket.io JS libraries to enable playing online chess on this board.

Build & run

git clone https://github.com/busywhistling/chess_transcriber
cd chess_transcriber
pnpm install
pnpm  dev # to run dev server
pnpm test # to run test suites
pnpm build # to build for production

Sample chess moves to play with

1. e4 d5
2. exd5 e6
3. dxe6 Nf6