DEV Community

Adrian Chong
Adrian Chong

Posted on

Make a TIC-TAC-TOE by using NextJs, React and Redux with Typescript

#nextjs #react #redux

Tic Tac Toe
Demo link: https://tictactoe-hu2mk80qr-phonist.vercel.app/
GitHub repo: https://github.com/phonist/tictactoe

About The Project

This is a straightforward Tic Tac Toe game.
The game is build using NextJs on top of React with Typescript.
Then there's redux, redux-thunk, and material-UI.

Build With

Getting Started

The project are mainly categorize into three parts (UI, redux logic and typescript interface):

pages |-- index.tsx |-- _app.tsx |-- Board.tsx |-- Game.tsx |-- Square.tsx redux |-- reducers |-- actions |-- thunks |-- types |-- interfaces |-- reducers.ts |-- store.ts
Enter fullscreen mode Exit fullscreen mode
  • All UI components are kept in the pages folder..
  • All redux logic are kept inside redux folder.
  • All typescript interfaces are kept inside types and types/interfaces folder.

Prerequisites

  • Node - 16.2.0
  • Yarn - 1.22.17

Installation

  1. git clone https://github.com/phonist/tictactoe.git
  2. cd tictactoe
  3. yarn dev
  4. navigate to localhost:3000 and start your development

Top comments (0)