an offline-friendly, cache-first website frontend built with material ui, typescript, react and webpack with Jest unit testing

Highlights:

1. Website deployed to an S3 bucket with Cloudfront as CDN: https://www.markz-portfolio.net/ and https://markz-portfolio.net/ are redirected to a CloudFront distribution. The CloudFont distribution is configured to redirect all http to https. Some Cache-Control headers are configured for different built files of the React app for performance and cost.
2. SPA: all 400 class errors are redirected to /index.html by cloudfront.
3. service-worker.js is used in a way that when new version is continuosly deployed to S3, a React snackbar displays notification, letting user choose whether they want to 'skipWaiting' and get the latest content. If they choose not to 'skipWaiting', the old content will remain on ALL TABS. This ensures cross browser tab data consistency.
4. Infra as code with AWS CDK here: https://github.com/MarkZhuVUW/aws-cdk-all
5. Currently the cost of maintaining the website is around 0.65usd per month.
6. I call it a "higher-order react hook" that wraps the useReducer hook, and adds the ability to attach middleware and afterware.
7. Inspired by Downshift and react-virtualized, I have decoupled all states into dedicated custom hooks while providing render props for allowing the customization of some parts the components
8. Accessibility. All interact-able icons, button either have text within it or a unique aria-label.

In the project directory, you can run:

• Runs the app in webpack development mode with live reloading.

• Open http://localhost:4000 to view it in the browser.

try: