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.

🌟***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!

🌟***TIMESTAMPS***🌟
00:00 – Previewing the completed React app that uses Amplify and Cognito
00:28 – How much will this cost?
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! 🤓

[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.

[mariocesena]

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

[regilearn]

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.

[Billyxiao]

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

[kimbapslayer]

I was loving it. But I hate hate hate HATE when suddenly YouTubers copy and paste code from their personal repo. Now, my knowledge base is gatekeeped behind your repo. I gotta go to to analyze your code from your GitHub. And if my memory fails me, I’d have to hunt down your repo again and or install your code my my machine. Please, just continue the tutorial seamlessly and write out the code. It would been just a few extra minutes.

[smithchristian]

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.

[CHiRaStar]

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

[darjidhruv]

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

[missfaith]

Maam, I would like to know if will it cost me if I won't delete the app since its just there for portfolio and no one is really gonna use it? I want to use it for resume since I'm looking for work. Deleting the amplify means they won't know if it really works. I'll make sure that I'll delete it if i'm done with the 12 month tier. How would the HR manager know that it works if I'll delete it? Is there away to keep the app running without any cost?

[sudhanshukumar-hgjk]

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

[joshbleijenberg]

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

[Seven-JTTW]

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

[sivakumar-xwff]

Hi can you please make a video on aws identity centre using octa active directory with mfa, Thanks

[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).

[itsjaysenofficial]

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

[yancarondon]

can you customize that cognito page? I wanted to remove the create user tab to only add users through AWS, and also change colors

[danielbeltran]

Nice video. I’d like to know if it is possible to use Amplify using Vite instead create-react-app

[yusefalimam]

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

[Ebrarme]

thank you teacher you are the best ! greetings from Turkey