ChessPedition

A play 'til you lose version of chess that gets harder everytime you win.

Turing School of Software Design - Mod4 Capstone Project

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.

Contributors

Chris Spohn: github profile

Elsa Fluss: github profile

Technologies

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

Table of Contents

1. Introduction
2. Instructions
3. How-To
4. Future Plans

Introduction

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.

Setup Instructions

To run the project locally:

• git clone this repo
• git clone our backend repo from here and follow its setup instructions
• cd into the client repo
• run npm install
• go into constants/index.js and uncomment the localhost link variables and comment out the Heroku link variables.
• run npm start to run the React App in your browser
• Make sure that the backend is running before attempting to log in

OR

This site is deployed using Heroku. To visit, click the link below!

• ChessPedition

Testing

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.

Back to Top of Page

---

Using ChessPedition

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.

Back to Top of Page

---

Wins

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.

Notes and Plans for Future Iterations

• Statistics: Avid chess players love statistics. We have the information to provide certain statistics to players that is not currently implemented. We would love to do a deep dive to see what's possible and explore providing this information.
• User Authentication: Real user authentication (through a third party service) would be lovely. A lot of the work was setting up users and tracking API keys for each user so that moves are validated on the back end.
• Choosing where the winning pieces are placed: There are a lot of fun options to explore with the ChessPedition format. One of which would be choosing where your pieces are placed after you win a game to strategize for the follow up game. The piece reset comes from the back end, but implementing the UI with the chessboardjsx library would be a challenge but add a lot of value.

Back to Top of Page