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

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.
The…


This content originally appeared on DEV Community and was authored by Adrian Chong

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
  • 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


This content originally appeared on DEV Community and was authored by Adrian Chong


Print Share Comment Cite Upload Translate Updates
APA

Adrian Chong | Sciencx (2022-04-09T06:38:33+00:00) Make a TIC-TAC-TOE by using NextJs, React and Redux with Typescript. Retrieved from https://www.scien.cx/2022/04/09/make-a-tic-tac-toe-by-using-nextjs-react-and-redux-with-typescript/

MLA
" » Make a TIC-TAC-TOE by using NextJs, React and Redux with Typescript." Adrian Chong | Sciencx - Saturday April 9, 2022, https://www.scien.cx/2022/04/09/make-a-tic-tac-toe-by-using-nextjs-react-and-redux-with-typescript/
HARVARD
Adrian Chong | Sciencx Saturday April 9, 2022 » Make a TIC-TAC-TOE by using NextJs, React and Redux with Typescript., viewed ,<https://www.scien.cx/2022/04/09/make-a-tic-tac-toe-by-using-nextjs-react-and-redux-with-typescript/>
VANCOUVER
Adrian Chong | Sciencx - » Make a TIC-TAC-TOE by using NextJs, React and Redux with Typescript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/09/make-a-tic-tac-toe-by-using-nextjs-react-and-redux-with-typescript/
CHICAGO
" » Make a TIC-TAC-TOE by using NextJs, React and Redux with Typescript." Adrian Chong | Sciencx - Accessed . https://www.scien.cx/2022/04/09/make-a-tic-tac-toe-by-using-nextjs-react-and-redux-with-typescript/
IEEE
" » Make a TIC-TAC-TOE by using NextJs, React and Redux with Typescript." Adrian Chong | Sciencx [Online]. Available: https://www.scien.cx/2022/04/09/make-a-tic-tac-toe-by-using-nextjs-react-and-redux-with-typescript/. [Accessed: ]
rf:citation
» Make a TIC-TAC-TOE by using NextJs, React and Redux with Typescript | Adrian Chong | Sciencx | https://www.scien.cx/2022/04/09/make-a-tic-tac-toe-by-using-nextjs-react-and-redux-with-typescript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts