About Me Site Builder

illustrations illustrations illustrations illustrations illustrations illustrations illustrations
About Me Site Builder

Date

Mar 15, 2021

Client

Self

Categories

Web development, serverless, a w s

Why?

As an engineer at the University of Pittsburgh, Human Engineering Research Labs (HERL), an institution that builds assistive technologies for disabled people, I came across many disabled people who have ideas and views that they wanted to express and share with them the world. But, due to technical difficulties, they could not share them. They have a different perspective about the world, and many things that may be simple for us can be difficult for them. I wanted to build a tool that would allow them to easily share information about themselves, their thoughts, ideas, and experiences online, letting others know them better. This experience inspired me to develop an accessible and easy to use About-me site builder and the Voicemake (https://devpost.com/software/voicemake-io) voice user interface.

Project Description (What?)

A highly scalable serverless website builder application that builds custom “About Me” pages and blogs for users based on their inputs (Demographics, Top Skills, Work Experience, Education, Projects). The system supports inputs using a custom built web hosted HTML form or using a custom built voice based interface called Voicemake.

How?

AWS Architecture

Image alt

Explanation

The frontend is a static website that was developed using HTML5, CSS and Javascript as the base along with Bootstrap and hosted on AWS S3 and served using AWS Cloudfront. The user initially would visit in “https://about-me.website" then register for an account using a HTML form. The authentication and authorization is handled by AWS Cognito and once registered the user information is stored in Cognito.

The user then must login to start creating their about-me website, once logged in they are redirected to “https://app.about-me.website", this page will have a HTML data input form that can be filling out steps from 1 to 6 to save the user details. Each step displays the step section of the form and once user clicks next the respective section details of the form is saved to the database by sending a PUT request to the “AboutMe Data API endpoint” along with the payload which is the section id, section data and Authorization header with the cognito access token. The API Gateway endpoint only accepts requests from authenticated users, it can do this by validating the access token received.

Once the user saved their details, they can trigger a new build using the build actions button on the user interface, build button is inactive till the user details are first saved. A new build can be requested by sending a PUT request to the “Builder API endpoint”, if request is valid and from an authorized user, then the corresponding lambda function creates a new build request id and puts it in a SQS build requests queue, this is to decouple the builder from the build trigger so that we can control when we trigger it since its a resource intensive process, it also creates a record in the “Request Status” in DynamoDB, this is to keep track of the status of the build request so that any failures can be handled properly.

Once the the build request is accepted, the queue is polled by another lambda function which triggers a AWS Step Functions based state machine that performs the following steps “Read the user preferences from Site Data table” -> “Download the appropriate HUGO template” -> “Read the user about-me data from Site Data table” -> “Rewrite/Recreate the changed content yaml files or md files with new signature” -> “Create new HUGO build” -> “Save the new build files to S3 site bucket”. The lambda functions in the step function state machine share a common EFS share drive that is mounted, this is to ensure each lambda can work on the data updated by other lambdas that ran before in the state machine. The lambda functions also save the status of the build request in DynamoDB table for the “Request Status”. Additionally the step function lambdas can also send SNS build notifications. This can be “fanned out” to various distribution SQS queues like Email subscriber queue, SMS subscriber queue, PagerDuty subscriber queue etc.

Once the build is completed the new files are uploaded to S3, this can be done using S3 sync , Cloudfornt will sync the latest files once the cache TTL is reached. The user when visiting the website will see the new version based on the new build.

Original url: https://about-me.website/nithin