
Build a Real-Time Quiz Game: Amplify Gen 2 & Amazon Bedrock Tutorial
Learn how to build a real-time quiz application with React Native to support both iOS and Android
We will not be focusing on the UI components in this article. You can check the source code for those details.
npx create-expo-app amplify_quiz -t expo-template-blank-typescript
npm create amplify@latest -y
npx ampx sandbox
auth/resource.ts
file and update it as follows:App.tsx
file and update it as follows: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 withsignOut
function.
data/resource.ts
file and update it like the following: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: - 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.
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.
Amplify AI is at Developer Preview now, you can check the RFC about it over GitHub.
data/resource.ts
file and update it with the following: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.
App.tsx
file, remove the lines between 79-125, which create the mocking part of the question generation. Add the following code instead: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:Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.