Jason Y. Liu

Jason Y. Liu

CRC Challenger

Introduction

I recently came across The Cloud Resume Challenge by Forrest Brazeal and thought it's a pretty cool side project. To have the certifications and knowledge is admirable, but to also do the hands-on, build and debug, is respectable.

To go through my own "baptism by fire", I got started and created this completely serverless site.

It has a static frontend, a dynamic backend for counting the number of visitors (bottom of this page), and a DevOps pipeline to automate deployment.

How I Built This

0. PlanningπŸ‘‡

~ 5 hours

There is a saying in Chinese, δΈ‡δΊ‹εΌ€ε€΄ιšΎ, which roughly translates to everything is hard in the beginning, and it is the same for this project as well. With the minimalistic outline of the challenge, I was scratching my head on where to begin.

I took some time to understand the overall architecture needed and trodded on looking for a good HTML + CSS template.

1. HTML and CSS Front-endπŸ‘‡

~ 10 hours

No beating around the bush - of cause I took a ready-made template, but while adding in the content, I figured instead of making it a duplicate of my LinkedIn page, why not outline my journey towards full-stack web development, as I develop this site? So over a couple of days in the evenings after work, I worked on getting the setup right.

This involved tweaking the HTML and CSS codebase, setting up a domain and hosted zone within Route 53, and configuring S3 static site hosting.

With a publicly accessible HTTP site, now it's time to make it a speedier HTTPS.

2. CloudFrontπŸ‘‡

~ 2 hours

Security is job zero, and one way to make my site more secure is by using CloudFront, which also speeds up the delivery of the site to the end-users. Two birds with one stone!

The new CloudFront portal is surprisingly easy to use. I also activated AWS Certificate Manager as part of getting the TLS/SSL.

As I make changes to my code, some routine tasks such as logging in, file uploading etc became more of a chore, and I realised the need for automation for the front-end through some CI/CD.

3. Front-end automation CI/CDπŸ‘‡

~ 5 hours

With a minimal working knowledge of Git and GitHub before I started this pet project, this step could have been unimaginable. XD

Through GitHub Actions, local changes are uploaded to S3, and the existing Cloudfront cache is invalidated.

You may check out the GitHub Actions YAML script here.

4. Visitor counterπŸ‘‡

~ 20 hours

Now we come to building the backend of this site!

How this setup works is through a short javascript script on this page, querying the REST API endpoint on API Gateway. This triggers a Lambda function written in Python that updates and returns the visitor number from a DynamoDB table.

The beauty of this is at the scale of this site, the stack is practically free!

5. Back-end CI/CD with SAMπŸ‘‡

~ 20 hours

In step 4, while I orchestrated the back-end successfully using mainly the AWS management console, it will definitely be cooler if I can do all these automatically without logging in to the console!

Never did I know it takes several software applications to be able to use SAM - namely AWS CLI, AWS SAM CLI and Docker (and Python), and it's a learning experience to pick up all of them. Thankfully with SAM, it automates the following deployment steps: build, zip code, upload to S3, create role, create/update function, create REST API, create resource, create method, update integration and create table.

After some debugging, I finally managed to set up the back-end in an efficient CI/CD manner!

6. TestsπŸ‘‡

~ 10 hours

This might be the hardest portion of the challenge, as I didn't realise testing is quite an extensive realm of its own. There are unit tests, integration tests, end-to-end tests/smoke tests, testing with mock AWS services using a library called moto etc.

I tried Cypress as an end-to-end test, and I know there can be so much more to it. Definitely hope to get a better understanding of the testing scene in the future but for now, my tests are completed successfully.

7. ReflectionsπŸ‘‡

~ 1 hour

What a journey it is to take on this challenge, and I'm so glad I made something on my own and learnt a ton in the process!

There are a few relevant traits to complete this challenge successfully, [1] to be purposeful with our learning outcomes; [2] to be good at problem-solving (to learn fast and google well!); [3] to be patient.

If I were to do this again, being more informed I will certainly plan better in terms of timelines and expectations. There were times where I got rather stressed and disheartened when I thought I can finish some tasks easily and quickly when in fact there are more complexities involved. This will be applicable especially when a project involves working with teammates, and good coordination and communication are needed.

Key Skills

  • FinOps
  • FP&A for IT
  • Solutions Architecting
  • Pre-sales
  • YAML
  • JSON
  • Javascript
  • Python
  • HTML & CSS

Education

Nanyang Technological University

Bachelor of Accountancy (Honours with Distinction)

Our contribution to the Metaverse, a VR gaming chair - Enjoy!