Project 13B: Serverless JAMstack Bookmarking App with Gatsby, AppSync, DynamoDB, CloudFront and TypeScript

Link to Web App

The web app has been deployed to AWS CloudFront, and can be accessed here.

Frontend

The following are some of the features of this project:

• A dashboard for a user to manage his/her bookmarks
• Possible interactions with bookmarks: create a new bookmark, update an existing bookmark, delete a bookmark and batch delete existing bookmarks
• A DynamoDB table to store bookmarks
• A GraphQL API with AWS AppSync to interact with DynamoDB
• Demonstrates CRUD operations using DynamoDB through the GraphQL API
• Bookmarks are updated in real-time on any instance of web app with the help of AppSync subscriptions
• Uses Amplify for GraphQL queries and mutations on 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 Material-UI components.

Backend

This AWS CDK App deploys the backend infrastructure for Project 13B. The app consists of two stacks.

Stack 1: AppSync GraphQL API and DynamoDB Table

It contanis the AWS services used by the web client. It has the following constructs:

• A DynamoDB Table to contain the bookmarks saved by the users
• An AppSync GraphQL API (with real-time subscriptions) to access the bookmarks in the Table

Stack 2: CloudFront Distribution and S3 Bucket

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. It also has the error handling capability: redirects any 404s to /404.html.