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.

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: repo
• Live Site URL: website

My process

Built with

• React - JS library
• Vite - Frontend Tooling
• Tailwind CSS - CSS library

What I learned

I have learned how to handle hooks (useContext, useEffect) and how to create and use my own hooks, additionally I learned how to correctly handle and configure react-router-dom to handle the views in an app.

Continued development

I'm still developing so that the computer makes its moves more smartly and tries to win.

Author

• Website - g1alexander.com
• Frontend Mentor - @g1alexander
• Twitter - @g1alexander_