23TopTraining | Personal training app built with Ionic and Firebase

Main screen of the 23TopTraining mobile app with direct access to training plans.

Project summary

23TopTraining started from a very concrete brief: take the training method of Juancar, a Madrid personal trainer with years of experience coaching athletes and demanding clients, and turn it into his own mobile app so it could reach many more people without losing the trainer's criteria.

Digitup designed and built the whole product — experience, interface, backend and back office. The project started with a shared moodboard, went through several design iterations and in-person working sessions, and ended with a hybrid app published on iOS and Android with a sober, modern visual language true to the brand.

View project

What we built

An app for the user, a back office for the trainer and the infrastructure connecting both.

iOS and Android app

Hybrid Ionic application shipped to both stores from a single codebase.

Weekly plans

Training organised by week and goal, with progression and rest days.

Guided sessions

Exercises with sets, reps and cues to follow the session from the phone.

Trainer back office

Panel to create plans, assign sessions and manage users without development.

Push notifications

New session alerts and reminders that sustain consistency week after week.

Identity and UX/UI

A distinctive, sober visual language built from a moodboard with the client.

Login and registration screens of the 23TopTraining mobile app

Context and need

A personal trainer has an obvious ceiling: the hours in the calendar. In-person work is excellent, but it only scales by hiring more trainers or diluting the quality of the follow-up. The alternative was to package the method into a digital product that kept the same level of personalisation.

The starting point was not an abstract idea but a method already proven with real clients: sessions adapted to each goal, weekly progression, varied stimuli and constant support. The challenge was translating that knowledge — which lived in the trainer's head and in his worksheets — into data structures, screens and automations.

The problem to solve

Most generic fitness apps fail in the same way: they offer huge exercise catalogues with no criteria, and users end up training without knowing why they are doing what they are doing. Here the product had to feel as if the trainer had personally prepared the week, because in practice he had.

That meant solving three things at once: a user experience that guides the session without friction — phones are used between sets, in a hurry and sometimes with a poor connection —, a back office where the trainer could create and adjust plans without depending on us, and a communication channel to sustain consistency, which is where most users are lost.

The solution built by Digitup

We started with design. A moodboard gathered references from the trainer and the team until we settled on a distinctive visual language: dark background, gold accents, condensed type and plenty of breathing room. From there, several UX iterations and in-person sessions to validate every flow with the person who knows the method best.

The app was built as a hybrid application with Ionic, which made it possible to ship on iOS and Android from a single codebase, with Firebase as the backend for authentication, data and push notifications. On top of that we built a back office where the trainer creates plans, organises sessions and manages users without touching code.

The result is a product the business can run on its own: the trainer publishes the week's plan, the user receives it on their phone, trains, marks sessions as done and gets reminders that help them not to drop off. The method stays the same; what changes is how many people can follow it at once.

The product on screen

Onboarding screens of the 23TopTraining mobile app

Exercise screen of the 23TopTraining mobile app

App Store and Google Play screens for 23TopTraining

Key features

User sign-up and login
Personalised weekly training plan
Sessions with exercises, sets and reps
Completed session tracking
User progress overview
Push notifications for sessions and reminders
User management from the back office
Plan creation and editing by the trainer
Supporting media for exercises
App Store and Google Play release

How we worked

Shared moodboard with the client
Turning the method into product structure
Wireframes and user flows
UI design iterations
In-person working sessions
Hybrid development with Ionic
Backend and data on Firebase
Store release and ongoing support

Architecture and technology

The app was built with Ionic and Angular on a single codebase for iOS and Android, a decision that halves maintenance cost and lets changes ship to both platforms at once. Firebase handles authentication, database, content storage and push notification delivery.

The back office is what makes the product sustainable: without it, every new plan would be a development task. With it, the business operates autonomously and the technical team only steps in to add new capabilities.

Ionic Angular Firebase Cloud Firestore Firebase Auth Push notifications iOS Android Back office UX/UI

Project impact

23TopTraining turned a service limited by calendar hours into a digital product able to grow: the same method, available to anyone with a phone, and a brand with its own presence in the app stores.

For Digitup it is a clear example of how we work with businesses that already function: we don't start from an abstract idea but from a validated method, and we turn it into software the client can run, measure and grow.

Frequently asked questions

What did Digitup do on the 23TopTraining project?

Digitup Studio designed and built the entire product: visual identity and UX/UI of the app, hybrid iOS and Android development with Ionic, a Firebase backend, the trainer back office, push notifications and the store release.

What technology is the app built with?

Ionic and Angular on a single codebase for iOS and Android, with Firebase as the backend for authentication, database, content and push notifications.

How long does it take to build a training app like this?

A first shippable version of a training app with plans, sessions, back office and notifications usually takes between two and four months, depending on the scope of the method and the number of user roles.

Can the trainer create plans without technical help?

Yes. The back office allows creating plans, organising sessions and managing users with no involvement from the development team, which is exactly what makes the product sustainable long term.

Does Digitup build mobile apps for other industries?

Yes. Digitup Studio is a technical studio based in Madrid that builds mobile apps, SaaS platforms, back offices and custom integrations for mobility, finance, education, sport, tourism and professional services.