Tech bro day 3: Tic Tac Toe (prettier and server side)

Continuing our Fractal Tech week one project of making Tic Tac Toe from scratch aka zero code generation. For me, that still means leaning heavily on Claude for tutoring (and other AI, I liked Codex too).

Today we had to style Tic Tac Toe and change its architecture from client-side to server-side. Mine still looks like shit, but it looks way better than yesterday’s (right pic).

Styling with CSS in such a basic manner went fine; not too stressful. Especially after practicing with ~30-40 minutes of Flexbox Froggy: flexboxfroggy.com (Mr Froggy goes crazy on the last level, don’t be fooled by how straightforward it seems).

Moving to server-side though…difficult. I remember setting up Express servers just two weeks ago, and realized how much I forgot already. Need to build that muscle memory, but also figure out how to reason my way through the steps to re-architect a project. Again, Claude was super helpful here, which also worries me. AI can fool you into thinking you know how to do something, when you really don’t.

I also gave myself the extra homework of refactoring Tic Tac Toe’s code from yesterday. Refactoring means rewriting code to optimize it without changing any of its functionality aka the user wouldn’t know the difference. Believe me, I really needed the refactor. I was copy-pasting the same function 9x everywhere, twice. For loops in a function are reasonable, but I trip up with for loops and mapping with React. Just doesn’t compute naturally. An instructor who sat by me to observe how I learn and reason through problems suggested I make a very easy mapping with React first, which did the trick. I kept making silly syntax errors with the more complex functions.

As a side project, Codex helped me one-shot a bonus Terminal-based version of Tic Tac Toe, so that I could log my game/any bugs in the Terminal even without having the client/browser side setup properly with React. That’s one thing I miss about Python; it let you run line-by-line right there in the IDE.