Introduction

Target Audience

This workshop is designed for Web Developers, Product Managers and Analysts, who want to learn how to:

  • create and deploy React web application and backend services with authentication and GraphQL API using AWS Amplify
  • set up web analytics and send event-based email campaigns with Amazon Pinpoint
  • set up recommendations and use them in email campaigns and in web application with Amazon Personalize
  • create custom analytics pipeline to collect events and create custom dashboards to analyze these events with Amazon Kinesis and Amazon QuickSight

Use Case

We are going to build a TravelDeals application.

  • Web Application User:
    • Register & Login
    • Created a Deal
    • Browse all Deals
    • See personalized Deal recommendations
  • Product Analyst/Marketing Manager (uses AWS Console):
    • View Product analytics
    • Setup Email campaign with personalized Deal recommendations

Functionality

React Web Application deployed in AWS with Amplify

First, we’ll create React web application with GraphQL API and database with Amplify, AppSync, Cognito and DynamoDB.

“Web Application with a list of Deals”

Web Applicatin Analytics with Amazon Pinpoint

Then, we are going to track user events and create email campaigns with Amplify and Pinpoint:

“Usage Dashboard in Amazon Pinpoint Analytics” “Funnels in Amazon Pinpoint Analytics”

Recommendations with Amazon Personalize

Next, we will create and train ML model, and then use it to send personalized email campaigns and expose recommendations via GraphQL API to show them in the Web Application with Amplify, Pinpoint, Personalize and Lambda.

“Email example with deal recommendations” “Example of a deal with other deals recommendations”

Custom Analytics with Kinesis, S3, Glue, Athena and QuickSight

Lastly, we will setup custom analytics solution to get deeper insights into data analytics and to build custom visualizations with Amplify, Kinesis Data Streams, Kinesis Firehose, S3, Glue, Athena and QuickSight.

“QuickSight dashboard with sample visualizations”

Complete Solution Architecture

“Complete Solution Architecture”

Duration

Depending on the prior experience with Amazon Web Services, workshop may take 4-8 hours to complete.

Costs

There are no upfront charges or any term commitments to create an AWS account and signing up gives you immediate access to the AWS Free Tier.

Most of the Amazon Web Services used in this workshop are eligible for Free Tier (always free, 12-months free, or free trials). You can get more details on AWS Free Tier page about each service. Some services are not eligible for Free Tier:

  • Athena
  • Kinesis Data Streams
  • Kinesis Data Firehose
  • Glue crawlers

Pricing can vary by region.

Example: monthly cost in US West (Oregon)
Service name Usage details Cost, USD
Amazon Athena Total number of queries (100 per month), Data amount scanned per query (100 MB) 0.05
Amazon Kinesis Data Streams Number of records (10 per minute), Record size (5 KB), Number of Consumer Applications (1) 0.01
Amazon Kinesis Data Firehose Number of records for data ingestion (10 per minute), Record size (5 KB) 0.06
AWS Glue crawler 6 crawls 0.44

This is the estimate. Final pricing will vary based on your actual usage.

Detailed calculation for Athena, Kinesis Data Streams and Kinesis Data Firehose is available here. You can use it as a reference and adjust to your needs (e.g. different region, or usage).

For AWS Glue crawler you are billed in increments of 1 second, rounded up to the nearest second, with a 10-minute minimum duration for each crawl. More details available on AWS Glue crawler page.

If you are not eligible for Free tier, or to estimate the cost of your solution architecture, which you are going to build with these services after the workshop, you can use AWS Pricing Calculator and pricing pages for each service.

Resources Cleanup

If you finished the workshop, or decided not to complete it, steps listed in Cleanup will help you to remove all created resources.