Nate Perry's Chess.com Front End Programming Challenge Submission

Hello, thank you for reviewing my submission. I have completed the original Application Requirements along with a few extras. This is my first ever Vue.js application, so I apologize if there are Vue best practices that I may not gotten quite right or done consistently. This was a fun project to explore Vue.js and how it works.

The app can be viewed at: https://nateperry.github.io/chesscomfrontendtest/

Local Development

To run the app locally, follow these easy steps after downloading the project.

npm install
npm run dev

Features from requirements

Clicking the board highlights the square
Clicked squares tracked and displayed as "moves" in the sidebar
Responsive design

Bonus Features

Board Flipping
Evaluation Bar
30sec Game Clock
Player Avatars
Implement Chess AI Nate-Bot ... sort of
In Game Chat
Checkmate, Timeout, Resign and Draw Games
Game Over Modal
Rematch / New Game
Turn Order
UX Study Performed
- my roommate played 1 round of this app
- their feedback led to a new idea for how to defeat Nate-Bot

Application Requirements

Create a page with a chessboard and a sidebar.
On desktop devices the sidebar should be positioned to the right of the sidebar.
On mobile devices the sidebar should be positioned below the chessboard.
The chessboard should resize responsively to consume available space.
Clicking a chessboard square should highlight the square.
Keep track of which squares are clicked and the order in which they're clicked.
Display the information collected from step 6 in the sidebar.

Sources and Attributions