Idea is to implement all my learning of Angular latest tricks and standards by building game - Tic Tac Toe

Team Members

Launch Site

Tic Tac Toe Game

Tic Tac Toe game built with Angular + NGRX Store + Angular Custom Library and much more Latest Technics. Have fun :)

V800 app snap


Tic-tac-toe or Xs and Os, is a paper-and-pencil (converted to digital) game for two players, X and O, who take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.


Browser Support - Best to be viewed in Chrome.

How to use?

  1. This is a two player game. start with player A with coin X and continue the game.
  2. Game preview will help players to keep track of movements.
  3. Players can replay (i.e. - play back or go forward) through by clicking on steps in Game Preview .
  4. Once a player win, board will be disabled and winner will be announced below the game board.

Game runs in /game path, if you landed with wrong URL path (for e.g - /game/test), application will instruct you to go back to game.

Built With

Github Repo URL -

Tech. delight -

  1. State Management - NGRX Store + NGRX Store development tools.

  2. Angular Cli - for generating angular library and application.

  3. @app/common-lib - common custom library created to host game preview component.

  4. ngx-take-until-destroy - library to free up the streams once component destroyed.

  5. angular-cli-ghpages - library to automate check-ins to gh-pages + handle application deployment.

Application insight -

  1. Core module - hold one time usage component + app wide singleton services.

  2. Shared module - holds reusable widgets and modules used across the application.

  3. Error page component - to handle 404 + redirection to home.

  4. Game module - main module that hosts the game.

  5. ChangeDeductionStrategy - OnPush strategy is used to improve performance.

  6. local app serve + built and deploy scripts - custom scripts written for app local serve, prod and deploy.

  7. Read me file - file to track the work-items + app helper commands are listed.

Feedback / Ratings (7)

All Feedback