DEV Community

Cover image for Cloud Resume Challenge
Brandhang34
Brandhang34

Posted on

Cloud Resume Challenge

Introduction

A couple months ago, I found the Cloud Resume Challenge on Youtube while searching for projects that I could part take in. Initially I wanted to find a project that could jump start my career into the cloud after I had completed the AWS Cloud Practitioner certification. As I progressed, I realized how difficult this challenge was and what caught my eye was writing Infrastructure as Code(IaC). At first going through the console was fairly easy, but being told that I had to restart and deploy all of my resources through code was quite devastating. However, I was determined to complete the challenge and hoped that the knowledge I had gained can be used in my future career.

The Challenge

The Cloud Resume Challenge, created by Forrest Brazeal, has given me the opportunity to create a resume/portfolio web application on AWS. The challenge consisted of building a personal resume website that would increment the number of users that have visited the page. It also consisted of a backend in which I have created to automate the entire development process using CI/CD and Infrastructure as Code. More information about the challenge can be found here.

CRC

Frontend

So for the frontend portion, I had to create a website that would like a resume. I thought that would be a bit plain so why not create a portfolio website where new comers have the option to download a PDF of my resume. The website was entirely written in HTML, CSS, and JavaScript and hosted onto a static s3 bucket. I wanted to utilize the basics because that's the only knowledge I really have. The website also has a counter for the number of users that have visited the website. Every refresh increments the counter that is pointed to a DynamoDB table. Finally I also implemented a email contact form. This wasn't apart of the challenge but I wanted to add something extra to my website. It utilizes Amazon SES to send out the user generated email out to me.

Checkout the frontend GitHub repository where I hold all of the files.

Front End Architecture

Backend

I thought that this part of the challenge was pretty difficult. Incorporating the lambda functions were fairly easy, but trying to automate everything using Terraform and GitHub actions was some thing that was new to me.

Backend Architecture

For the user counter, I wrote some JavaScript that triggers the API every time the page is loaded. The API runs the lambda function and tells the DynamoDB table to increment the counter.

User Counter

Although the email form wasn't apart of the challenge, I wanted to add the extra bonus to my website and gain more insight on lambda and other possible AWS services. The process is very similar except that it sends user generated data to the lambda function (written in JS) and sends the email.

Contact Form

CI/CD

Next was to automate both the backend and frontend. I was experimenting with GitHub Actions and realized how much of a powerful tool it is. I was able to deploy infrastructure, write unit tests and run AWS commands.

For the frontend, the pipeline ensured that the newly updated files are pushed into the S3 bucket and invalidates the cloud front distributions. This will make sure that cloud front has removed all of the old files that were cached.

GitHub Actions Front End

For the backend, I wrote some python unit tests that checks all of the functions that the website is supposed to perform. Every time I push the code into the repository it also deploys the entire infrastructure in AWS.

Checkout the backend GitHub repository

Closing Thoughts

Checkout my portfolio website here: brandonhang.co

I want to thank Forrest Brazeal for this opportunity and creating a community where new Cloud users can communicate and help each other. The experience after completing each section is very rewarding and after sacrificing a few nights, it was definitely worth it seeing the end result.

Connect with me:
https://www.linkedin.com/in/brandon-v-hang/
https://github.com/Brandhang34

Top comments (0)