Skip to content
Tic tac toe game built with React
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package-lock.json
package.json

README.md

Tic Tac Toe Game

This project is part of the freeCodeCamp legacy curriculum, which helps you to learn how to code through online courses, projects and also provides interview preparation.

Project Guidelines

The aim for this project was to build an unbeatable tic tac toe game. FreeCodeCamp allowed us to use whichever libraries or APIs that we required to solve this challenge. The design and UI was up to us to create.
To complete the project, the below user stories needed to be fulfilled:

  • I am able to play a game of tic tac toe with the computer
  • The game restarts as soon as it is over
  • I am able to choose to play as 'X' or 'O' (which side)
  • The game's score is kept
  • It is impossible to beat the computer

Project Approach

I decided to build this game using React and first built up the game's UI with different componenets, before I jumped into any of the coding.

I started by adding small functionality to the game, such as getting the symbols ('X' and 'O') to show up on the game board when a player clicks on a square. Then I build up the game's logic so that the computer will make a move after the play clicks on a square within the game board.

I created one modal window to display upon starting the game, which asks the user to pick which side ('X' or 'O') that they want to play as. Then I created the modal which pops up once the game is over and indicates who won. I added some CSS transitions to smooth out the game's UI.

At the end, I implemented the minimax algorithm to get the computer to make the best available move and make it unbeatable.

Made with

Preview

Check out the live version

Screenshot of my tic tac toe game built in React

Disclaimer

This project was bootstrapped with Create React App.

You can’t perform that action at this time.