In this hands-on tutorial, I’ll show you how to build a simple React app (a quiz app) using AWS Amplify and Cognito. We’ll also see how to set up continuous integration and continuous deployment (CI/CD) using GitHub. By the time you’re done, you’ll have a fully-functioning application you can share with the world, on a real-live Amplify URL.
?? GitHub repo for code and commands: https://github.com/tinytechnicaltutorials/amplify-cognito-quiz
? For diagramming and checklists in this video, I used Eraser.io. Check them out! https://www.eraser.io/
? For another fun project that uses Cognito, Amplify, Lambda, API Gateway and DynamoDB, check out this other video: https://youtu.be/zuKu0VFiwas
?***MY AWS COURSES***?
If you’re interested in getting AWS certifications, check out these full courses. They include lots of hands-on demos, quizzes and full practice exams. Use FRIENDS10 for a 10% discount!
• AWS Certified Cloud Practitioner: https://academy.zerotomastery.io/a/aff_n20ghyn4/external?affcode=441520_lm7gzk-d
• AWS Certified Solutions Architect Associate: https://academy.zerotomastery.io/a/aff_464yrtnn/external?affcode=441520_lm7gzk-d
?***TIMESTAMPS***?
00:00 – Previewing the completed React app that uses Amplify and Cognito
00:28 – How much will this cost?
02:16 – Setting up our to-do checklist and diagram in Eraser.io
03:23 – Setting up the environment and installing the Amplify CLI
03:35 – The GitHub repo to get all the code and commands for this video
03:58 – Using the amplify configure command with the Amplify CLI
06:16 – Creating the access key ID and secret access key for amplify-dev IAM user
07:56 – Creating a new React app from VS Code
08:30 – Using the amplify init command to initialize the Amplify project
10:49 – Adding authentication to the React app using Cognito
12:31 – Validating the Cognito user pool was successfully created
12:52 – Adding the aws-amplify/ui-react libraries for the Cognito sign-in UI
14:02 – Running the React app to register for an account and log in using Cognito
15:37 – Reviewing the code that enables Cognito authentication from the React app
16:47 – Adding functionality and styling for the quiz
18:40 – Create a new GitHub repository and push local code to it
22:20 – Setting up Amplify hosting and CI/CI from GitHub
24:51 – Creatin a new service role for Amplify Hosting
26:24 – Testing our final React application hosted in Amplify
26:56 – Testing continuous integration continuous deployment (CI/CD) with a GitHub commit
29:04 – IMPORTANT! Deleting your resources
