Responsive Tic Tac Toe game with JS, React

What are you most proud of, and what would you do differently next time?

• Managed to implement the game vs CPU functionality. Would probably probably try to rely less on useEffect if I had to do it again

What challenges did you encounter, and how did you overcome them?

• Adding the outline on hover for the active player, and then turning it to full color was a nice challenge - I did by using the player turn state to dynamically display the outlines, then disabling the container and filling the image on click.

... 

• Creating the play vs CPU functionality was the most challenging aspect here - I had to create a function that adds a CPU move based on the remaining tiles, and then call that function after every human player move. This worked well when the human players started the game, but not so much if wanted to the CPU to start. I managed to make it work only by writing a very long if condition in a useEffect hook.

useEffect(() => {
    if (
      (gameType === "CPU" &&
        !winner &&
        playerTurn === player2Mark &&
        player2Mark === "O" &&
        !initialCpuMove &&
        moveNumber > 0) ||
      (gameType === "CPU" &&
        !winner &&
        playerTurn === player2Mark &&
        player2Mark === "X" &&
        initialCpuMove &&
        moveNumber > 0)
    )
      setTimeout(() => {
        addCpuMove(gameboard);
      }, 0);
  }, [playerTurn, winner, gameType, player2Mark, gameboard, initialCpuMove]);

What specific areas of your project would you like help with?

Probably a way to make the CPU player somewhat smart, instead of relying on random moves.