Bellies Family

Mobiele app & productgids

In deze case laat ik zien hoe ik voor Bellies Family een app voor de massage gun heb gebouwd.

Kopers zien per klacht een instructievideo en lezen precies welk opzetstuk, welke snelheid en welke duur ze gebruiken, op iPhone en Android.

Type: Mobiele app
Mijn rol: Mobile developerStore-publicatieOnderhoud & doorontwikkeling
Tijdlijn: 2024 – heden
Opdrachtgever: Bellies Family

Uitdagingen en doelen

Bellies Family verkoopt massage guns met een hele set verschillende opzetstukken. Kopers kregen daarbij een handleiding, maar hun echte vraag was vaak: welke kop gebruik ik bij mijn klacht, op welke snelheid en hoelang?

Dat is in tekst lastig uit te leggen, zeker bij gevoelige plekken zoals de nek of de buik. Daarom is de inhoud opgedeeld in veertien klachten per lichaamsdeel, elk met een korte video van de juiste beweging.

Het doel: een app voor de massage gun die kopers bij elke klacht direct laat zien wat ze moeten doen.

Twee iPhones: links de uitlegpagina over hielspoor met opzetstukken en snelheid, rechts de instructievideo op volledig scherm. — Bij elke klacht staat de uitleg naast een video die op volledig scherm afspeelt.

Architectuur

De architectuur is opgebouwd rond een paar eenvoudige uitgangspunten:

01Één codebase voor iOS en Android
02Inhoud meegeleverd in de app
03Video's via de website
04Vaste portretweergave

Ionic en Angular leveren de schermen en Capacitor verpakt ze als echte app voor de App Store en Google Play.

Teksten en afbeeldingen zitten in de app zelf, de video's komen van de website van Bellies Family. Het diagram laat zien hoe die onderdelen samenhangen.

Architectuurdiagram: iPhone en Android openen de Bellies Family app, die schermen, inhoud en opslag op het toestel combineert en video's van de website van Bellies Family laadt. — Één app voor beide platformen; alleen de video's en het contactformulier gaan via internet.

Technieken

Alle klachten, massagekoppen en tips zijn vastgelegd als getypeerde TypeScript-modellen, met per klacht het opzetstuk, de snelheid, de beweging, de video en verwante klachten.

Zo volgt elke pagina hetzelfde patroon en is een nieuwe klacht één extra item in de lijst. Ionic Storage onthoudt op het toestel of iemand de intro al heeft doorlopen.

De app is gebouwd met Ionic, Angular en Tailwind CSS, en met Capacitor uitgebracht als native app voor iOS en Android.

Pagina's worden los geladen en op de achtergrond alvast klaargezet, zodat navigeren direct aanvoelt.

Ionic
Angular
TypeScript
Capacitor
Tailwind CSS
Swiper
ESLint
Android Studio
Xcode

Agile / Scrum

Ontwikkelproces

Ik heb de app alleen gebouwd, op basis van het ontwerp, de teksten en de video's van Bellies Family. Na elke testversie gaf de klant feedback, die ik in rondes verwerkte: van teksten en afbeeldingen tot video's.

Twee onderdelen zijn bewust weer verdwenen: de licentiecode bij de eerste start en een aparte e-bookpagina. Nu opent de app met één knop en staat alle uitleg direct in de app.

Sprint01en weer opnieuw ↻

Planning
Analyseren
Ontwerpen
Implementeren
Testen
Onderhouden

Implementatie

Alle klachtenpagina's delen één vaste opbouw, gevuld vanuit één centrale lijst met inhoud.

Nieuwe onderdelen, zoals Tips & Tricks en de kogelkop, kwamen erbij na feedbackrondes met de klant. In maart 2026 verscheen de app in de App Store, en updates gaan als nieuwe versie naar beide stores.

Codefragment uit klachten.service.ts met de inhoud voor nekpijn: titel, opzetstukken, snelheid, beweging, video en verwante klachten. — Elke klacht is één item in een centrale lijst; de app bouwt er zelf de pagina van.

Terminal met de uitvoer van ng lint, waarin alle bestanden slagen, en een geslaagde productiebuild van 744 kB. — Lint en productiebuild vormen de technische controle vóór elke release.

Testen

De kwaliteit wordt vooral handmatig bewaakt: de klant liep elke testversie door en gaf feedback in rondes. Technisch controleert ESLint de code en moet de productiebuild van Angular foutloos slagen voordat er een nieuwe versie naar de stores gaat.

Geautomatiseerde tests zijn er nog niet; die staan als volgende stap op de lijst.

Continuous development & integration

Er is geen geautomatiseerde pipeline: ik bouw en controleer elke versie lokaal met ng lint en een productiebuild.

Daarna zet Capacitor de wijzigingen door naar de Android- en iOS-projecten. Voor een app met vaste inhoud en weinig releases houdt dat het proces overzichtelijk.

Na akkoord van de klant bouw ik de release in Android Studio en Xcode en upload ik die naar Google Play en App Store Connect.

Na de review van Google en Apple staat de nieuwe versie live. Het versienummer loopt per release op, zodat altijd duidelijk is welke versie gebruikers hebben.

Stroomdiagram van de releaseflow: lokaal linten en bouwen, akkoord van de klant, bouwen in Android Studio en Xcode, uploaden naar beide stores en live na review. — Releases gaan handmatig, maar altijd in dezelfde volgorde naar beide stores.

01 / 04

Screenshots

Van lichaamsdeel naar klacht in twee tikken, met onderaan suggesties voor verwante klachten.

Verder kijken

Meer case studies

Bekijk alle cases

Mobiele app & API

Mektep

App voor aanwezigheidsregistratie bij een leerkring in Rijswijk: deelnemers checken met één tik in en sparen punten, beheerders plannen lessen.

Bekijk case

Overname & beveiliging

KampanYES

Een folder-app voor winkelaanbiedingen die ik heb overgenomen, beveiligd en verder ontwikkel: van mobiele app en admin-panel tot API.

Bekijk case

SaaS & automatisering

MijnDakje

Huurwoning-zoekplatform met automatisch reageren: MijnDakje doorzoekt bijna dertig verhuursites en meldt nieuwe matches binnen minuten.

Bekijk case

Een goed begin

Heb jij een digitaal vraagstuk dat verder mag?

Vertel me waar je aan werkt. Dan verken ik samen met jou wat er technisch nodig is om vooruit te komen.

Plan een kennismaking

vraag.tsroute.tscontact.ts

// Van vraag naar richtingconst route = { inzicht: true, richting: true, volgendeStap: 'helder',}plan(route)[klaar] tijd voor een kennismaking.