CloudQuest: Level Up Your AWS Skills with Gamified Learning
A journey into cloud computing with a gamified learning platform, built with AWS and Amazon Q!
Published Jan 14, 2025
Hey everyone!
I'm excited to share my project, CloudQuest built for the AWS Game Builder Challenge. Inspired by the engaging learning style of Duolingo, CloudQuest transforms the often-daunting world of AWS into a fun, interactive, and rewarding game.
CloudQuest is a gamified learning platform that helps you master Amazon Web Services (AWS) through interactive quizzes and a game-like progression system. Whether you're a complete beginner or have some cloud experience, CloudQuest is designed to make learning about AWS accessible, enjoyable, and effective.
The core gameplay revolves around modules and lessons. You will start with the basic concepts and progress to more advanced topics. Each lesson presents you with 12 interactive quiz questions, designed to test and reinforce your understanding. These questions come in various formats, including:
- Multiple Choice: Select the correct answer from a list of options.
- True/False: Determine if a statement is true or false.
- Fill-in-the-Blank: Complete the sentence with the correct words.
- Short Answer: Type in a brief answer to a question.
- Drag and Drop: Match items by dragging them into the correct categories.
- Matching: Pair terms with their definitions.
- Ordering: Arrange steps or items in the correct sequence.
- Image Identification: Select the correct AWS service based on the given image.
You can play all of these question types using just your keyboard, making the game easily accessible. As you advance, you'll level up your knowledge, earn points, and track your progress.
CloudQuest leverages the following AWS services:
- AWS Amplify: This is the backbone of the app, handling frontend hosting, backend, and CI/CD. It also manages user authentication, and authorization using AWS Cognito.
- AWS DynamoDB: This service was used as the database to store all the game data and user progress.
- AWS AppSync: This service was used to create a GraphQL API, connecting the frontend to the DynamoDB database.
- Amazon Q: I used Amazon Q Developer as a co-developer to assist in code generation, debugging, and research.
Here are some ways I leveraged Amazon Q during development:
@workspace for Context: I used the @workspace command to provide Amazon Q with context from my codebase, which helped it generate relevant code and suggestions.
For example:
1
@workspace follow AMPLIFYRULES to develop a data model schema for a gamified learning platform using Amplify Gen 2. Include models for users, modules, lessons, questions, user progress, leaderboards and media. Use Amplify Gen 2 to fetch a user's progress and leaderboard rank.Image not found
`/dev` for UI Components: I used the `/dev` command to rapidly generate UI components and pages.
1
/dev generate three pages, Dashboard, Lesson, and ProfileImage not found
Command+I for Code Edits: I used `Command+I` to edit and generate code snippets.
Image not found
Contextual Actions: I leveraged the context menu options for refactoring, explanation and initiating longer discussions.
Image not found
Multi-Tab Chat: I used the multi-tab chat feature to work on different tasks in parallel.
Image not found
This project was an exciting and challenging experience. Here are some of the things I learned:
- AWS Amplify and Cognito: Learning these services and getting them configured took time and effort, but it was also rewarding to learn their power. I learned the power of using AWS Amplify for end to end deployment. I particularly liked how easy it is to setup automated deployments.
- Rapid Development: I challenged myself to build a project in a short amount of time, pushing the limits of what I could achieve in 15 days.
- Just Start: I learned to prioritize tasks based on their impact on functionality. I focused on getting the core gameplay loop working first, and then I moved to other features. I also learned to just start the project and iterate based on the needs.
I faced an issue with my VS Code bugging when accessing some user data. With the help of Amazon Q and the Amplify documentation, I figured out that I needed to explicitly type the selection set for my queries. For example, I learned that I needed to explicitly type my queries, like so:
1
2
3
4
5
6
const userModel = await client.models.User.get<CurrentUserSelectionSet>(
{
id: user.data.id,
},
{ selectionSet: currentUserSelectionSet }
);With a type definition, like so:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export const currentUserSelectionSet = [
"id",
"status",
"email",
"username",
"profilePicture",
"stats.*",
"courses.*",
"courses.course.*",
] as const;
export type CurrentUserSelectionSet = typeof currentUserSelectionSet;
export type UserWithStats = SelectionSet<
Schema["User"]["type"],
CurrentUserSelectionSet
>;I used Amazon Q to understand a new code component of React. I highlighted a complex piece of code, and used the 'explain' function, which gave me a detailed breakdown of how that function worked, which I would have spent hours trying to figure out.
Amazon Q Collaboration: I'm very proud to have worked with Amazon Q as my coding partner. It sped up my development process and helped me code, debug and research with great efficiency.
Functional Prototype: I'm happy to have built and launched a functional project under a short amount of time.
Community Engagement: I was able to participate in the AWS Game Builder Challenge and I was happy to share my work with the community.
Beta Testing: I am looking forward to getting feedback from beta users and improve the gameplay.
Content Expansion: I am planning to expand the content and cover more AWS topics.
Personalized Learning: I'm planning to integrate Amazon Bedrock to create personalized lessons based on user performance and learning patterns.
I invite you to check out CloudQuest and give it a try. Any feedback or comments are much appreciated!
4 Comments
Log in to comment