HeroFit

HeroFit is a workout app dressed up as a pixel-art RPG. Its tagline: every set lands a blow. Climb the ranks, clear the dungeons, become a legend. Your workouts are dungeons, your lifts earn ranks, and there’s a boss waiting at the end of the week.

It’s a real Expo app in progress, for iOS, Android and the web from one codebase. The screenshots come from its web build.

How it plays

• Create your hero. A handle, a sprite, a fighting style (brute force, hypertrophy, endurance or all-rounder) and your arsenal: the equipment you have and your max load, so the app only suggests exercises you can actually do.
• Headquarters. The dungeon of the day (a session: chest and triceps, four exercises), the boss of the week (beat 4×8 at 72 kg to bring the Guardian of the Bench down), a campaign map, and weekly missions worth XP.
• 30 ranks per exercise. Ten tiers from Bronze to Legend, three steps each. Your rank comes from a composite score: load × reps × consistency (sessions per week, over four weeks).
• Training. Log each set with steppers for load and reps, then a rest timer kicks in. At the end: XP, total tonnage, ranks gained and badges unlocked.
• Friends. Leaderboards per lift, a guild with a shared weekly goal, a badge race between friends and a feed. You can also play as a lone adventurer, with no account and everything kept on the phone.

How it’s built

• Expo and expo-router, React Native on phones and react-native-web in the browser. Every screen has to work on both.
• Real web markup. One <h1> per screen, real buttons and lists, keyboard access and screen-reader labels.
• A small pixel kit of shared components (buttons, panels, meters, sprites, scanlines) built on one set of tokens.
• Zustand for the few global states, with the hero saved between launches. i18next in French and English, French first.
• No backend yet. All content is mocked in typed data shaped like a future API, so plugging in a real one touches one layer.