Skip to content

A simple game of tic-tac-toe written in React. Uses MVVM and Dependency Injection.

License

Notifications You must be signed in to change notification settings

guyca/obsidian-tic-tac-toe

Repository files navigation

Tic-Tac-Toe Game

coverage discord chat

A simple tic-tac-toe game implemented in React using MVVM (Model-View-ViewModel) architecture that utilizes react-obsidian for Dependency Injection.

The app demonstrates how dependency injection facilitates writing modular code that is easier to understand and test.

It's adapted from the Tic-Tac-Toe tutorial on the React website.

Key features

  • MVVM Architecture - The app is structured in a way that separates concerns between the view, view model, and model.
  • Dependency Injection - The app uses react-obsidian for dependency injection.
  • "Dumb views" - The view is a simple component that only knows how to render the UI. It doesn't contain any business logic.
  • No confusing useEffect hooks - hooks with dependency arrays can be confusing and hard to reason about. This repo demonstrates how to avoid hooks almost entirely by encapsulating logic in classes.

Tests

The repo contains two types of tests:

Running locally

  1. yarn
  2. yarn dev