Frontend Mentor - Tic Tac Toe solution

This is a solution to the Tic Tac Toe challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the game depending on their device's screen size
• See hover states for all interactive elements on the page
• Play the game either solo vs the computer or multiplayer against another person
• Bonus 1: Instead of having the computer randomly make their moves, try making it clever so it’s proactive in blocking your moves and trying to win
• Added: Users can create online challenges and play against friends.

Screenshots

Links

• Solution URL: [https://www.frontendmentor.io/solutions/tic-tac-toe-game-bGw27rUXHO)
• Live Site URL: [https://tic-tac-toe-ma15.onrender.com/)

My process

Built with

• Flexbox
• CSS Grid
• React - JS library
• Node Js - JS runtime environment
• Styled Components - For styles
• Socket IO - JS Web socket library

What I learned

For this project I am very happy I got to use Web sockets (Socket IO), this is a technology that I have found very interesting for a while now and when I saw this tic tac toe challenge I decided to add an online game feature so as to learn more and put in practice using Web sockets.

Continued development

Of course I will definitely keep leaning Web sockets in the future.

Useful resources

• Tic-Tac-Toe-Minimax-Engine - This really helped me in the CPU section of the game, i used this engine to generate the best computer moves.
• Socket IO - They're site just contains a good documentation of Socket IO
• Socket IO functions summary - Contains a list of Socket IO functions and they're meanings (was very useful for me).

Author

• Website - Leonard Ikeh
• Frontend Mentor - @leoikeh99
• Twitter - @wazza_dev