aboutsummaryrefslogtreecommitdiff
path: root/readme.md
blob: 86143058746acd9b76682a8badfbbeb5d863f0c1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
# PO connect-4

![](./banner.png)

## This is a school project using Python and SQL

Some of this project's code is in Dutch (commit messages, documents etc.), along with the whole website. I'm planning on adding some form of localization system, and I'll try to maintain this after the assignment deadline because I think this is a pretty cool project. I'll also be fixing issues/merging pr's after the deadline. I think the deadline is ~January 25th~ sometime in March? though I'm not sure about this.

## Things that we'd like to have working:

- Working connect 4 game
- Client-server connection with socket.io
- Account creation
- Anonymous accounts / invite links
- Safe password authentication
- Play against the computer
- Follow people/add as friend
- Game rating like on chess.com
- Rest API that handles all of this instead of some janky solution

## Maybe:

- ~Log in with google / apple / other~
- Messages
- Multiple game modes
- Different themes (minimalist or skeumorphic with realistic bouncing animation)

## Used libraries and frameworks:

- [Flask](https://flask.palletsprojects.com/) for the REST API
- [ReactJS](https://reactjs.org/) to create the website
- [NextJS](https://nextjs.org/) for static react pages and html page routing
- [socket.io](https://socket.io/) for bidirecitonal communication during a game
- [SQLite](https://sqlite.org/index.html) for the database
- [nginx](https://nginx.org/en/) for serving static files generated by nextjs, caching and reverse proxy

An example database can be found on [Google Docs](https://docs.google.com/spreadsheets/d/1mDN9IUqRIMjr_9RmLxKybjIgVuaUadalmPEFnG-XeJg/edit?usp=sharing) along with the API endpoints, and the website prototypes can be found on [Figma](https://www.figma.com/file/rTciVQApAe6cwrH1Prl5Wn/4-op-een-rij?node-id=0%3A1)

![](./diagram.png)

## How to set up

> I haven't figured out how to run this project on Windows, so please install [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10) if you want to run this yourself on Windows. The distro you choose doesn't matter, though package names in ./configure may vary if your distro doesn't use the apt package manager.

0. `git clone https://github.com/lonkaars/po-4-op-een-rij`
1. Make sure you have [python](https://python.org/downloads) (with pip and venv) installed.
2. Make sure you have [nodejs](https://nodejs.org/en/download) (with npm) installed.
3. Make sure you have [nginx](https://nginx.org/en/) installed.
4. Make sure you have [make](https://www.gnu.org/software/make/) and the gnu c compilers [gcc](https://gcc.gnu.org/) installed (most distro's will have these by default).
5. Install typescript, react-scripts and yarn:
	```sh
	npm i -g typescript yarn
	```
6. Create a new python virtual environment and install pip modules:
	```sh
	python -m venv venv
	source venv/bin/activate
	pip install -r requirements.txt
	```
7. Install node modules:
	```sh
	yarn
	```
8. Build voerbak:
	```sh
	cd voerbak
	make
	```
9. Initialize database:
	```sh
	cd database
	./init_db.sh
	```

## How to start

In order to start this project you'll need three terminal windows to start the flask server, react server, and nginx seperately:

```sh
# term 1
source venv/bin/activate
python3 api/main.py

# term 2
yarn dev

# term 3
sudo nginx -c $PWD/nginx.conf

# if nginx can't run as the user nobody, try running the following command and restart nginx:
sed "s/user nobody/user $(whoami)/" -i nginx.conf
```