<rph />



⚠️ Disclaimer: I have had no prior experience with Node.js aside from having it power React in the background, and I've tried TypeScript only recently with my Angular project. Forgive the patterns I used, but feel free to give me feedback (hello@caye.codes). Grateful as well for this guide as it helped me understand how backend works for Node.

Deployed app | Github repo


1. Server-rendered React (CRA) responsive, mobile-friendly web app

2. Uses Bulma as CSS framework

3. X always goes first—alternate turns—until a winning grid matches, or a draw is called

4. New game clears grid

5. Counts X and O wins, as well as number of games played

Thought process:

1. Data entities include Grid and Game

2. On every click, it updates the Grid -> evaluateGrid -> updates Grid and Game (Ongoing | Draw | X_Wins | O_Wins for status, toggles player, tallies turn number/wins/game number)

3. Added pizzazz in that I highlighted the winning slots, and presented the game stats neatly below the grid


1. It does not validate the earliest occasion of a draw—only assumes it is if by Turn 8, there is still no winner

2. You can click on multiple boxes quickly and win (should've put a LOADING status to disable further clicks while validating grid 😅)

3. Matching the winning grid used a double loop (could've used Regex, but I know myself enough that that will take me forever 🥲)

Had fun though! I never knew a "simple" game could give such a tough challenge.

<rph />

© 2021 — Designed & developed
by Marguerite Roth & Caye Borreo