AWS Project - Building a React App with Amplify, Cognito, and CI/CD with GitHub | AWS Tutorial

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: github.com/tinytechnicaltutor...
🤓 For diagramming and checklists in this video, I used Eraser.io. Check them out! www.eraser.io/
🤓 For another fun project that uses Cognito, Amplify, Lambda, API Gateway and DynamoDB, check out this other video: • AWS Portfolio Project:...
🌟***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: academy.zerotomastery.io/a/af...
• AWS Certified Solutions Architect Associate: academy.zerotomastery.io/a/af...
🌟***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

[@TinyTechnicalTutorials]

Another AWS project video! Hope you like it! 🤓

[@exaaltare1170]

Supper, thank you so so much!!!

[@smithchristian4251]

I think you should make a series. Can we learn next part on groups of users (Admin, staff, customer) and allow them to access data based on user permissions.

[@TinyTechnicalTutorials]

Great suggestion! I'll add this to my list for future videos. Thanks for the comment! 🤓

[@Riko0013]

that would be awesome!!

[@yusefalimam130]

This is incredible! Thank you so much for doing these. You open doors for so many others when you share this kind of information and take the time to present it thoughtfully

[@TinyTechnicalTutorials]

Awwww...what a nice comment!! I'm so glad it helps. Thanks for watching! 🙏🌟

[@Billyxiao]

Dear @TinyTechnicalTutorials I can't express how much i would like to thank you to teach this for free.

[@TinyTechnicalTutorials]

@Billyxiao - This comment made my day!!! Thanks for supporting the channel! 🤓🙏🌟

[@jivesyt]

I never leave comments on videos, but this is one of the best developer video I have ever seen. You are concise and clearly explain how each piece fits together, without going into too much detail about topics that aren't the focal point of what you're trying to cover.

[@TinyTechnicalTutorials]

Wow, I'm going to print out this comment and hang it on my wall! 🥰 Thanks for watching, and for taking the time to comment...super appreciate it! 🙏🤓🌟

[@mariocesena2277]

Love your content! Your videos made all that theory I've been digging through click for me. Got that "aha" moment, thanks!

[@TinyTechnicalTutorials]

Awwww...aha moments are the BEST! Thanks for watching!! 🙏🌟🤓

[@ultrasys]

06:30 in the morning, I go check the news and get notified about a new video. Hmmm, React is far from being something I’m interested in but I decide to check it out based on my previous positive experience watching TTTs videos. No surpriae, good surprise. Again, I learned A LOT out of an unsuspected subject. It makes me wonder what motivates the refreshing grinning embedded in the speech. Refreshing, light, and instructional. Believe me: your videos teach much more than some specific skill. Also, it’s a real joy to even hear them while making a coffee to get started for the day. Thanks for the excellent way of stating the day.

[@TinyTechnicalTutorials]

Wow, SUCH nice comment--THANK YOU!! Years ago, someone told me I always "have a smile in my voice." Not sure where that comes from, but glad it's nice to listen to! 🥰☕And glad you learned something too!

[@againts-brainwashers]

when the new video come , i completed most of the video of your playlist

[@TinyTechnicalTutorials]

Awwwww...thank you so much!! 🥰 Really appreciate the support! I'm behind on new videos, but stay tuned for more! 😊

[@againts-brainwashers]

@@TinyTechnicalTutorials thank u

[@darjidhruv2665]

That's really amazing,it really helps me to enhance my skill

[@TinyTechnicalTutorials]

I'm so glad!! Thanks for watching! 🤓🌟🙏

[@itsjaysenofficial]

AMAZING EASY TO UNDERSTAND!! THANK YOU SO MUCH!!!. if i did this should i still watch the aws amplify in plain english???

[@josuemanuellopezlezama2692]

Great tutorial! Thank you 👏🏻

[@TinyTechnicalTutorials]

Glad it was helpful! Thanks for watching, and for the nice comment! 🤓🙏🌟

[@sudhanshukumar-hg8jk]

Thnk u mam your videos are always full of knowledge....very much appreciated 😊

[@TinyTechnicalTutorials]

You bet! 😊 Thanks supporting the channel! 🌟🙏

[@PowerAppsTutorial]

Great stuff. Love your videos. 👍👍

[@TinyTechnicalTutorials]

Thanks, as always, @PowerAppsTutorial!! 🙏🌟🤓 Hope life is awesome!

[@siddhantkhanna9053]

Thanks for this tutorial ❤❤

[@TinyTechnicalTutorials]

You're welcome! 😊 Thank YOU for watching! 🤓🌟🙏

[@faaizshah5830]

Awesome work 👏

[@TinyTechnicalTutorials]

Thank you! Cheers! 🥰🤓🙏

[@AIAnimationStudio]

