Tic-Tac-Toe built with React
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
src
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

Tic Tac Toe, kinda self-explanatory init? Built for the freeCodeCamp front end track.

Check it out here!

User Stories:

  • I can play a game of Tic Tac Toe with the computer.
  • My game will reset as soon as it's over so I can play again.
  • I can choose whether I want to play as X or O.

Tools Used:

  • Visual Studio Code
  • React, with create-react-app

Preperation:

This was my first time using React so I started by following the official React tutorial which, to my surprise, turned out to be Tic Tac Toe! I still wasn't entirely confident in my understanding of React so I worked through a few more introductory materials online before starting.

The Project:

To my pleasent surprise React was simple to get the hang of, and is easy to use. It really does make building the UI a breeze.

I wrote the game from scratch ( I hope that would be obvious). At first I followed fairly close to the design used in the official React tutorial simply because it seemed like the best way to do things (after all, they would know how to do things the React way over there, wouldn't they?), but I was on my own for making the Start Menu and the AI. Even so I feel pretty good about what I managed to create. I'm sure it could have been done better and with less code, but it works. I could very easily get obsessed with perfecting every little bit of it, so as not to spend time for little gain.

Thanks to Jason Fox, with his post Tic Tac Toe: Understanding The Minimax Algorithm, and especially ahmad abdolsaheb, with his article How to make your Tic Tac Toe game unbeatable by using the minimax algorithm for helping me understand the Minimax algorithm for the AI moves. It was a major headache, and I might have given up if I'd had to figure it all out myself (I almost did anyway to be honest).

Final Thoughts:

This project was actually quite a pleasent experience, thanks to React. I did have trouble not screwing up the logic behind the scenes, and there were a few times when I forgot the React way of doing things and got myself into all kinds of trouble, but it was worlds better than it would have been if I had been trying to make my own UI code from scratch (speaking from experience here). With React I built better UI, with less code, and much less headache.

I'm really coming to realize that my biggest trouble with algorithms is a lack of self-confidence. I'm perfectly capable of understanding them, with a little time and effort, and writing them shouldn't be such a problem after that. Except I get ahead of myself, and instead of focusing on one step at a time I'm thinking about how big and scary the algorithm is as a whole. Which gets me stressed out, which makes me stop thinking good. Basically, I have to chill out. Let that be the moral of this project:

Take things one step at a time, and chill out more.

You can quote me on that... if you want to for some reason. I don't know.

Thanks for reading!