Series: React tutorial (tic-tac-toe)

[DylanSp]

Start with overview post containing links to each part:

Posts:

• Part 0: Game logic (no React).
  • How to design game API? Class-based vs. functional/POJO, mutable vs. immutable
  • Development
  • Testing
• Part 1: React ideas and fundamentals
  • Component-based
  • Top-down data-flow through props
  • JSX/TSX
  • Class and function components
  • Hooks
• Part 2: Static site iteration 1 - static site, passing state with prop-drilling, hooks, no Redux
  • Sketch UI (Excalidraw?)
  • Break design down into components
  • Build page structure (without attaching logic)
  • Wire in game logic, event handlers
• Part 3: Testing with Cypress, ensuring stability when refactoring
• Part 4: Static site iteration 2 - using Context to avoid prop-drilling
  • Motivation and concepts
  • Implementation
• Part 5: Static site iteration 3 - IoC, composition of components
  • Motivation and concepts
  • Implementation
• Part 6: Static site iteration 4 - Redux
  • Motivation and concepts (model-view-update)
  • When to use, when not to use
  • Implementation
• Part 7: Full-stack environment setup
  • Opaque backend - go over routes/API provided (distribute through Docker Compose, with container for backend and container for DB)
• Part 8: Full-stack site design
  • Sketch expanded UI
  • Introduce react-router
  • Scaffold out site
• Part 9: Full-stack iteration 1 - useEffect + Redux (or Context/IoC)
• Part 10: Full-stack iteration 2 - RTK query

[DylanSp]

Routes provided by backend:

• POST /login
• POST /logout
• POST /users (create user - username + password)
• GET /games
• GET /games/:gameID
• POST /games (new game)
• Either POST /games/:gameID/move (make move) and PUT /games/:gameID/join, or condense into one endpoint

[DylanSp]

Database tables:

• Users
• Games - either store game state in here directly, or just use for game metadata and store game moves in separate table, construct game state by replaying moves