yummy-aws

Yummy Dishes & Places

About

Yummy Dishes & Places is a 2-in-1 app that manages international recipes for your favorite dishes as well as places you’d like to visit some day. Key technologies: Angular 6 based single-page app with Mapbox GL, AWS Cognito, S3, DynamoDB and API Gateway as backend (serverless architecture) 🥣 🥡

It has been initially forked from aws-cognito-angular-quickstart and deliberately makes use of a lot of AWS specific Seervices. You may find this project useful if you need to train for AWS Solution Architect or Certified Developer Exam, which used to be my main motivation to kick it off. Of course you may just as well use it only to maintain recipes and places to visit :-)

Preview Dishlist Overview

Preview Map of Places

Preview Place Details

Table of Contents generated with DocToc

• Get the Code and get running quickly
• Tech Stack
  • Required Tools
  • Frameworks
• AWS Setup
  • Install the required tools)
  • Creating AWS Resources
• Mapbox GL Support
  • S3: Update, Build and Deploy
• Import Data
• Local Testing
  • LocalStack
• Roadmap
• Other useful resources

Get the Code and get running quickly

git clone https://github.com/tillkuhn/yummy-aws.git yummy
cd yummy    
yarn
# Run the app in dev mode
yarn start

Tech Stack

Required Tools

• Package Manager npm or npm or yarn
• A recent version of Angular CLI
• To build up AWS Infrastructure AWS CLI and Terraform

Frameworks

• AWS JavaScript SDK
• Angular 6
• TypeScript
• Bootstrap
• … and many more

AWS Resources

This sample application can be deployed S3. S3 will host this application as a static site

• Hosting a Static Website on Amazon S3
• Run terraform to build the underlying infrastructrure in the [terraform](./terraform) subfolder

terraform init
terraform plan
terraform apply [-auto-approve]

Caution: You might incur AWS charges after running the setup script

S3: Update, Build and Deploy

# Build the project and sync the output with the S3 bucket.
./deploy.sh
# Test your deployed application
curl –I http://[BUCKET_NAME].s3-website-[REGION].amazonaws.com/

Mapbox GL Support

• Yummy uses Mapbox to visualize places and regions, so to use this featuere you need to register on their side and register your mapbox_access_tokenin terraform.tfvars

Local testing with LocalStack

To test this application using LocalStack, you can use the awslocal CLI (https://github.com/localstack/awscli-local).

pip install awscli-local

Roadmap

• Support Markdown in node fields
• Admin and Editor, check out Authorization and Cognito groups and fine grained access and Cognito-role-and-aws-s3-bucket-policy-for-mobile-and-web-access
• More on elevated S3 roles How do I use a Cognito group role in front end application?
• Try out the In place edit module
• Add Dish location mapbox supporthttps://www.flag-sprites.com/de/
• Improve S3 Upload Doc Integration (delete and unique filename still missing) Example* https://github.com/perfectline/geopoint
• Enable Time To Live for audit items with epoch attribute and

Other useful resources

• Nice collection of icons in PNG/SVG format* tutorial-for-building-a-web-application-with-amazon-s3-lambda-dynamodb-and-api-gateway and Creating a serverless API using AWS API Gateway and DynamoDB
• integrating-api-with-aws-services-s3
• Easily add an OPTIONS method to an API Gateway resource to enable CORS (Terraform)
• Simple/sample AngularV4-based web app that demonstrates different API authentication options using Amazon Cognito and API Gateway inc AWS CLI User setup
• Secure API Access with Amazon Cognito Federated Identities, Amazon Cognito User Pools, and Amazon API Gateway
• Serverless website using Angular, AWS S3, Lambda, DynamoDB and API Gateway
• Resizing Images in the Browser in Angular With ng2-img-max
• AWS API Gateway and Lambda to return image data and Image Upload and Retrieval from S3 Using AWS API Gateway and Lambda
• Bike and other icons for custom map markers depending on location type
• https://docs.aws.amazon.com/codepipeline/latest/userguide/tutorials-cloudwatch-sns-notifications.htmlhttps://docs.aws.amazon.com/amazondynamodb/latest/developerguide/time-to-live-ttl-how-to.html
• https://aws.amazon.com/de/blogs/aws/new-amazon-cognito-groups-and-fine-grained-role-based-access-control-2/
• https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools-working-with-aws-lambda-triggers.html return and log TOTALs
• https://stackoverflow.com/questions/37266269/aws-lambda-how-to-store-an-image-retrieved-via-https-in-s3
• https://github.com/aws-samples/aws-serverless-workshops/tree/master/ImageProcessing
• https://medium.com/think-serverless/image-upload-and-retrieval-from-s3-using-aws-api-gateway-and-lambda-b4c2961e8d1
• HashiCorp Serverless Applications with AWS Lambda and API Gateway

This site is open source. Improve this page.