Cloud Resume Challenge

Personal Reflection

Front End — HTML & CSS

Before completing this challenge, I had no prior knowledge of HTML or CSS. I was able to look at a few examples of static websites online and utilize developer tools through Chrome to parse out the code. I used ChatGPT to help me clarify some more complex concepts I wanted to integrate into my website. This portion of the project was very enjoyable to me because I was able to have complete creative liberty with my website design.

Although this was not a part of the challenge itself, I took this opportunity to teach myself about responsive web design and integrated this into my CSS. If I spent all this time learning how to make it appear nicely on a laptop… I might as well make it look good on a mobile device, too! To differentiate the sizes, I set media queries to define a smaller screen as one with a max-width: 768px.

Static S3 Website

Next, I bought my domain name from the NameCheap website. After acquiring this domain, I logged on to AWS and used Route53 to create a hosted zone and an NS record using my name server URLs. Afterward, I created an A record and S3 bucket for mayahbosworth.com and then another A record and S3 bucket for www.mayahbosworth.com (which is empty). These S3 buckets contain the HTML, CSS, JS, and images used for my website. I found it very helpful to create separate folders for each object to keep all my files organized and easily accessible. I also enabled static website hosting so the website is publicly accessible. The reason for adding these two separate A records was to ensure that users would be directed to my website despite how the URL is typed into the search bar.

After completing this, I went to CloudFront to set up my CDN. I acquired an SSL certificate from the AWS certificate manager to ensure that my website was secure and resolved to HTTPS. After validating this certificate, I added it to my hosted zone. When completing this portion of the challenge, I learned the importance of securing your website and how redundancy is essential to improve accessibility.

Back End — DynamoDB, Lambda, API Gateway

Configuring the backend of my website was the most challenging part of this process for me. My first step was to create a visitor_count table in DynamoDB, a NoSQL database that stores my website visitor count. I then had to develop a Lambda function and API gateway to connect this database to my website. Without getting too technical, the Python written for my Lambda function accomplishes the following: 1. Connect to the DynamoDB resource 2. Create a DynamoDB client for the visitor_counter table 3. Increment visitor_counter for index.html 4. Get visitor_count from the visitor_count table for index.html 5. Display visitor_count on the website page. After assigning this function to the correct IAM user, I navigated to API Gateway.

Creating the API stumped me for a while, but after an extensive amount of troubleshooting and research, I was able to implement it correctly on my website. To build the HTTP API, I configured it to integrate my Lambda function. After completing these steps on AWS, it was then time to include my function in my index.html document. To do this, I created a separate JavaScript file that called my Lambda function (using the function’s URL). After making this file, I called it in the head portion of my index.html and then printed it at the bottom of my page, which allows the user to view the updated numbers.

After this step, I thought I was in the clear. However, I experienced a lot of trouble having the visitor count show up on the page. The problem I faced was that I could see the text before the function (“Updated Page Visitor Count:), but no number would appear even after uploading the new .js and index.html files. I went over every step again (creating the table, writing my Lambda function, and checking my API configuration).

No matter what I tried changing, nothing seemed to be working. After researching the issue for about 2 hours, I found that looking at the developer tools and inspecting my website would be most helpful. The first error I saw was with the .js file not being found. Instead of calling the visitorCounter() function, I was calling a visitorCount() function (which didn’t exist). Then, I looked at my index.html code and found that I had not included the code allowing dynamic changes to appear on my website. Once I figured this out, I was confident that my website would work as intended.

However, once again, the updated count would not show.

Eventually, I learned about the importance of invalidations on CloudFront… After passing the /* invalidation and deploying my Lambda function again, my website finally showed the updated visitor count! After completing my website, I uploaded my source code to GitHub repos for easier version control and accessibility.

Conclusion

Overall, I am very proud of myself for being able to complete this challenge. I took my time at every step to understand what was happening in the background on a deeper level. I quickly realized that AWS makes it so easy to click a bunch of buttons without really understanding what is occurring. This is, of course, done for a simple UI but might cause beginners to struggle with grasping the pathway that AWS configures for them. All in all, this challenge was one of the most beneficial learning experiences I have had throughout my academic career, and I am so excited to implement this knowledge to complete projects in the future!