Technology Behind This Site
I decided to write this tool in a completely server-less fashion. So even though there is the ability to signup, login, and save and load data (the CSS specifications), there is no dedicated server sitting behind this. There were obviously quite a few challenges to make that work! But mission accomplished as you can see. Below is a list of the technologies underpinning this tool.
- S3 - The pages, javasript, images, and stylesheets themselves all live as static content on S3
- CloudFront - From S3, all content is cached into CloudFront in edge caches all around the world. That means the actual load on S3 is quite low and response time high.
- Lambda - Lambda, which internally uses Node.js, is used for the purpose of intercepting the traffic going from S3 to CloudFront to insert XSS headers for additional security
- Cognito - Cognito is used as the authentication infrastructure, and it is federated to Facebook to allow the secure login by Facebook function
- DynamoDB - DynamoDB is a noSQL database that is used to save and load designs. It is secured used IAM policies that link to Cognito. These implement a row-level security that allow unathenticated loading of saved specifications while authentication is required to save, and you can only overwrite your own specifications.