Create a Quiz using AWS Amplify and Cognito (with CI/CD)

Setuping new user

Open VS Code and create the folder.
install amplify using npm command.
npm install -g @aws-amplify/cli

Enter to continue and select the region (ap-south-1)

Open IAM User and Specify user details.

Enter user name (Amplify-dev).
Enter next.

Step 2nd is to set the permissions.

Select the permission option - Attach policies directly.
Select permission policies - AdministratorAccess-Amplify.
Then Next.

Review and create the user.

Open User (Amplify-dev) the scroll down

click on create access key.

Select CLI then next

Click on create access key.

Copy the access key and secret access key.

Past both keys here.

Succesfully setup the new user.

npm create-react-app my-quiz-app

use- cd my-quiz-app

amplify init
yes

Search Amplify AWS.

Open Amplify Aws.

ther is myquizapp.

Search Cognito.

One user pool is created.

Open VS code.

Open the terminal.

Write npm start command to start the reactjs service.

Fill the Details.

Enter the code which is send on your email.

Sign in.

Create repository.
Name it "amplify-cogniti-quiz2".

git add .

git commit -m "Initial Commit"

git branch - to check the branch.
git branch -M main - to create main branch and keep it default.

follow the following commands 👇
git add .
git rebase --continue
git push origin main

Navigate to Amplify then myquizapp.

Choose source code provider.
Github
then click on next.

Install and Authorize on your git account.
click on only select repository.
select your repository.

Click on Install and Authorize.

Add repo and branch.

Give the app name "myquizapp",
Frontend build command "npm run build",
Build output directory "build".

For service role we have to create the role.

Go to IAM service
Select AWS Service
In the use case select the Amplify option.

Add permissions
AdministratorAccess-Amplify.
click on next

name the role "amplifyconsole-backend-role1"
review and create.

Go to the Amplify > myquizapp > Add branch
App settings - add service role "amplifyconsle-backend-role1"

Review
Save and Deploy

Deploying the app is in process

myquizeapp is deployed.
copy the domain and paste it on the browser.

Our application is running

You have successfully Builded a simple React app (a quiz app) using AWS Amplify Gen 1 and Cognito.

• App.js: The React application that's configured to use Cognito for authentication
• Quiz.js: The Quiz component
• quizData.js: The hard-coded questions and answers for the quiz