Cloud Resume Challenge

#vue #azure #terraform #playwright

How can you call yourself a civil engineer when you don't own a house?

I still remember my mom scolding my brother then, while I laughed by the side. Several years later, it's now a quote that applies to me. I'm a developer without a website. Of course, things are slightly different. For instance, a website doesn't cost me an arm and a leg to buy. Compared to that, I've got pretty much no excuse not to make one. Rather than simply make it, I thought I'd take on the cloud resume challenge and learn some new skills along the way. Look at my resume live here.

The Cloud Resume Challenge is a 16-step hands-on project of making and deploying your own resume website, utilizing many of the skills Cloud and DevOps engineers use daily. Instead of going through each step, we'll group them up and tackle them as 4 modules: Frontend, Backend, CI/CD, and Provisioning.

1. Frontend

The challenge doesn't require a deep delve into design, but if it's going to have my name attached to it, I should at least make it presentable. I thought I'd take the opportunity to learn Figma. Figma was quite fun, it's like React for designers. It uses component-based architecture which makes it intuitive. Even so, I'm not very good at designing. I took a lot of inspiration from other developer websites, and still, it took me a week to finalize my design.

I chose Vue.js for my front-end framework simply because I already use React in my work. I've used it once before and it has its similarities with React so it wasn't hard to pick back up. I find CSS challenging, so I also took the opportunity to learn Tailwind. It made styling much easier, although I imagine it can be quite confusing having so many class names on an object. Tailwind also defines custom colors for theming which made adjusting the palette a simple task.

I wanted to make it easy to adjust the resume without delving into code, so I've set it up as a json file along with any images inside the public folder.

After setting up the website, it was now time to deploy it. I used a lot of Azure's technologies in the challenge simply because I'm planning to take some Azure certifications (which were free to renew) in the future. As such, the website was deployed on Azure Blob Storage as a static website. I also bought a domain name off Namecheap and set it up on Cloudflare for free CDN. Linking the two was easy via custom domains on Azure Storage.

2. Backend

Rather than just a static website, the cloud resume challenge calls for a view counter which means we'll need to store that count somewhere and have a way to update and view it. I used Azure Functions and Azure CosmosDB to set up an access endpoint to store and access the counter.

3. CI/CD

Ideally, you've set up version control from the start of the project. This step calls for pushing that to the cloud and starting a pipeline to deploy the new version. I wanted my code publicly available, and so chose GitHub and GitHub Actions for CI/CD.

Github builds the frontend and backend code and uploads them to Azure Storage and Azure Functions. Unit testing via xUnit is also being executed to test count increment logic, and Playwright was triggered by Github Actions after deployment to test whether the app loads and shows accurately increasing view count.

4. Provisioning

After confirming that all was working with manually set-up resources, it was time to try making it automatically with Infrastructure as Code.

I used Terraform as it's quite popular. Terraform is well documented and has a long list of resources it can provision. For comparison, I kept the Azure resources built manually and created new ones through Terraform. Cloudflare DNS records are also updated to ensure custom domain is set up. Lastly, I added Terraform to Github Actions, which also proved challenging. When running from Github, Terraform seemed to always complain that the resource already existed. Turns out Terraform works with a state file that should be stored remotely to be accessed and updated by everyone.

Conclusion

It took me 3 weeks to complete the challenge. Based on your skill level, it may take you longer or shorter. Nevertheless, I do recommend you take on the challenge when you have the time. Whether you're planning to go into cloud development or not, it's without a doubt that technology is moving towards the cloud. It's a great experience to learn the foundation of tomorrow's systems.

If you're ready to do the challenge and looking for more in-depth examples, you can check out my Figma design, Github code, or the website itself!