Frontend Mentor - Tic Tac Toe solution

This is a solution to the Tic Tac Toe challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Optimizations
• 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: Save the game state in the browser so that it’s preserved if the player refreshes their browser
• Bonus 2: 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

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/tic-tac-toe-game-using-react-HJ8hvelw5
• Live Site URL: https://nakoyawilson-tic-tac-toe.netlify.app/

My process

Built with

• React - JS library
• Mobile-first workflow
• Figma Design File

Note: These are just examples. Delete this note and replace the list above with your own choices

Optimizations

• Save the game state in the browser so that it’s preserved if the player refreshes their browser
• 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

Author

• Website - Nakoya Wilson
• Frontend Mentor - @nakoyawilson
• Twitter - @nakoyawilson
• LinkedIn - @nakoyawilson