About Four in a Row

Four in a Row was a game that introduced me into the web development using MERN (Mongo, Express, React, Node.js). The project first started out as a simple tictactoe game that evolved into a bigger size board with added logic. After creating a functioning Connect4 style game, win data needed to talk to a MongoDB server to save and retrieve winning names and the number of moves it took to win a match. The challending part was figuring out how to use backend and frontend to talk to each other, after which figuring out how to connect the backend to the Mongo server.

Game Criteria

The board is 6 rows and 7 columns.
Clicking in any column "drops" a user's tile into that column, if an open spot exists. If not open spot exists, the user's click does nothing.
Detects a 4 in a row situation horizontally, vertically, and diagonally. Displays the winner.
Detects if the game ends in a tie.
Properly switches to the other player when a tile placement completes.
Upon completion of the game, add the winning player's name and number of game moves to a high scores table
Display the high scores table upon receiving this information

Code + Screenshots