https://github.com/rosesonfire/tic-tac-toe
A simple Tic Tac Toe app with NextJS, Redux, Redux-observables, GraphQL, Apollo, Redis and Docker-compose.
https://github.com/rosesonfire/tic-tac-toe
apollo docker-compose flexbox graphql nextjs reactjs redux redux-observable rxjs
Last synced: 3 months ago
JSON representation
A simple Tic Tac Toe app with NextJS, Redux, Redux-observables, GraphQL, Apollo, Redis and Docker-compose.
- Host: GitHub
- URL: https://github.com/rosesonfire/tic-tac-toe
- Owner: rosesonfire
- License: mit
- Created: 2021-01-03T09:57:00.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-01-05T18:08:30.000Z (over 5 years ago)
- Last Synced: 2025-02-02T11:11:17.532Z (over 1 year ago)
- Topics: apollo, docker-compose, flexbox, graphql, nextjs, reactjs, redux, redux-observable, rxjs
- Language: TypeScript
- Homepage:
- Size: 7.45 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tic Tac Toe
A simple tic tac toe game with
- React
- Redux
- Redux-obervables
- GraphQL
- NextJS
- Redis
Forked code from my other project: [Understand Qur'an](https://github.com/rosesonfire/understand-quran)
# Features
1. Persist play state on page reload
1. Shows game logs
1. [Static site generation with NextJS](front-end/README.md#Static-site-generation-with-NextJS)
# Requirements for development
1. Docker (^18.03.1)
1. Docker Compose (^1.27.3)
# Quick start
```bash
# Runs all services
./start
# View logs
./logs
# Once front-end is up you can access the site via http://localhost:3000
```
# Tech used
## Languages
1. 
Javascript
1. 
Typescript
1. 
Shell script
1. 
CSS
1. 
SCSS
1. 
YAML
1. 
GraphQL
## Frameworks and libraries
1. 
ReactJS
1. 
NextJS
- With static site generation
1. 
Redux
- Reselect
- React Redux
- Redux Toolkit
- Next Redux Wrapper
1. 
RxJS
1. 
Redux Observable
1. 
Docker
1. 
Docker Compose
1. 
Stylelint
1. 
Eslint
1. 
Webpack
1. 
Apollo server express
1. 
Apollo client
## Conventions
1. [Suite CSS](https://suitcss.github.io/)
1. [Ducks pattern](https://github.com/erikras/ducks-modular-redux)
# Services
- [front-end](front-end/README.md): the React front end
- [api-server](api-server/README.md): a graphQL server for serving the data
- [redis](redis/README.md): a Redis server for storing the temporary data
# Production
Set `ENV=production` in [.env](.env).
## URLs
- front-end: http://localhost:3000
- api-server: http://localhost:4000
- redis: http://localhost:6379 (Same as development)
- [Static site generation](front-end/README.md#Static-site-generation-with-NextJS)
# Development
Set `ENV=development` in [.env](.env).
## URLs
- front-end: http://localhost:3001
- api-server: http://localhost:4001
- redis: http://localhost:6379 (Same as production)
## Debug
- [front-end](front-end/README.md#debug)
- [api-server](api-server/README.md#debug)
# Commands
## Run services
```bash
./start []
```
## Restart services
```bash
./restart
```
## Stop a service
```bash
./stop
```
## Stop all services and remove containers
```bash
./killall
```
## View logs
```bash
./logs
```
## Shell into services
```bash
./shell
```