This is the curriculum for the 2019 Alpha Web Developer Bootcamp.

Extra Challenges

  • Use flexbox to set up your grid
  • Allow users to choose their mark (X, O, a color, an emoji, etc...)
  • Create a component for alerts and push the win/lose messages there instead of using an alert

This challenge is intended to let you practice maintaining state in a React application and
become more familiar with passing props and dealing with user interactions. This game will be for two
users, playing on one device, taking turns. You will have to use component state to keep track of
whose turn it is and which squares have been marked by each player. One hint is that you should not
directly manipulate the DOM to keep track of changes (in other words, no direct DOM manipulation like
getElementById("square").style = ...). React state and props should do all the heavy lifting.

On another note - this project will challenge your knowledge of React but should also be an exercise
in creating good user experiences. Your view should be styled to look good as well as function

Here are the user stories to guide your progress:

  • As a user, I should start off seeing a 3x3 grid on the main page

tic-tac-toe board

  • As a user, I should be able to click on a square to mark it. My partner should be able to
    click on a square after me and see their mark.

  • As a user, when someone has won the game (3 squares in a row: horizontally, vertically, or diagonally)
    or there are no more squares, an alert will tell me who has won or that there are no more squares
    and the game has ended.