Owen Rumney

Software Engineer

I recently posted an entry announcing www.aws-glossary.info. In this post I want to cover how it actually works.

Basic Architecture

The logical diagram below details the basic structure of the application. The core components are;

Component Purpose
Github Static content stored in github
CodePipeline On commit to the master branch of the github repo - UI components deployed to S3
S3 Static content for the application is stored in an S3 bucket configured for website hosting
CloudFront Edge location storage, but more importantly, facilitates SSL
Route53 Hosted zone for the aws-glossary.info domain - points to the CloudFront distribution
Lambda Python lambda function to get the latest documentation data and store in a neat JSON file
CloudWatch Events Used to trigger the lambda function

Basic Architecture Diagra

User Interface

The user interface is using KnockoutJS to bind all the components together to dynamically filter the data downloaded in the service JSON file. KnockoutJS allows you to tag components as observable; for example, as you update the search text box, the collection behind the table is filtered appropriately.

Finally, for ease (and because I’m no good a UI design), I’ve used Bootstrap 4.0 to make the look and feel slick but easy for me.