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.
- 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
- 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.jsongrouping together related dependencies (pinned)
srccontains the main source tree, with subfoldersreduxcontaining the Redux store logic andcomponentscontaining the left sidebar & the main Chessboard component (abstracted by functionality).- Project architected as a standard React + Typescript web app.
- 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.
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 production1. e4 d5
2. exd5 e6
3. dxe6 Nf6