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,4 +1,14 @@
-# for local development if not using docker-compose to star the backend services
+# 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:
@@ -7,9 +17,11 @@ check:
 	@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
@@ -18,27 +30,30 @@ install_dev:
 	@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
 
-nuxt:
-	@cd client && npm i && npm run dev
-
+# 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) \

README.md

@@ -43,7 +43,7 @@ SUM:                            33            454            122           1432
 
 Here's a short video that explains the project and how it uses Redis:
 
-[[ Coming soon ]]
+<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
 
@@ -66,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
 
@@ -301,3 +301,5 @@ Configuration ->
 Before starting `celerybeat`, make sure that you have deleted a file called `celerybeat-schedule.db`.
 
 The client runs on `http://localhost:3000`. It makes API and websocket connections with the backend which runs on `http://localhost:8000`.
+
+Please see the [Makefile](/Makefile) for a full list of commands for running the application locally.

marketplace.json

@@ -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"
 }