- Klient
- Mingly, česká seznamka zaměřená na bezpečné seznamování
- Co jsme dělali
- Kompletní webovou aplikaci od registrace po pohled kouče, ve spolupráci s Česko.Digital
- Technologie
- Next.js 14, React 18, headless WordPress, Socket.IO, Azure
ZadáníCo Mingly potřebovalo?
Funkční seznamku, kterou půjde rozšířit do dalších zemí. Mingly je česká seznamka, která se profiluje jako průvodce bezpečným seznamováním. Stojí za ní odborníci, kteří se seznamováním zabývají více než deset let. Projekt vznikl ve spolupráci s komunitou expertních dobrovolníků z Česko.Digital.
Rozsah vycházel z grafického prototypu ve Figmě a zahrnoval desítky modulů, od veřejných stránek po správu uživatelů. Na aplikaci byly kladeny požadavky, které běžná seznamka neřeší:
- Párování podle hodnotUživatel nejdřív vyplní dotazník, podle kterého se hledá vhodný protějšek.
- Odborník v procesuKouč musí vidět profil uživatele a dát mu k němu zpětnou vazbu.
- Přístupnost pro všechnySoučástí rozsahu byla podpora pro nevidomé uživatele.
- Obsah bez programátoraSekce O nás, tipy pro seberozvoj a podcasty spravuje klient sám.
- Připravenost na další trhyLokalizace a samostatné nasazení pro další zemi.
Projekt začínal na zelené louce. Nenavazovali jsme na žádný starší systém, takže jsme architekturu, datový model i nasazení navrhli od nuly přesně pro potřeby Mingly.
ŘešeníCo aplikace umí?
Seznamování, komunitu i práci kouče v jedné aplikaci. Postavili jsme ji na Next.js s WordPressem jako obsahovým a datovým zázemím. Sociální funkce stojí na BuddyPressu, zprávy v reálném čase na Socket.IO a celé řešení běží v Microsoft Azure.
-
Seznamování
Registrace a onboarding, párovací dotazník hodnot a představ o budoucnosti, seznamka s profily ostatních, přátelé a oblíbení a LoveReport.
-
Komunikace a komunita
Zprávy mezi uživateli v reálném čase, místnosti pro komunitu podobně smýšlejících lidí a upozornění v aplikaci.
-
Odborná podpora
Pohled kouče na profil uživatele se zpětnou vazbou, seberozvoj s tipy, články a podcasty z WordPressu a kurzy.
-
Provoz a správa
Profil, nastavení a podpora, správa uživatelů pro tým Mingly, balíčky předplatného s platební bránou ČSOB a podpora pro nevidomé.
ArchitekturaNa čem Mingly běží?
Na Next.js nad headless WordPressem, v ekosystému Microsoft Azure. WordPress dává klientovi pohodlnou správu obsahu a BuddyPress hotový základ pro profily, přátelství a skupiny. Vlastní logiku aplikace a celé uživatelské rozhraní jsme napsali v Next.js.
| Část | Volba | K čemu |
|---|---|---|
| Frontendrozhraní | TypeScript, Next.js 14, React 18, Tailwind CSS, Flowbite, Headless UI | Konzistentní a responzivní rozhraní, animace přes Framer Motion, grafy v Chart.js |
| Formulářeregistrace, dotazník | React Hook Form, Zod, Jotai | Validace dlouhých formulářů a správa stavu aplikace |
| Obsah a databackend | Headless WordPress, BuddyPress REST API, MySQL | Obsah spravuje klient sám, sociální funkce mají hotový základ |
| Komunikacev reálném čase | Socket.IO | Zprávy a komunitní místnosti bez obnovování stránky |
| Identitapřihlášení a klíče | NextAuth s JWT, Azure Key Vault | Přihlášení napojené na uživatele ve WordPressu, tajné klíče mimo kód |
| Provozcloud | Azure App Service, Blob Storage, Application Insights, Docker | Běh aplikace, fotky a soubory s kompresí už v prohlížeči, monitoring v produkci |
| NasazeníCI/CD | GitHub Actions | Samostatné pipeline pro českou verzi, španělskou verzi a testovací prostředí |
ExpanzeJak se Mingly dostalo do další země?
Ze stejného kódu, jen s jinou konfigurací, překladem a obsahem. Rozšiřitelnost do dalších zemí byla součástí zadání od začátku. Vedle české verze na mingly.cz dnes běží španělská verze na mingly.mx. Každá země má vlastní nasazení, lokalizaci přes i18next a vlastní instanci WordPressu s obsahem pro daný trh.
PrůběhJak probíhal vývoj?
Ve dvou fázích, v týdenním rytmu a s klientem u stolu. Projekt jsme řídili v Jiře společně s product ownerem na straně klienta. Po celou dobu vývoje probíhaly pravidelné týdenní schůzky, na kterých jsme s týmem Mingly procházeli aktuální stav, řešili překážky a nastavovali priority na další týden.
- NávrhGrafický prototyp ve Figmě, ze kterého vycházel rozsah všech modulů.
- Fáze 1Jádro aplikace: registrace, dotazník, onboarding, profily, seznamka, zprávy, LoveReport, pohled kouče a správa uživatelů.
- Fáze 2Rozšíření: upozornění, předplatné, kurzy, komunita a místnosti, podpora pro nevidomé a desktopový vzhled.
Na straně Develogi na projektu pracoval projektový manažer, architekt, lead vývojář, který měl na starosti backend, analýzu požadavků a mentoring, a frontend vývojář.
Slovo klientaJak spolupráci vidí Mingly?
„Spolupráce s Develogi byla skvělá. Komunikace fungovala od začátku až do konce, díky týdenním schůzkám jsme měli stále přehled o stavu projektu a vše bylo dodáno v rámci dohodnutých termínů. Když něco nefungovalo, tým se ozval hned a vždy jsme společně rychle našli řešení.“
Mgr. Kristýna Mertlová a Mgr. Ing. Jakub Mertl, Ph.D., Mingly4