aakanksha-k / DinoGame-Clone

A Chrome Dinosaur Game clone built as a web application on React. It is deployed on AWS Elastic Beanstalk using Docker and Docker Compose, with a complete CI/CD workflow using GitHub Actions.

Dino-Game-Clone

Description

This is a clone of the Chrome Dino Game built as a web application on React. It is deployed on AWS Elastic Beanstalk using Docker and Docker Compose, with a complete CI/CD workflow using GitHub Actions.

Architecture

Technologies used 🛠

React
Nodejs
Github Actions
Docker
Docker Compose
AWS ElasticBeanstalk

Deployment

Step 1: Setting up Dinosaur Game clone as React web application

1. Create a new React project using commands: npx create-react-app (app-name)
cd (app-name)

2. Install necessary dependencies: npm install styled-components
npm install @react-spring/web

3. My Project Structure overview on VS Code:

5. Game Components

Create Game.js file to manage the game state and render other logical components like, Obstacle Spawning, Collision Detection.

Create Dino.js to represent the dinosaur avatar and handle jumping over the said obstacles.

Create Obstacle.js to represent obstacles and manage their movement.

Integrated the above components in App.js

5. Testing Run the application to test all game mechanics using:
   npm start

Ensure the development server starts correctly and the game functions as expected on the local browser.

Step 2: Developing React app inside Docker container

1. Run the command in an empty directory in VS Code to run a container of nodejs docker run -it -v$(PWD:/app -p 3000:3003 node16.20.2 sh)

2. Go inside docker container using cd app

3. Initialise a new react application using npx create-react-app .

4. Once initialized, add all the components & files, of Dino Game clone from the earlier directory.

5. Ensure react application is running correctly on the local browser

Hence, a basic react web application is successfully built inside the docker container.

Step 3: Containerizing the app using Docker + Docker Compose

1. Exit from the docker container using command exit
2. Create a Dockerfile for production
3. Create a docker-compose.yml file, such that it can run the images from Dockerfile as a container on the main, Elastic Beanstalk server
4. Test the build on local machine using docker-compose up --build
   

Step 4: Configuring AWS Elastic Beanstalk

1. Create a sample web application & it’s environment using the AWS EB console

Step 5: Deploying the custom application on AWS EB with CI/CD workflow using Github actions

1. Create .github/workflows folder in your local repository & add deploy-aws.yml file, including the triggers, branches & actions

2. Commit & Push the repo to GitHub as ‘Deploy React to AWS EB’

3. Once workflow is successfully executed & the custom, DinoGame Clone web application is deployed to AWS EB, check the domain from AWS EB console.
   

👩‍💻Icons credits: here