Merge pull request #3 from briancaffey/dev

feat(article): update article and add links

Author: briancaffey

ARTICLE.md

@@ -9,41 +9,45 @@ tags: redishackathon, redis, flask, socketio
 
 I recreated the game "Red Light, Green Light" using Python, TypeScript and Redis!
 
-One day in early August I was browsing Dev.to while re-watching MrBeast's Squid Game recreation video in the background when I cam across the DEV article about the Redis Hackathon. Then I got a crazy idea: **Redis Light, Green Light**! I became determined to create my own online, real-time, multi-player version of Red Light, Green Light powered by Redis and submit it to the Wacky Wildcard project category for my chance to win the hackathon!
+One day in early August I was browsing DEV while re-watching MrBeast's Squid Game recreation video in the background when I cam across the DEV article about the Redis Hackathon. Then I got a crazy idea: **Redis Light, Green Light**! I became determined to create my own online, real-time, multi-player version of Red Light, Green Light powered by Redis and submit it to the Wacky Wildcard project category for my chance to win the hackathon!
 
 I used my favorite languages and frameworks for rapid prototyping: Python with Flask to power the backend and TypeScript with the Nuxt.js framework to build the frontend components for my game.
 
-For real-time communication I added the `Flask-SocketIO` library to my Flask app and the `socket.io-client` library to my Nuxt app. I also added celery for scheduling and processing async tasks (more on this later). Redis was used as the message queue for websocket messages and it was also used as the broker for celery tasks.
+For real-time communication I added the `Flask-SocketIO` library to my Flask app and the `socket.io-client` library to my Nuxt app. I also added celery for scheduling and processing async tasks. Redis was used as the message queue for websocket messages and it was also used as the broker for celery tasks.
 
-`redis-py` was used to get and set hash values that kept track of live game data in Redis. Redis streams were used as a way to track all events for a historical record of every action in every game.
-
-Like I do with most of my projects, I used `docker-compose` to set up the backend application services and database and I used Nuxt's `npm run dev` command to work on the UI.
+This was my first project working with Redis Stack and Redis OM and I really liked using these tools. I stored most of my data in hashes, and the Redis OM library is perfect for using this data type. I also used Redis streams for the first time which was a lot of fun.
 
 The backend application services include:
 
 - Flask server (for API endpoints and Websocket handlers)
 - Celery beat task scheduler (for scheduling tasks to change the light color in each room)
 - Celery worker (to change the light color for a room and to update that players in that room via Websocket)
 
+![Project Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0egpm1igfqyon5kjtujv.png)
+
+Please check out the video below for more details about how the project works.
+
 ### Submission Category
 
 Wacky Wildcards
 
-### [Optional: Video Explainer of My Project]
+### Redis Light, Green Light YouTube Video
 
-[Note]: # (This is where you can embed the optional bonus video you created to accompany your submission. Ensure your video is published publicly to YouTube and you’ve used the embed tag here to share it with us. By opting to include a video, you will be eligible for BONUS prizes. Learn more in the announcement post.)
+{ % youtube BoalZKmgoEU %}
 
 ### Language Used
 
