The goal of this project was to undertake new technologies while building a fullstack application from scratch, demonstrating the collective knowledge we've gained throughout our time at Turing.
Chris Spohn: github profile
Elsa Fluss: github profile
Build: TypeScript, React.js, React Hooks, React Router, Action Cable (for websocket communication)
Chess Logic: Chessboardjsx, Chess.js
Testing: Cypress
CI: GitHub Actions
Deployment: Heroku
ChessPedition is a multi-user experience, where you can play chess against a friend. When a game ends, the winner begins with only the pieces they had left, and the loser receives a full board. ChessPedition utilizes websockets for live gameboard updates as each player makes their move. Additional users are welcome in the game room and can spectate the moves being made, but cannot participate in the game.
User authentication is handled with encrypted password storage on the backend so that a user can return to their profile to see stats from previous games. User details are stored in local storage so a player can return to their machine without having to log back in.
More details about the context for the project can be found in this project spec.
To run the project locally:
git clone
this repogit clone
our backend repo from here and follow its setup instructionscd
into the client reponpm install
constants/index.js
and uncomment the localhost link variables and comment out the Heroku link variables.npm start
to run the React App in your browserOR
This site is deployed using Heroku. To visit, click the link below!
Cypress was used to implement end-to-end-tests of the user flow. To run these tests, cd
into the project repository.
Then run npx cypress open
Cypress.js should open a window with a list of test files. Click on app-spec.js to run the tests in that file. Note that the Cypress tests are built to run locally, so you must follow the instructions for setting up the project locally in order for the tests to pass.
First, click sign up and create an account!
Once logged in you are taken to your dashboard where the rules of a ChessPedition can be found.
If a user has no past games they will see an empty 'past game' board. Once they play a game they see the previous end game and their high score displayed on the screen.
A user can click 'Start a New ChessPedition' and be taken to a game room connected to a websocket.
Once another registered user joins the room they are both able to begin playing chess!
A user can return to the dashboard and be prompted to rejoin the active game they are involved in.
When a game ends, both users see the result of their game displayed, with the option to continue the ChessPedition.
If the ChessPedition is continued, the winner of the previous game starts with only the pieces they had at the time of victory.
The website is replete with error handling.
The biggest win of this project was working with ActionCable in an environment where both the front end and back end were built from scratch. We had a lot of fun working with a dedicated back end team for the first time and navigating that relationship while practicing our technical communication. This was our first time working with a back end from the ground up, allowing us to contribute at every stage, from defining MVP to deploying the final product.
Additionally, the front end problem of needing to render three different instances (white player, black player, observer) at the same time was very enjoyable to solve. This was also our first time using TypeScript and our first time using websockets and building an event driven architecture.