Creature Coders with CI/CD Pipeline
About Creature Coders
Creature Coders is a learn-to-code game developed for the iPad or tablet designed with a 90’s aesthetic and was originally built by Kendall Perry, Angel Robish, Caitlin Sherman, and Hannah Sommer. The game is designed for people ages 10 and up since a certain level of reading comprehension and an understanding of some math concepts is necessary.
To play Creature Coders, each user picks a pet avatar and traverses the levels on our subway map inspired by NYC. The beginning games focus on logic and basic concepts, and the later games bring in some JavaScript syntax while learning how to code in a fun and intuitive way.
After you win each game, you’re rewarded with points and “PidgeCoins”, which you can use to buy hats in the hat shop.
Tech stack used to build Creature Coders
On the back end, Creature Coders uses Node.js, PostgreSQL for the database, Sequelize, and Express.js for our API routes.
On the front end, we used React.js with Axios to make HTTP requests to our API routes, Redux for state management, Styled Components to style the app, as well as Blockly, a library from Google. Blockly allows you to create custom blocks that store code. Like puzzle pieces, once the blocks fit together, the code will run in an isolated environment through JS Interpreter. In Creature Coders, once the blocks successfully run their custom code, something happens and you progress to the next level!
Architecture
Deploying a React app with Docker on AWS ECS using a pipeline with GitHub Actions is a great way to automate the deployment process and ensure that your app is always up-to-date.
Why use Docker?
Using Docker to deploy your React app has a number of benefits. First, Docker allows us to package our app and its dependencies in a single container, making it easy to deploy and run in a variety of different environments. Additionally, Docker makes it easy to update the app by simply rebuilding the image and deploying the new version.
Why use Elastic Container Service?
AWS ECS is a highly scalable and highly available service that makes it easy to deploy, run, and scale containerized applications. By using ECS, we can ensure that your app is always up-to-date and can automatically scale to handle increased traffic. Additionally, ECS integrates with other AWS services, such as Elastic Load Balancing and CloudWatch, making it easy to monitor and troubleshoot your app.
CI/CD Process
CI/CD (Continuous Integration/Continuous Deployment) is a software development practice that involves regularly integrating code changes into a central repository, and automatically building and deploying the code to a production environment. Our process includes several steps:
One of the steps is to create a Dockerfile. This file will contain the instructions for building the Docker image of your app. In this case, the docker image is a Ubuntu VM running an Apache server with our app.
Also, we have to define the task definition. This is a JSON file that describes how your app should be run on ECS. The task definition should include information such as the Docker image to use, the amount of memory and CPU to allocate, and the command to run the app.
In conclusion, deploying our app with Docker on AWS ECS using a pipeline with GitHub Actions is a great way to automate the deployment process and ensure that the app is always up-to-date. By using Docker and ECS, you can ensure that your app is easily scalable and can be run in a variety of different environments. Additionally, using GitHub Actions to automate the deployment process makes it easy to keep your app up-to-date and handle increased traffic.
Testing
Headless browser testing in Selenium is not only more time efficient, but it is also a necessary way of running tests when using GitHub actions. That is because when you run a test locally, you are able to use Selenium to open up a browser, run the necessary tests, and then end the testing session by closing that browser window.
But when using GitHub actions, GitHub creates a virtual machine for quick testing. Therefore this virtual machine does not have a GUI (Graphical User Interface) for running those tests. This is where Selenium can perform those same tests that were performed locally, except this time in headless mode. This means faster testing because there is no need to open and close a browser for testing. Plus testing gets triggered when you choose and are done automatically.
Creature Coders App Demo
Local Installation
Steps to run Creature Coders locally!
- Clone our repo into a new directory.
- Create Postgres database creature-coders
- Fill the .env file with the credentials for the database
- docker build. -t creature-coders
- docker run -p 8080:3000 -d creature-coders
- If you need to seed the database run:
- docker exec -it creature-coders npm run seed
- Once your server is up and running, check out http://localhost:3000/ and enjoy! 🦝
Log in as a seeded user:
- To log in as a registered user, you can use the username: Grace, and password: 123 for access to all games and levels.
- For a user mid-way through levels, you can log in as username: Pippin, password 123.
Sign up as a new user:
- You can sign up as a new user, you will then be taken to choose your pet!
- Select a pet of your choice from the drop-down menu. Roll the dice 🎲 until you get a name you like!
- You will have access to the first two tutorial levels from the map 🗺, but will need to pass each level to gain access to future levels! 🏆
Team Error 007 Authors
Julian Martos: LinkedIn, GitHub
Eli Meyer: LinkedIn, GitHub
Kendall Perry: LinkedIn, GitHub
Peter Torres: LinkedIn, GitHub
GitHub Repo: https://github.com/strategio-tech/fp-sim6-error-007
Credits
Creature Coders was originally created and built by Angel Robish, Caitlin Sherman, Hannah Sommer, and Kendall Perry. Check out the original Creature Coders repo here.
If you’d like to see a current deployment of the app, check out Creature Coders here. (The first time rendering the page will take a few moments.)
