Hangterápiás app iPhone-ra, Androidra és böngészőbe: vezetett programok, több mint 700 meditáció, világos és sötét téma, mindez egyetlen Flutter-kódbázisból.
Magyar nyelvű hangterápiás app iPhone-ra, Androidra és böngészőbe, világos és sötét témával. A FlutterFlow-ban készült MVP-ből olyan kód lett, amely teljesen az ügyfélé.
1 / 7
A projekt röviden
A Tudatosság Klub hangterápiás és meditációs alkalmazás magyar felhasználóknak. Felteszed a fülhallgatót, választasz egy meditációt vagy egy vezetett programot, és szánsz magadra napi tizenöt-húsz percet. A könyvtárban több mint 700 meditáció van 15 hangterápiába rendezve, az általános szorongástól az alváson át a mély relaxációig, mellettük pedig 28 program, 14 és 30 nap közötti hosszal.
Az első verziót 2025-ben FlutterFlow-ban építettük meg. 2026-ra a termék kinőtte: megbízható hanglejátszás, internet nélküli hallgatás, az áruházakon kívül értékesített előfizetés és teljes egészében saját kód kellett. Ezért saját Flutter-kódra írtuk át Supabase-en, iPhone-ra, iPadre, Androidra és böngészőbe, minden képernyőn világos és sötét témával. A képernyőképek egy előre feltöltött bemutatófiókból készültek, a nevek és a statisztikák ezért csak illusztrációk.
Főbb funkciók
Hangterápiás könyvtár: tematikus gyűjtemények, mindegyikben meditációk listája, és minden gyűjtemény első meditációja ingyenes.
Vezetett programok: naponta egy meditáció, a következő nap az előző befejezése után 24 órával nyílik meg.
Hangterápia-választó: néhány kérdés a helyzetedről, utána hozzá illő meditációk.
Lejátszó: hanghullám, léptetés, háttérben szóló hang és vezérlés a zárolt képernyőről.
Internet nélküli hallgatás: a letöltött meditáció kapcsolat nélkül is szól, az app újraindítása után is.
Napi hangulatkérdés öt arcból álló skálán, mellette statisztika a sorozatról és a heti célról, naptárnézettel és jelvényekkel.
Saját sorrendbe rakható kedvencek, napi emlékeztető és értesítési fal.
Programértékelések, amelyek csak adminisztrátori jóváhagyás után jelennek meg.
A webes alkalmazás
Ugyanaz a Flutter-kódbázis böngészőben is fut, webes alkalmazásként az app.tudatossagklub.hu címen. Széles képernyőn az alsó menüsávból oldalsáv lesz, a rácsok három-négy oszlopra nyílnak, így számítógépen is valódi asztali felületnek hat, nem széthúzott telefonnak.
1 / 6
A webes appnak van egy feladata, amelyet a telefonos appok nem vállalhatnak: itt lehet előfizetni. A Stripe fizetési oldala ugyanabban a lapon nyílik meg, és a fizetés után visszavisz az appba, a magyar számlát pedig a Billingo magától kiállítja. Aki telefonról vagy tabletről nyitja meg a webcímet, azt az oldal az alkalmazásboltba irányítja.
Világos és sötét téma
Minden képernyő két témában készült el: egy lágy, levendulás világosban és egy mélykék sötétben. Alapból az app a telefon beállítását követi, a fiókbeállításokban pedig kézzel is választhatsz.
1 / 5
Mindkét téma ugyanabból a közös szín- és stíluskészletből épül, így egy új képernyő mindkettőt automatikusan megkapja. Az automatikus elrendezési ellenőrzések minden támogatott képernyőméreten, mindkét témában lefutnak: így marad a sötét téma is teljes értékű, és nem kullog a világos után. Egy ekkora terméknél a közös stíluskészlet következetes használata a UI/UX tervezés kevésbé látványos, de annál fontosabb része.
Technológia és integrációk
Flutter és Dart: egy kódbázis iOS-re, Androidra és webre, Riverpod állapotkezeléssel és go_router navigációval.
Supabase: PostgreSQL, belépés és szerveroldali függvények, külön fejlesztői és éles projekttel Frankfurtban.
Cloudflare R2: hanganyagok és képek a klub saját médiadomainjéről.
Stripe és Billingo: webes fizetés, ügyfélportál és automatikus magyar számla.
OneSignal és Firebase Cloud Messaging: értesítések és napi emlékeztetők.
Firebase Hosting: a webes app kiszolgálása, mellette Crashlytics és teljesítménymérés.
Google Analytics és Microsoft Clarity: alapból kikapcsolva, csak a felhasználó hozzájárulása után indulnak.
Kihívások és megoldások
FlutterFlow-exportból saját kód. A kiinduló állapot 227 Dart-fájl volt, 2 605 ponton a FlutterFlow témájához kötve. Egy teljes újraírás hónapokra befagyasztotta volna a terméket, ezért menet közben, képernyőről képernyőre, tesztek védelmében írtuk át: először leágaztattuk az exportot, aztán átálltunk Firebase-ről Supabase-re, végül az utolsó FlutterFlow-függőségtől is megszabadultunk. Az app közben végig működött. Ilyen feladatokra való a cross-platform alkalmazásfejlesztés szolgáltatásunk.
Áruházon kívüli előfizetés, áruházi szabálysértés nélkül. A webes értékesítéssel a klub megspórolja az áruházi jutalékot, a telefonos appok viszont senkit nem terelhetnek külső vásárlás felé. Ezért vásárolni csak a webes appban lehet, az Android-app nem mutat fizetési oldalt, az iOS-app pedig olvasóalkalmazásként működik. A fizetős hanganyag lejátszásáról a szerver dönt, nem a felület, így egy zárolt meditáció minden platformon zárolt marad.
Hang, ami nem áll le. A meditációnak túl kell élnie a lezárt képernyőt, a váltást egy másik appra és egy alagutat vonatozás közben. A háttérlejátszás, a zárolt képernyős vezérlés és a letöltés beépített funkció, az internet nélkül hallgatott percek pedig bekerülnek a statisztikába, amint a telefon újra hálózatot talál.
Időkeret
A FlutterFlow-os MVP 2025-ben nagyjából három hónap alatt készült el. 2026 nyarán kezdtük el az átírást saját Flutter-kódra, és körülbelül három hónap múlva az app készen állt az áruházakra: több mint 380 commit, minden változtatásnál több mint 1 500 automatikus teszttel.
Eredmények
A webes alkalmazás él az app.tudatossagklub.hu címen. Az iOS- és az Android-app belső tesztelésben van a TestFlighton és a Google Playen, és készen áll az áruházi ellenőrzésre. Nyilvános felhasználószám még nincs, ezért nem is közlünk ilyet. Ami van: egy kódbázis, amely az ügyfélé, két téma, amely együtt halad, és egy fizetési folyamat, amely a fizetéstől a számláig emberi beavatkozás nélkül fut.
A mi szerepünk
Egyszemélyes stúdió vagyunk, és a Tudatosság Klubot az elejétől a végéig mi vittük: a UX- és UI-tervezést, a FlutterFlow-os MVP-t, az átállást Flutterre és Supabase-re, a webes appot, a Stripe- és Billingo-folyamatot és az áruházi kiadásokat. A telefonos appok, a webes felület és a háttérrendszer egy kézben volt, így semmi nem veszett el közöttük.
A Tudatosság Klubhoz hasonló, előfizetésre épülő appot a te ötletedből is megépítünk, vagy átvesszük a FlutterFlow-projektedet, és saját kódot készítünk belőle. Nálunk a cross-platform alkalmazásfejlesztés és a webalkalmazás-fejlesztés ugyanattól a csapattól kapod. Foglalj ingyenes konzultációt, és megbeszéljük, hogyan valósítható meg a te elképzelésed.
Képernyőképek
Eredmények
A webes alkalmazás él az app.tudatossagklub.hu címen, az iOS- és az Android-app még belső tesztelésben van
Egyetlen Flutter-kódbázis iPhone-ra, iPadre, Androidra és böngészőbe, minden képernyőn világos és sötét témával
Három hónap alatt FlutterFlow-exportból saját Flutter-kód lett Supabase-en, több mint 1 500 automatikus teszttel
Több mint 700 magyar nyelvű meditáció 15 hangterápiában, és 28 vezetett program
Gyakori kérdések
A Tudatosság Klub magyar nyelvű hangterápiás és meditációs alkalmazás. Több mint 700 meditációt kínál 15 hangterápiába rendezve, 14 és 30 nap közötti vezetett programokat, és statisztikát a sorozatról és a hangulatról. iPhone-on, iPaden, Androidon és böngészőben is működik. Önsegítő eszköz, nem orvosi kezelés.
A CompletApp tervezte és fejlesztette: az első, FlutterFlow-ban készült verziót, majd a teljes átírást saját Flutter-kódra, a Supabase-backendet, a Stripe- és Billingo-fizetést, a webes alkalmazást és az áruházi kiadásokat. A telefonos appokról, a webes felületről és a háttérrendszerről egyetlen stúdió döntött.
Az alkalmazás Flutterben és Dartban készült, egyetlen kódbázisból iOS-re, Androidra és webre. A Supabase adja a PostgreSQL-adatbázist, a belépést és a szerveroldali függvényeket, a hanganyagokat és képeket a Cloudflare R2 szolgálja ki. A fizetést a Stripe, a számlázást a Billingo intézi, az értesítéseket a OneSignal és a Firebase Cloud Messaging küldi, a webes appot a Firebase Hosting szolgálja ki.
Az első verzió FlutterFlow-ban készült, ami egy MVP-hez gyors, a kód viszont a vizuális szerkesztőhöz kötve marad. Egy olyan termékhez, amelynek saját hanglejátszás, internet nélküli hallgatás, tesztelt fizetés és hosszú távú karbantartás kell, az ügyfélnek saját kódra volt szüksége. A FlutterFlow-exportból három hónap alatt, képernyőről képernyőre, automatikus tesztekkel lett saját Flutter-alkalmazás Supabase-en.
Az előfizetést a webes alkalmazásban lehet megvásárolni a Stripe fizetési oldalán, amely a fizetés után visszaviszi a felhasználót az appba, a magyar számlát pedig a Billingo automatikusan kiállítja. Utána bármelyik eszközön be lehet lépni. A telefonos appok semmit nem árulnak, így megfelelnek az App Store és a Google Play szabályainak.
Igen, minden képernyő világos és sötét témában is elérhető. Alapból az app a telefon beállítását követi, a fiókbeállításokban pedig kézzel is választható a világos vagy a sötét megjelenés. Mindkét téma ugyanabból a közös szín- és stíluskészletből épül, és az automatikus elrendezési ellenőrzések mindkét témán lefutnak, így egyik sem marad le a másik mögött.
Többplatformos appot, webalkalmazást és egyedi weboldalt tervezünk és fejlesztünk, az ötlettől az indulásig. Az első, 30 perces konzultáció ingyenes, utána pontos feladatlistát, ütemtervet és fix árat kapsz.
Itt az App indítási checklist: pontosan azok a lépések, amelyekkel egy terméket ötlettől az élesítésig viszünk. Nyisd meg most, és add meg az e-mail címed, hogy elküldhessünk egy másolatot és néha egy hasznos jegyzetet.
A checklisted készen áll
Köszönjük. Nyisd meg a checklistet alább. Küldünk egy másolatot az e-mail címedre, utána pedig csak néha egy hasznos jegyzetet.
Sütiket használunk, hogy lássuk, hogyan használják az oldalt, és hogy mérni tudjuk a hirdetéseinket. Ami a működéshez kell, mindig fut. A többiről te döntesz. Adatvédelmi tájékoztató.
Működéshez szükségesMindig aktív
A nyelved, a témabeállításod, hogy a megjelenés melyik változatát láttad, és ez a sütidöntés, a böngésződben tárolva, hogy az oldal működjön, és hogy mérni tudjuk, melyik változat válik be jobban. Egyik sem azonosít téged, és nem követ más oldalakra.
Google Analytics 4 és Microsoft Clarity, hogy lássuk, mely oldalak segítenek, és javíthassuk azokat, amelyek nem.
Google Ads és a Meta pixel, valamint a megkeresésed elküldése a szerverünkről a Metának, hogy mérni tudjuk, mely hirdetések hoznak valódi megkeresést, és relevánsakat mutathassunk neked.
