Project 13C: Serverless JAMstack Virtual Lolly App With Gatsby, Storybook, DynamoDB, AppSync, Lambda, CloudFront and TypeScript
The web app has been deployed to AWS CloudFront, and can be accessed here.
The following are some of the features of this project:
- A form for creating a new Lolly at "/create-new" using Formik and Yup
- Uses DynamoDB table to store the information about all the lollipops
- A GraphQL API with AWS AppSync to interact with DynamoDB
- All lollies are fetched, and static pages are built for each one at build time.
- A Lambda@Edge Function works as an SSR fallback: all lollies not having a static page are redirected to this function.
- Demonstrates CRUD operations using DynamoDB through the GraphQL API
- Uses Amplify for GraphQL queries and mutations at client side
- Bootstrapped with GatsbyJS
- Additionally, includes TypeScript support for gatsby-config, gatsby-node, gatsby-browser and gatsby-ssr files
- Site hosted on AWS CloudFront
- CI/CD with GitHub Actions
- Completely typed with TypeScript
- Completely interactive and responsive design with vanilla CSS.
This AWS CDK App deploys the backend infrastructure for Project 13C. The app consists of two stacks.
It contanis the AWS services used by the web client. It has the following constructs:
- A DynamoDB Table to contain the lollies saved by the users
- An AppSync GraphQL API to access the lollies in the Table
It contains the infrastructure to deploy frontend client. It has the following constructs:
- A S3 Bucket with public access to store the static assets of Gatsby web app
- A Cloud Front Distribution to serve the static assets through a CDN
- A Lambda@Edge function triggered at
origin_responseevent that tries to build and serve a static page for a lolly for which there is no static page in the S3 bucket yet. Otherwise, it redirects to/404page