This was a really superb video, thanks for taking all the time to plan, test and make it. (*I've been trying to achieve a similar process via CDK, and this helped shed some light on lots of areas).

[@TinyTechnicalTutorials]

Glad it was helpful! Thanks for watching, and for such a nice comment! 🤓🙏🌟

[@mantrax314]

Great Content!

[@TinyTechnicalTutorials]

Thank you SO much for the nice comment and donation!!! You're very kind!! 🙏🥰🙏🥰

[@eiwlhunter]

Oh Dear🎉Amber🎉 mark this first, will try it out after Easter. Thank you ❤!

[@TinyTechnicalTutorials]

Haha! Okay! 🥰

[@regilearn2138]

I am new to AWS and react, I got a task that upload a file to S3 bucket to using serverless Lambda function, would appreciate if you can guide me on this. What are the area I should focus. any video on this.

[@keith_6461]

Thank you very much

[@TinyTechnicalTutorials]

Any time! Thank YOU for watching! 🤓🌟🙏

[@arieladalid9910]

Thank you ❤❤❤

[@TinyTechnicalTutorials]

You're welcome! 😊 Thanks for watching! 🤓🙏🌟

[@khalidelgazzar]

Kool 😎👍 thank you

[@TinyTechnicalTutorials]

You bet! Thanks for watching! 🙏🤓🌟

[@mantrax314]

Thanks!

[@TinyTechnicalTutorials]

Oh my goodness...THANK YOU SO MUCH!!!! And sorry for the delayed response! This made my day!! 🙏🥰🌟🔥 Really appreciate the support!!!

[@CHiRaStar1]

By far one of the best learning video I have watched in recent times. Really nice way to explain all things so precisely. Can you pls tell me how we can execute a glue job from giving glue job name from UI itself

[@TinyTechnicalTutorials]

Thanks for the nice comment, @ChiRaStar1! 😊 I don't have any videos about Glue, but I believe you can accomplish what you need through the UI in Glue Studio? docs.aws.amazon.com/glue/latest/dg/managing-jobs-chapter.html

[@CHiRaStar1]

@@TinyTechnicalTutorials no this will not help me. My question is how can we trigger or invoke any aws service from UI itself . Like UI followed by apigateway then lambda

[@21cabbage22]

Awesome tutorial you are a lifesaver! Would it be possible to store user registration info from cognito into a mysql/rds db?

[@TinyTechnicalTutorials]

I'm glad it was helpful! 😊 I haven't tried that myself, but this discussion has a few ideas for how you could do it: stackoverflow.com/questions/75188739/storing-user-details-in-aws-rds-using-cognito

[@joshbleijenberg4000]

Can you do the same for React Native and mobile development. And focus on the CI/CD processen en app updates in the stores

[@TinyTechnicalTutorials]

I haven't done too much with React Native and mobile dev, but I'll add this to my list to research for future videos. Thanks for the suggestion! 👍🤓

[@user-ic9io5ov8c]

Nice vedios my CV looks good now

[@TinyTechnicalTutorials]

Nice!! 👍 Hope you land an awesome job!

[@user-ic9io5ov8c]

@@TinyTechnicalTutorials will you help me to get job ☺

[@emirmaya3196]

Awsome tutorial! Could you make a bigger project with React + Amplify please? I want to learn how to use to implements in my react projects. Greetings from Argentina!

[@TinyTechnicalTutorials]

Greetings, Emir!! 👋 So glad you liked it! Yes, I definitely want to do more with React+Amplify. Thanks for the up-vote! 👍

[@manee427]

awsome

[@TinyTechnicalTutorials]

Thank you!! 🙏🤓🌟

[@satadhi]

These videos are awesome ! what happens during amplify init and if I set it to dev mode ? Also it will be great if you can explain the code or give some links to under stand the cognito part of code. Thank you :)

[@TinyTechnicalTutorials]

Glad you're enjoying the videos, @satadhi! 🤓 I'm not sure I'm following "dev mode"? Here are the parameters for the amplify init command: docs.amplify.aws/javascript/tools/cli/usage/headless/#amplify-init-parameters. I'm not seeing anything about a mode or dev mode? And I can definitely explain the code better in future videos. Thanks for that feedback! 🙏

[@KP-mk8wx]

Excellent! Can you reengineer the entire infrastructure from the finished resources using Cloud Formation? I mean is there a way for someone to recreate all the resources used in this project from the CLI without having to go to AWS console? Kindly provide guidance.

[@TinyTechnicalTutorials]

Hi KP! 👋 There is a tool called the IaC Generator that will look at the resources in your account and generate a CloudFormation template: docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/generate-IaC.html I haven't used it myself, but yes, it's totally possible to build the infrastructure using CloudFormation instead of the console. 🤓

[@olaleyeoyewunmi6978]

I’m trying to switch from frontend to cloud , came accross your channel and I love it , my build failed on aws , but then it build completely in my local machine , how do I check the logs on aws to know the issue , I did exactly what you did in the video , thanks 26:18

[@TinyTechnicalTutorials]

Hi Olaleye! 👋 When the build fails in Amplify, you should be able to click on the step where it failed (should be a red icon) to see more about the problem.

[@againts-brainwashers]

can you make videos on docker or kubernetes

[@TinyTechnicalTutorials]

I'll add these topics to my list for future videos. Thanks for the suggestion! 🤓🙏🌟

[@rishiraj2548]

Good day greetings

[@TinyTechnicalTutorials]

Thanks for watching! 🙏🌟😊

[@masonsprout8847]

😭 "Promo SM"

[@TinyTechnicalTutorials]

😢