The primary tools used to build the front-end are React, Typescript, Redux, and Eslint.
Additionally, this project benefited greatly from the following resources:
- Chessboard.jsx - Supplied the chessboard and provides a convenient api for controlling chess pieces.
- Chess.js - Encoded the rules of chess/piece movement and manages the game state.
- Chart.js - Used to build the Evaluation line chart.
The static, production web files are compiled by create-react-app's npm run build using Webpack + Babel.
The back-end (contained in ./server/) is a simple Flask app running a stripped down implementation of the Sunfish chess engine. Package management is handled by Pipenv. In the app's only endpoint, /api/sunfish-move, the position of the chessboard (expressed as an FEN string) and other config options are sent from the client each time a move is played. Sunfish performs a short analysis and its best move along with the UCI engine logs are returned. The production app is ran using Gunicorn. For deployment, a Docker image is built and pushed to Docker Hub to be pulled into the production environment.
This application is deployed on an AWS EC2 Instance. All traffic is ran through an NGINX Docker container equipped with HTTPS. TLS certificates are periodically fetched from Let's Encrypt using a Certbot container (thank you to this amazing article). The static files of the production front-end app are served directly from the NGINX web server via a Docker volume. NGINX is also responsible for proxying api calls to the back-end app.
Each of the NGINX server, Flask back-end, and Certbot Docker containers are orchestrated with Docker Compose.