Design Choices

Some of the biggest design choices I made were about leaning into existing frameworks, instead of re-inventing the wheel:

1. Defining the entire stack in a series of cloudformation templates
2. Defining the possible back-end operations upfront (and making methods work for any type of input eg storing a new article, or updating a quiz question) so I didn't have to keep redeploying lambdas
3. Using existing design frameworks (like @mui) instead of doing the CSS myself

Why did I choose to make the entire stack a series of cloudformation templates?

Because the code-first (okay...YML first) approach forced me to visualize how everything fit together, not just how I wanted my API designed, but how I wanted the authorization (via Cognito) to allow access only to specific APIs. While this is by no means a revolutionary design choice it did force me to plan the project up-front- which means that after writing the YML I had a clear idea of what operations the front end would support and how the backend looked.

Useful tips:

• Setup custom domain email forwarding on Route53:https://medium.com/responsetap-engineering/easily-create-email-addresses-for-your-route53-custom-domain-589d099dd0f2
• Speed increase (using preact) requires ejecting. Bundle analyzer
• after ejecting webpack.config.js is at path:[[PROJECT]]\config\webpack.config.js so in my case:C:\paulweiler-serverlessV2\website\config\webpack.config.js
• absolute imports (for stuff like images folder):https://nimblewebdeveloper.com/blog/absolute-alias-imports-in-javascript-vscode
• static bundle analyzer (requires ejecting): npm run build && npx source-map-explorer "build/static/js/*.js"

To Do:

Done: