All case studies

Frontend Engineer

SuperPower (ex. WorkoutMe)

Fitness app with 1–5 minute home workouts, no equipment needed.

Open the product
The progress screen, my part of the work: month calendar, streak chart and the "days in a row" and "workouts total" counters. Three Firestore reports on one screen.
The progress screen, my part of the work: month calendar, streak chart and the "days in a row" and "workouts total" counters. Three Firestore reports on one screen.

SuperPower screens from the App Store: workouts, profile and progress reports.

January–February 2022 · React Native frontend

My role

I built the progress screen from scratch: profile, report carousel, calendar, weekly chart, streak, friends’ activity and doodle gallery. I introduced TypeScript, path aliases, typography and shared style mixins for the new screen within an existing JavaScript codebase.

Progress screen
Workout calendar, streak and activity chart
Data and state
Loading reports from Firestore
Workouts and video
Short workouts and on-device video

The business problem

An avatar and a few counters did not show training trends. User totals, monthly data and weekly slices lived in separate Firestore documents and had to become a clear screen that also worked on lower-end Android devices.

Progress screen

Workout calendar and statistics

The profile header shows the avatar and city. The calendar marks workout days, the chart shows weekly activity, and counters display the current streak and total workouts.

Activity feed: other people’s workouts, workout doodles and kudos. A separate query collects an author’s doodles into the gallery on their profile.
Activity feed: other people’s workouts, workout doodles and kudos. A separate query collects an author’s doodles into the gallery on their profile.
Leaderboard: the top three plus the user’s own row with the change in position. Rank comes from workouts completed in the period.
Leaderboard: the top three plus the user’s own row with the change in position. Rank comes from workouts completed in the period.

Reports in a carousel

Monthly reports are swipeable cards, rendered as the user browses rather than loading the entire history at once.

Friends’ activity and doodle gallery

Friends’ activity and the author’s workout doodles complement the screen. Paid reports have dedicated SuperPower placeholders.

Data and state

Loading screen sections independently

User totals, the monthly document and the last seven days are read independently from Cloud Firestore. The screen can display available blocks without waiting for every report.

  1. Profile

    The user’s avatar and city.

  2. Totals

    Current streak and total workouts.

  3. Month

    A document for the calendar and report.

  4. Week

    A separate slice for the recent activity chart.

Engineering details

  • Typing the new screen

    I built the screen in TypeScript within a JavaScript project. I added path aliases, typography and shared style mixins that the team later used elsewhere.

  • State and access

    The application uses Redux and React Navigation. RevenueCat connects access to paid reports to the SuperPower subscription.

Workouts and video

Workouts lasting 1–5 minutes

SuperPower offers equipment-free workouts lasting 1–5 minutes. Completed workouts appear in reports on the progress screen.

Onboarding: the goal drives the plan and the difficulty. The steps live in their own navigator and the answers are kept until sign-up.
Onboarding: the goal drives the plan and the difficulty. The steps live in their own navigator and the answers are kept until sign-up.
Home screen: the personal plan for the day, the streak strip with completed days, and instant workouts of one to five minutes.
Home screen: the personal plan for the day, the streak strip with completed days, and instant workouts of one to five minutes.
Picking a workout: a 1/3/5-minute duration filter, with a video and a timer behind every exercise. No equipment needed.
Picking a workout: a 1/3/5-minute duration filter, with a video and a timer behind every exercise. No equipment needed.
End of a workout: the streak, a meme reward and a question about how it felt. From here the result goes into the reports and into Apple Health.
End of a workout: the streak, a meme reward and a question about how it felt. From here the result goes into the reports and into Apple Health.
Engineering details

  • Video on the device

    The app downloads a video archive from the CDN and extracts it on the device. Workout videos play locally. Firebase Performance tracks downloads.

  • App builds and updates

    The existing project uses Fastlane and GitHub Actions for builds, and CodePush for small updates.

Outcome

Profile and workout reports

I built the progress screen: profile, calendar, weekly activity chart, workout streak and friends’ activity. I added TypeScript and shared styles for the new screen within the existing app.

4,6
average App Store rating across 559 reviews
350+
guided exercises with video in the catalogue

Stack

  • React Native
  • TypeScript
  • Redux
  • React Navigation
  • Firebase
  • Cloud Firestore
  • RevenueCat
  • CodePush
  • HealthKit
  • Fastlane