Project 14B: Serverless JAMstack Bookmarking App with Event-Driven Architecture

Link to Web App

A serverless JAMstack Bookmarking App with Gatsby, TypeScript, AppSync, DynamoDB, Lambda, CloudFront, and EventBridge. 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
• The AppSync queries are performed synchronously with a DynamoDB data source.
• The AppSync mutations are performed assynchronously. An HTTP data source simply puts the information about the mutation on EventBridge default bus.
• EventBridge invokes a Lambda function which performs the actual mutation on the DynamoDB Table with the help of aws-sdk.
• DynamoDB Streams are also enabled for our table. Any change in the table invokes another Lambda function which calls a mutation on AppSync called mutationCompleted.
• The client listens for this mutation with an AppSync subscription called onMutationCompleted and updates the UI.
• 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 14B. The app consists of two stacks.

Stack 1: AppSync GraphQL API, DynamoDB Table, EventBridge and Lambda Functions

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 to access the bookmarks in the Table
• A Lamba function to perform the actual mutation on the DynamoDB table
• An EventBridge rule to invoke this function when a mutation is performed by the client side
• Another Lambda function to call an AppSync mutation to inform the client side about the changes in table through an AppSync subscription

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.