Inspiration
I started working from home and noticed I'm not moving enough during the day.
I tried a bunch of step apps to track my steps, but they were not motivating me to walk more.
So I built Cudex.
What it does
Cudex is a step tracker + monster card collection app. You walk and your steps XP and Coints. XP raises your level. Every level hatches a new monster into your collection.
There are 124 species across four rarity tiers, and each one has its own holographic trading card that leans with the phone and catches the light as it moves.
You have to tap to collect. Steps walked on a day you never collected are gone at midnight. That little bit of friction is the habit the app is selling.
You can buy clothes for your monster to personalise it in the store inside the app.
How we built it
SwiftUI, SwiftData, HealthKit, WidgetKit, a watchOS app with two complications, Rive for the monster graphics, and Metal for the cards.
The monsters are vector graphics. I designed the base monster and built the different species and looks from it.
A lot of the work went into the vector graphics, the monster clothes and the store items. The clothes and items are designed individually so they work with the monster rather than being generic images.
Rive handles the monster animations, while Metal powers the holographic trading cards.
The card uses three fragment shaders for the foil, glare and paper texture. The light moves against the phone tilt so it feels like the card is moving under a fixed light.
Challenges we ran into
Getting the monster graphics right.
The monster needed to work as a vector so it could stay sharp at different sizes and work across the app. Getting the paths and layers right took more work than I expected.
Clothes and store items.
Each item had to be designed and fitted to the monster rather than just being a generic image placed on top. There are a lot of small details once you start making different clothes and items, like depth/layers of the item e.g. a hand should be drawn on top of the body of a shirt and sleeve on top of the hand. Building a design system for all items was the challenge
Things I'm proud of
The app turned out to be really cool looking. I am especially proud of the store and the items that I have hand drawn. Putting multiple items on the monster works really nicely and it produced many many variaities of monsters.
What we learned
Vector graphics and putting layers of cloths on the svg dinosaur and getting it right turns out to be a really hard task
What's next for Cudex: Step Tracker
Next is syncing, so your collection follows you between devices.
Trading comes after that, which is what the cards were always for.
A leaderboard is already designed and waiting for a backend.
Add friends so you can walk with the friends and see each others progress
Log in or sign up for Devpost to join the conversation.