-Python
+Python. Honorable mention for JavaScript.
 
 ### Link to Code
 
 {% embed https://github.com/briancaffey/redis-light-green-light-dev-to-hackathon %}
 
 ### Additional Resources / Info
 
-[Note:] # Screenshots/demo videos are encouraged!
+![Redis Light, Green Light](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3rqy7eqz40nqk1e04jj.png)
+
+![Redis Light, Green Light gameplay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkmgiz8wtq484rn6dmfc.png)
 
 - - -
 

Makefile

@@ -1,36 +1,61 @@
-# for local development
-
-dcud:
-	docker compose -f docker-compose.dev.yml up
-
-dcdd:
-	docker compose -f docker-compose.dev.yml down
-
-dcug:
-	docker compose -f docker-compose.gunicorn.yml up
-
-dcdg:
-	docker compose -f docker-compose.gunicorn.yml down
-
-# for terraform
-
-tf-init:
-	terraform -chdir=terraform init
-
-tf-plan:
-	terraform -chdir=terraform plan
-
-tf-apply:
-	terraform -chdir=terraform apply
-
-tf-fmt:
-	terraform fmt -recursive
-
-tf-destroy:
-	terraform -chdir=terraform destroy
-
+# docker-compose
+
+# start the backend services (flask, celery, celerybeat, redis-stack)
+docker-compose:
+	@docker-compose up --build
+
+# start the client
+nuxt:
+	@cd client && npm i && npm run dev
+
+# for local development if not using docker-compose to stat the backend services
+
+# check versions of locally installed tools
+check:
+	@docker -v; echo
+	@docker-compose -v; echo
+	@python3 --version; echo
+	@echo Node `node -v`; echo
+
+# stand up only redis stack
+redis-stack-up:
+	@docker-compose -f redis-stack.yml up
+
+# install dependencies in a python virtual environment
+install_dev:
+	@rm -rf app/.env
+	@python3 -m venv app/.env
+	@. app/.env/bin/activate
+	@python3 -m pip install --upgrade pip
+	@pip install -r app/requirements.txt
+	@pip install -r app/requirements_dev.txt
+
+# delete the python virtual environment
+clean:
+	@rm -rf .env
+
+# start the flask app (api and websockets)
+flask:
+	@. app/.env/bin/activate
+	@cd app && gunicorn -k geventwebsocket.gunicorn.workers.GeventWebSocketWorker -w 1 wsgi:app --reload
+
+# start the celery worker
+celery:
+	@. app/.env/bin/activate
+	@cd app && celery --app app.celery worker --loglevel=info
+
+# start the celerybeat process
+celerybeat:
+	@. app/.env/bin/activate
+	@cd app && celery --app app.celery beat --loglevel=info
+
+# delete all keys from all redis databases
+flushall:
+	@docker exec -it redis redis-cli flushall
+
+# count lines of code
 cloc:
 	cloc \
 		--exclude-dir=$$(tr '\n' ',' < .clocignore) \
 		--exclude-ext=json \
-		.
+		.

README.md

@@ -1,20 +1,49 @@
 # Redis Light, Green Light
 
-This project is an online multiplayer implementation of the game "Red Light, Green Light" using Python, Javascript and Redis. This is my submission for the 2022 [Redis Hackathon on DEV](https://dev.to/devteam/announcing-the-redis-hackathon-on-dev-3248)
+This project is an online, multiplayer implementation of "Red Light, Green Light" from Squid Game built with Python, Javascript and Redis. This is my submission for the 2022 [Redis Hackathon on DEV](https://dev.to/devteam/announcing-the-redis-hackathon-on-dev-3248)!
 
 ### Gameplay
 
 ![Redis Light, Green Light Gameplay](/images/gameplay.png)
 
-### Game event log
+### Game event log built with redis streams
 
 ![Redis Stream data](/images/events.png)
 
+### Architecture Overview
+
+![Project Architecture Diagram](/images/rlgl.drawio.png)
+
+## Code Overview with `cloc` (count lines of code)
+
+```
+make cloc
+
+github.com/AlDanial/cloc v 1.94  T=0.03 s (1102.7 files/s, 67098.7 lines/s)
+-------------------------------------------------------------------------------
+Language                     files          blank        comment           code
+-------------------------------------------------------------------------------
+Vuejs Component                 13            104             14            528
+Python                           3            178            104            410
+Markdown                         5            139              0            272
+YAML                             3             10              0             83
+make                             1             10              2             34
+SVG                              2              0              0             22
+TypeScript                       1              1              1             22
+CSS                              1              4              0             18
+JavaScript                       1              0              1             18
+Text                             2              0              0             13
+Dockerfile                       1              8              0             12
+-------------------------------------------------------------------------------
+SUM:                            33            454            122           1432
+-------------------------------------------------------------------------------
+```
+
 # Overview video
 
 Here's a short video that explains the project and how it uses Redis:
 
-[![Embed your YouTube video](https://i.ytimg.com/vi/vyxdC1qK4NE/maxresdefault.jpg)](https://www.youtube.com/watch?v=vyxdC1qK4NE)
+<iframe width="560" height="315" src="https://www.youtube.com/embed/BoalZKmgoEU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## How it works
 
@@ -37,7 +66,7 @@ class Position(HashModel):
     room: uuid.UUID = Field(index=True)
 ```
 
-RedisOM is used to perform CRUD (create, read, update and delete) operations on these hashes in API requests, websocket handlers and celery tasks. Here are some examples:
+Redis OM is used to perform CRUD (create, read, update and delete) operations on these hashes in API requests, websocket handlers and celery tasks. Here are some examples:
 
 **Creating a new room**: `CREATE operation` on `Room` hash
 
@@ -61,17 +90,17 @@ There are **eight** types of events that can happen in the lifecycle of a game:
 
 ```py
 class EventType:
-    CREATED = "created"
-    LIGHT = "light"
-    JOIN = "join"
-    MOVE = "move"
-    WIN = "win"
-    DIE = "die"
-    LEAVE = "leave"
-    END = "end"
+    CREATED = "created" # new game room is created
+    LIGHT = "light" # the light color is updated
+    JOIN = "join" # player joins a room
+    MOVE = "move" # player moves successfully when the light is green
+    WIN = "win" # player wins by moving 100 steps
+    DIE = "die" # player tries to move when the light is read
+    LEAVE = "leave" # player leaves or is disconnected from the game
+    END = "end" # game ends because there are no more players in the room
 ```
 
-I use streams as append-only logs to persist very action that happens during the course of a game. Here are some examples of how I store game event data in streams:
+I use streams as append-only logs to persist very action that happens during the course of a game. Each event in the stream has an `event` property that stores one of the `EventType`s listed above. Here are some examples of how I store game event data in streams:
 
 **Record a room creation event**
 
@@ -115,9 +144,13 @@ To display all events for a given room, the `XRANGE` command is used to fetch al
 events = om_redis_conn.xrange(f"stream:room:{room}", min="-", max="+")
 ```
 
+### Indirect usage of Redis
+
+In addition to storing temporary game state and append-only event logs, Redis also supports the application as a message broker for the celery worker and scheduler, and it supports the SocketIO as a message queue which is required when there are multiple servers process (Flask, celery, celerybeat). Main application data is stored on DB index `0`, and these other services use other DB indexes for isolation and separation of concerns to the extent that it makes sense.
+
 ## How to run it locally?
 
-Running the application in a local development environment involves starting the web client and also starting multiple backend services. Backend services can be brought up using a `docker-compose.yml` file or they can be started by running commands in Python virtual environment.
+Running the application in a local development environment involves starting the web client and also starting multiple backend services. Backend services can be brought up using a `docker-compose.yml` file or they can be started by running commands in a Python virtual environment.
 
 ### Prerequisites
 
@@ -129,11 +162,25 @@ To run the backend locally with docker and docker-compose you will need:
 
 - docker 20.10.14+
 - docker-compose 1.29.2
-- Python 3.9 (if not using docker)
+- Python 3.9+ (if not using docker)
+
+Run the following command to check your local versions:
 
-Recommended:
+```
+make check
+```
+
+It should show something like:
+
+```
+Docker version 20.10.14, build a224086
 
-- Redis Insights
+docker-compose version 1.29.2, build 5becea4c
+
+Python 3.10.2
+
+Node v16.16.0
+```
 
 ### Local installation
 
@@ -179,6 +226,8 @@ Next you can start the three services in different windows. Before starting each
 source .env/bin/activate
 ```
 
+For advanced usage, please see the [`Makefile`](/Makefile) which has some helpful targets for starting different parts of the application (redis-stack, backend services and client).
+
 **Start the Flask API server**
 
 ```
@@ -253,6 +302,4 @@ Before starting `celerybeat`, make sure that you have deleted a file called `cel
 
 The client runs on `http://localhost:3000`. It makes API and websocket connections with the backend which runs on `http://localhost:8000`.
 
-## Deployment
-
-To make deploys work, you need to create free account on [Redis Cloud](https://redis.info/try-free-dev-to)
+Please see the [Makefile](/Makefile) for a full list of commands for running the application locally.

app/celerybeat-schedule.db

@@ -61,17 +61,5 @@ services:
       - "8001:8001"
     container_name: redis
 
-  nginx:
-    container_name: nginx
-    build:
-      context: ./nginx
-      dockerfile: dev/Dockerfile
-    ports:
-      - "80:80"
-    depends_on:
-      - app
-    volumes:
-      - ./nginx/dev/dev.conf:/etc/nginx/nginx.conf:ro
-
 volumes:
   redis-data1:

docker-compose.yml

@@ -13,9 +13,12 @@
     "redis_features": ["queue", "messaging", "streams"],
     "redis_modules": ["RedisSearch"],
     "app_image_urls": [
+        "https://res.cloudinary.com/practicaldev/image/fetch/s--391EQ1p1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3rqy7eqz40nqk1e04jj.png",
+        "https://res.cloudinary.com/practicaldev/image/fetch/s--ezf1ssyt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0egpm1igfqyon5kjtujv.png",
+        "https://res.cloudinary.com/practicaldev/image/fetch/s--uD8xn_Xp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkmgiz8wtq484rn6dmfc.png"
     ],
-    "youtube_url": "",
-    "special_tags": ["Hackathon", "RedisOM"],
+    "youtube_url": "https://www.youtube.com/watch?v=BoalZKmgoEU",
+    "special_tags": ["Hackathon", "Redis OM"],
     "verticals": ["Gaming"],
     "markdown": "https://raw.githubusercontent.com/briancaffey/redis-light-green-light-dev-to-hackathon/main/README.md"
 }