Build a Real-Time Quiz Game: Amplify Gen 2 & Amazon Bedrock Tutorial

AWS Amplify has been one of the go-to products for frontend web and mobile developers. With the release of Amplify Gen 2 and its Cloud Development Kit (CDK) capabilities, the app-building possibilities have expanded beyond the previously supported categories of Authentication, Data, Storage, and Functions to include every category that CDK supports.

AWS is running a hackathon through the month of November (Join now on DevPost: https://awsdevchallenge.devpost.com!), so I thought it would be great to show you how you can build a quiz application by using all the capabilities of AWS Amplify.

In this article, we will learn how to create a Quiz Application using Expo to develop an iOS and Android application through React Native. The objective of the Quiz Application will be to provide users with a set of categories and create match-ups against opponents who are interested in the same category. You can check out the finished version of the app over GitHub.

For moving forward, you have to have an AWS account configured at your computer, Expo CLI installed globally and have npm installed. For setting up your AWS account, you can follow the steps from the Amplify documentation.

Let's see how we can create the overall experience. You can also check out the full source code on GitHub.

We will not be focusing on the UI components in this article. You can check the source code for those details.

Creating an Amplify Gen 2 Project

For creating an Amplify project, it is preferred to have it set up within a frontend project. Let's create an empty React Native project using Expo with TypeScript support. Run the following command to create the project:

npx create-expo-app amplify_quiz -t expo-template-blank-typescript

After it is done, let's create the Amplify project. To create the Amplify project, run the following command:

npm create amplify@latest -y

This will create a to-do project with email authentication and data connection.

For the initial deployment, you can use a personal cloud sandbox environment. This provides an isolated development space to rapidly build, test, and iterate on a fullstack app. Each developer on your team can use their own disposable sandbox environment connected to cloud resources. To start the sandbox environment, run:

npx ampx sandbox

Once the deployment is complete, you can now work on your backend infrastructure.

Working on Authentication

The email login already provides you with a way to confirm users and implement password protection rules (minimum 8 characters, a capital letter, a number, and a special character requirement).

To update this information and expand user capabilities, you should work on the auth/resource.ts file and update it as follows:

This will maintain your email sign-in, customize your user confirmation email flow, and require users to add their usernames for the app. Once you save these changes, the sandbox will automatically update the authentication information.

To implement an authentication flow in your app, you can either implement the structure manually or use the Amplify UI libraries to implement the authentication flow.

First, add the Amplify UI libraries to your project:

Once you've added them, open the App.tsx file and update it as follows:

Let's examine the code above:

fetchUserAttributes function returns the attributes of the user that you provided
<Authenticator> component controls the authentication flow. Shows the app related pages when user sign in.
useAuthenticator hook has many capabilities alongside with signOut function.

Now it is time to add game logic.

Add Game Logic

For the game logic, we will have two steps. First the players will be added to the game pool and whenever there are two sets of players, we will start a game with generated questions from a random category.

For adding game logic, open the data/resource.ts file and update it like the following:

This will drop the previous Todo table and create a GamePool table. Now you can update the HomeScreen component with the following to check the status of the game search:

This will create the gaming mechanism for your game. The game will have the following behavior:

When you open the game, you see a welcome screen with your username and a button to search for a game.
When you press the "Search Game" button, the game looks for another player who is also searching for a game.
If it finds another player waiting, you join their game. If not, you create a new game and wait for someone else to join.
While you're waiting, the screen shows a message that it's searching or that questions are being generated.
Once two players are matched and the questions are ready, the quiz begins.
The quiz has 5 questions about different sports topics. Each question has four possible answers to choose from.
Both players see the same question at the same time and can select their answer.
If you choose the correct answer, you get 10 points. If you're wrong, you don't lose any points.
After both players have answered or time runs out, the game moves to the next question.
This continues until all 5 questions have been answered.
At the end of the quiz, the game shows the final scores and announces the winner (or a tie if both players have the same score).
Throughout the game, the screen updates to show your current question, options to select, and at the end, the final results.

Let's breakdown the code for having an overview of what we have done:

const client = generateClient<Schema>();This line will generate the client helper libraries and references through your data schema.
The list function will get all the items related to a model. For filtering the models, you can use predicates to define rules about your data.

The update function updates a property of the object by matching it through an id.

The create will do an game object creation.

The observeQuery will listen to the object with pre-defined filters to act on it.

If you run the game now, you'll see that the gaming mechanism is already in place. However, it still shows the predefined questions. Let's use the power of AI to create our question content.

Adding AI to Generate Questions

To add AI-generated questions, we will use a new feature of AWS Amplify called Amplify AI. With Amplify AI, you can define full-stack AI functionality in your Amplify Gen 2 applications with tight integration for auth and data. This allows for easy authorization logic and the use of existing Amplify data as context for AI requests (such as asking a chatbot about data in your applications) and generating data records with AI.

Amplify AI is at Developer Preview now, you can check the RFC about it over GitHub.

For using Amplify AI, open the data/resource.ts file and update it with the following:

The new, generation capability is a single synchronous request-response API. A generation route is just an AppSync Query. Once you save the file, it will automatically start deployment process about it.

Make sure your AWS account has access to the model you wish to use. You can do that by going in to the Bedrock console and requesting access.

On the client side, in your App.tsx file, remove the lines between 79-125, which create the mocking part of the question generation. Add the following code instead:

This will call the generateQuestions function from Amazon Bedrock to generate the content. Now, if you run the application, you should be able to see that the game is working:

Improving the UI with Amazon Q Developer

As you can see, the UI of the Quiz is not optimal. It looks different on iOS and Android, and there isn't any consistent color scheme or theme. We can fix that by using Amazon Q Developer for VSCode.

With a recent release of Amazon Q Developer, you now have access to inline chat functionality. Thanks to this feature, you can insert or update code through prompts.

Let's use Amazon Q Developer to update our UI:

By running a simple prompt through the inline chat functionality of Amazon Q Developer, you can see that the UI is automatically getting updated. You can make it more complex by adding more details to your prompt.

When you run the apps, you'll notice that the UI has better padding and the color is defined by the prompt.

Conclusion

As you see, building a full-stack game with the help of Amplify Gen 2 is easy as it gets. If you're ready to build your own game, AWS is running a hackathon through the month of November. From a simple tic tac toe game built with HTML/CSS/JS to a complex Unity game -- all skill levels and tech stacks are welcome.

Join now on DevPost: https://awsdevchallenge.devpost.com!

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

Site Terms, Privacy, and more.