Skip to content
Syed Zubair
All work

Case study 04

A Kotlin app, rebuilt in React Native, with AI and live workouts.

A fitness coaching app I moved from native Kotlin to React Native, then redesigned from scratch. It now runs on iOS and Android, tracks every set and plans meals with AI.

Company
TheHexaTown
Year
2025
Platform
iOS, Android
Stack
React Native, TypeScript, Redux Toolkit, Socket.IO, VisionCamera, Firebase
Status
Live
A hand holds a phone showing the 6-Pack Macros home screen, beside the app's tagline: Changing lives, one rep at a time.
2
app stores from one codebase
34 to 52
screens, Kotlin to React Native

01 / The problem

The first 6-Pack Macros app was native Android code, written in Kotlin. It logged food and listed workouts. But it could not track a workout while you train, it had no AI and no chat with your coach, and the design needed a fresh start.

02 / What I built

  • One codebase, two stores

    I moved the app from Kotlin to React Native. One TypeScript codebase now ships to iOS and Android.

  • A new design system

    Tokens, a theme and shared parts came first. Then every screen was rebuilt on top of them.

  • A live workout tracker

    Pick a routine, log each set as you go, and see your past records for every exercise.

  • AI meal plans

    Pick the foods you like, your allergies, cuisines, meals per day and how long the plan runs. The app builds the plan day by day.

  • Scan a barcode or a plate

    One camera screen reads barcodes. Flip it, take a photo of your meal, and AI works out what is on the plate.

  • Chat and coach mode

    Live chat with your coach, with photos and files. A coach can step into any client's app and see their day.

03 / Key decisions

01

Move first, redesign second

The React Native version came first and kept the same flows as the Kotlin app. The new design came after, on its own design system. So the two big changes never landed on people at the same time.

02

One scanner, two modes

Barcodes are read right on the phone. A meal photo goes to the server for AI, and each person gets a monthly scan limit, so AI costs stay capped. The screen shows how many scans are left.

03

A coach steps into the client's app

There is no second app for coaches. A coach picks a client and the whole app switches to that client's data, so they see exactly what the client sees. Switching clients clears the old macro data first.

04

Sign in once, stay signed in

Every request goes through one shared client. When the access token runs out, it gets a new one in the background, so people are not thrown back to the login screen.

04 / Screens

A hand holding a phone that shows calories left, macro rings, the next workout and a weight chart
The new home screen holds the day: food, training and weight.
The macro screen on a tilted phone, with the carb ring and the weight chart in view
Macro rings show what is left for the day.
The workout card on a tilted phone, showing sets, reps and rest time
A workout card carries sets, reps and rest.

05 / Outcome

The rebuilt app is live on Google Play and the App Store. One TypeScript codebase replaced the Kotlin one.

Members log food, train and message their coach in one app.

A coach can open that same day from their own phone.

Get it on the App Store · Get it on Google Play

Contact

Got an idea? Let's build it.

Start a project
Next case studyAl-Khalil 05 / 07