Clouds and cages.

After 5+ years of being a backend DB2/Mainframe support engineer, I wanted to gain a deeper understanding, of front-end web development and AWS. After completing my AWS (Developer & Architect) Associate level certifications, I felt confident in trying out some practical stuff.
I came across a LinkedIn post saying something about a #CloudResumeChallenge by Forrest Brazeal and decided to give a try. https://cloudresumechallenge.dev/instructions/
The headline of this article is not an analogy for Cloud and Legacy systems, both are elegant, both will last.
It rather signifies the combination of JavaScript and API calls.
So here is the site I created:

www.komlalebu.com

It is basically my uninspiring resume hosted in S3. But what is inspiring is that visitors can leave a like (or dislike) at the bottom of the page. The feedback data is the stored in a DynamoDB table, with the wizardry of API Gateway & Lambda.
There is a visitor couter on the left which is a CountAPI JS.

The (Visitor number + Feedback) is stored in ID field, field 2 is timestamp. However nothing is stored without an onclick API call.
The architecture diagram of the project is shown below, with the users accessing the site from R53 from a AWS hosted domain. Yes the AWS account belongs to me. Sometimes the AWS monthly forecasted cost freaks me out, however it is usually inaccurate.

The plan was to setup up the S3 static website in Cloudfront distribution, with SSL certificate obtained from ACM, and putting the Cloudfront domain as an Alias for my hosted domain : www.komlalebu.com.
However this did not work work for me as I was getting 403 error(possibly something to do with bucket policy)
Cloudfront domain: https://d1cs****jgtcb8.cloudfront.net.
But I managed to assign the S3 static website URL to a CNAME for my sub-domain: blog.komlalebu.com

Here is a look:

The name of my bucket is blog.komlalebu.com, where index.html, error.html, style.css and the website image files are stored.
These may be redundant information for the pros but this is my blog.

Coming to the API Gateway & Lambda integration, whenever a visitor decides to like/dislike the website, an API call is made to the Lambda function using JS.
The API gateway does a POST on Lambda, where a Python script is used with Boto3 functionality to save the call (JSON string) in DynamoDB, and provide appropriate feedback to the webpage.

The API calls to Lambda function has been tested in Postman.

This project has been an eyeopener for me in understanding the power of the cloud. However I still haven't completed the challenge due to insufficient knowledge of SAM.
I developed the frontend with help of HTML, JS tutorials. Styling maybe off on the buttons and UI as I don't have much CSS knowlege yet, but I did use custom API for icons and texts.
If you have read this far, all I can say don't let the cages keep you from the cloud. Take care.
https://github.com/jicoing/git-komlalebu

Update - 11-27-2020

5. HTTPS -Completed!😃

I have finally managed to make the website secure.
URL: https://www.komlalebu.com
First:
I had to setup a certificate from ACM - with domain name www.komlalebu.com

Second:
I had to setup the cloudfront distribution with requested custom SSL certificate, and also configure the alternate domain name

Third:
I had to setup Route53 with a record with name www.komlalebu.com and the Alias value pointing to the cloudfront distribution.

Update - 11-28-2020

Improved the UI.
Used css elements on the buttons.
Updated icon and title.

Update - 11-29-2020

Apart from storing the feedback data in DynamoDB, the character animations now change based on the feedback of the visitors.
The animations are made in MS Paint and iOS Shortcuts.

Update - 11-30-2020

The website is now responsive and compatible for mobiles devices. Should have started from them, but its all good.

Update - 12-01-2020

The UI looks cleaner now. I had to learn HTML and JavaScript extensively to make the top animations. Preloading the images into the browser cache, so that they transform smoothly on button click.

Update - 12-08-2020

Added QR support.

Update - 12-13-2020

Added UI accordian.

Update - 12-16-2020

15. CI/CD (Front end) -Completed!😃

I have managed to integrate GitHub Actions to push code changes in frontend files to AWS S3 using workflows. The IAM role should have privileges to access S3.
Reference: https://github.com/jakejarvis/s3-sync-action

My cloned repository from Github to local.

CMD git commands to push commited files to master respository.

Github actions workflows syncing with S3 once files are pushed.

Updated S3 bucket automatically on git push from my system.

My Frontend repository: https://github.com/jicoing/git-komlalebu

Update - 12-24-2020

8. Database -Completed!😃

The page onload will make API calls to the lambda function that will push the visitor count data to the backend DynamoDB table.
The visitor count is fetched using CountAPI JS.

The lambda function will return the below response once the backend table is loaded.

Update - 12-25-2020

Added dynamic events/day/night indicators.

Update - 12-30-2020

1. Infrastructure as Code -Completed!😃

Read more

Update - 1-05-2021

1. Added a background image made in MS Paint.

Update - 1-07-2021

1. Setup CI/CD backend with Github action deploying SAM.

Update - 1-11-2021

1. Setup a visitor stats HTML table, combining stats for visitor counter, likes, dislikes.
2. likes - I had to setup a separate API and Lambda function that runs a table scan on the backend table komlalebuTable that fetches the records based on DynamoDB FilterExpressions. On clicking like the user stores data in dynamodb table with the string YES appended to the visit count.

There is a separate lambda funtion that scans the table with the primary key id containing the string yes and gives back the result count. This function is called by a separate API everytime the page gets loaded.

• Dislikes - I had to setup a separate API and Lambda function that runs a table scan on the backend table komlalebuTable that fetches the records based on DynamoDB FilterExpressions. On clicking dislike the user stores data in dynamodb table with the string NO appended to the visit count.

There is a separate lambda funtion that scans the table with the primary key id containing the string NO and gives back the result count. This function is called by a separate API everytime the page gets loaded.

Update - 2-11-2021

1. Setup a comments section for my website.

I did not use any third party commenting platform, but rather chose to go with my DynamoDB table to store the contents of the textarea or comment box. Whenever a user leaves a comment, the previous comment is overwritten. This is only suitable for only one comment for now. No user information is stored, they are only identified by their unique visitor count. Dynamodb is scanned using separate lambda functions for comment retrieval.

Lambda: myKomlaComments