https://github.com/sharjeelsafdar/project13b-bookmarking-app-with-aws
A Serverless JAMstack Bookmarking App with Gatsby, AppSync, DynamoDB, CloudFront, and TypeScript
https://github.com/sharjeelsafdar/project13b-bookmarking-app-with-aws
amplify appsync aws cloud-front dynamodb gatsbyjs grpahql jamstack s3-bucket serverless typescript
Last synced: 2 months ago
JSON representation
A Serverless JAMstack Bookmarking App with Gatsby, AppSync, DynamoDB, CloudFront, and TypeScript
- Host: GitHub
- URL: https://github.com/sharjeelsafdar/project13b-bookmarking-app-with-aws
- Owner: SharjeelSafdar
- Created: 2021-06-17T23:02:07.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-08-13T10:52:50.000Z (almost 4 years ago)
- Last Synced: 2025-02-09T07:43:09.143Z (4 months ago)
- Topics: amplify, appsync, aws, cloud-front, dynamodb, gatsbyjs, grpahql, jamstack, s3-bucket, serverless, typescript
- Language: TypeScript
- Homepage: https://dw53lvip47mcd.cloudfront.net/
- Size: 1.2 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://dw53lvip47mcd.cloudfront.net/).
## 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](https://aws.amazon.com/dynamodb/) table to store bookmarks
- A GraphQL API with [AWS AppSync](https://aws.amazon.com/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](https://amplify.com/) for GraphQL queries and mutations on client side
- Bootstrapped with [GatsbyJS](https://www.gatsbyjs.com/)
- Additionally, includes TypeScript support for gatsby-config, gatsby-node, gatsby-browser and gatsby-ssr files
- Site hosted on [AWS CloudFront](https://aws.amazon.com/cloudfront/)
- CI/CD with [GitHub Actions](https://docs.github.com/en/actions)
- Completely typed with [TypeScript](https://www.typescriptlang.org/)
- Completely interactive and responsive design with [Material-UI](https://material-ui.com/) components.
## Backend
This AWS CDK App deploys the backend infrastructure for [Project 13B](https://github.com/SharjeelSafdar/project13b-bookmarking-app-with-aws). 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`.
