-
-
This screen shows the main dashboard.
-
This screen shows the main dashboard.
-
This screen shows the household tab where the activity of users is shown.
-
This screen shows the quest catalog on a selected quest.
-
This screen shows the household tab, on the members menu where you can see each player's level, cosmetics, and activity.
-
This screen shows the quest catalog on a selected quest.
-
This screen shows the main dashboard with the wardrobe tab selected on the "shoe" tab.
-
This screen shows the main dashboard with the daily shop selected.
-
This screen shows the beginning edit avatar menu.
-
This screen shows the beginning edit avatar menu.
-
This screen shows the main dashboard with the personal stats tab selected, also hovering above the players shirt displaying the item info.
-
This screen shows what happens after a quest has been completed.
-
This screen shows what happens when the user levels up.
-
This screen shows the loot you receive from opening a lootbox.
-
This screen shows the main dashboard with the wardrobe tab selected.
Inspiration
I created Level Up because everyday tasks can feel like a chore, and a lot of people struggle to find the motivation to get them done. I wanted to make those tasks more exciting by giving people something to work toward. Completing real life tasks earns rewards that help you level up and customize your avatar.
The household feature came from a personal experience. My little sister is also my roommate, and I felt like I was doing most of the cleaning. She disagreed. That made me think about how useful it would be to have a shared place to track chores and see everyone's contributions.
What it does
Level Up turns everyday tasks into quests. Users complete tasks, earn XP and coins, level up, and unlock clothing to customize their avatars.
Users can also join a household to track chores and see each other's activity. This adds accountability and a social reason to keep progressing: you can show off the character you've built through completing real life tasks.
How I built it
I built Level Up using React and TypeScript, with AI helping me plan, develop, and refine the app.
Creating the avatar customization system involved a lot of hands on work. I found clothing inspiration, used AI to generate artwork based on the avatar's base models, and then adjusted the images in a drawing app. After resizing and positioning each item, I integrated it into the app and checked how it looked on the characters.
Challenges I ran into
The hardest part was getting the clothes to fit the avatars properly.
AI could create clothing designs, but it struggled to keep the exact size and positioning needed for interchangeable items. Even small differences could make a shirt, pair of pants, or hairstyle look wrong when placed over an avatar.
I worked through this by manually resizing and positioning the artwork, checking the fit, and repeating the process until the items worked together. It took much more adjustment than I initially expected.
What I learned
I graduated in May with a degree in software engineering. Building Level Up helped me learn how to use AI more effectively throughout the process of planning, building, and shipping a complete product.
I also learned where AI needed more direction and where manual work was necessary. The clothing system showed me that generating an image was only one step. Making that image usable inside the app required careful editing and testing.
Accomplishments I'm proud of
I'm most proud of the household feature because it connects something practical with something fun.
Beyond roommates tracking shared responsibilities, I can see parents using it to organize household chores and keep track of activity. Siblings could feel more motivated to complete their chores when those efforts help them level up and earn clothing for their characters.
What's next
I want to expand the household feature, especially for parents managing chores.
One idea is to let parents approve completed chores before rewards are granted. I'd also like to build out the social features so users have more ways to share their progress and show off their avatars.
Built With
- chatgpt
- codex
- css
- html
- postgresql
- react
- supabase
- typescript
- vercel
- vite