- Domov
- Referencie
- Vývoj web aplikácií
- Battlecoin
Vývoj mobile-first hernej PWA na Reacte a Firebase
Frontend
Zustand
Infraštruktúra
Dodanie
1 mesiac
BattleCoin je mobile-first herná PWA aplikácia, ktorá kombinuje virálny mining model známy z Pi Network s novými hernými mechanikami. Projekt stavia na súbojoch 1v1, práci s hernou ekonomikou a sociálnej viralite, pričom monetizácia je riešená cez nákup herných bonusov.
O technológii
SERVERLESS ARCHITEKTÚRA
- Frontend aplikácia bola postavená na serverless architektúre s využitím platformy Vercel, ktorá umožnila rýchle nasadenie, jednoduchú správu prostredí a vysokú flexibilitu pri ďalšom rozvoji produktu.
- Tento prístup výrazne prispel k rýchlosti uvedenia aplikácie na trh a minimalizoval infraštruktúrny overhead.
FIREBASE
- Využitie Firebase umožnilo rýchly štart vývoja bez potreby budovania vlastnej infraštruktúry. Hotové riešenia pre autentifikáciu, databázu a push notifikácie znížili vstupnú bariéru a podporili rýchly vývoj a nasadenie.
- Možnosť dynamickej výmeny assetov bez redeployu urýchlila iterácie počas vývoja aj po uvedení produktu na trh.
- Firebase tak prirodzene doplnil serverless architektúru a prispel k rýchlemu, škálovateľnému a flexibilnému riešeniu.
RIVE FRAMEWORK
- Pre dynamické a interaktívne animácie bol použitý Rive framework, ktorý sme na strane frontendu kompletne implementovali a prepojili s aplikačnou logikou.
O PROJEKTE
Klient potreboval v krátkom čase dostať na trh nový herný produkt vo forme mobile-first PWA aplikácie. Projekt staval na silnom virálnom princípe a kombinoval prvky gamifikácie, sociálnej interakcie a mikrotransakcií.
Zatiaľ čo backend, dizajn a animácie boli zo strany klienta zabezpečené, frontend vývoj – vrátane architektúry, technického riešenia a finálnej realizácie – bol plne v našej réžii. Výsledkom je funkčný, škálovateľný herný produkt dodaný v priebehu jedného mesiaca.
ako sme postupovali:
1. Integrácia frontendu s backendom
Nastavili sme autentifikáciu a overili plynulosť komunikácie frontendu s backendovými API, vrátane práce s dátovými tokmi.
2. Implementácia UI a animácií
Frontend bol prepojený s dodanými dizajnmi a Rive animáciami, pričom animácie boli napojené na aplikačnú logiku a používateľské interakcie.
3. Vývoj obrazoviek a hernej logiky
Implementovali sme jednotlivé obrazovky, herné mechaniky a napojenie na backend.
4. Refaktoring a rozšírenie scope
V tejto etape sme pristúpili refaktoru kódu, keďže ten bol vo veľkej miere generovaný pomocou AI nástrojov. Frontend sme stabilizovali a prispôsobili produkčným štandardom. Zároveň sme reagovali na nové požiadavky a funkcionality vznikajúce počas vývoja na strane backendu.
5. Testovanie a stabilizácia
Realizovali sme manuálne testovanie, riešili hraničné stavy, responzivitu naprieč zariadeniami a celkovú stabilitu produktu.
VÝZVA
Najväčšou výzvou projektu bol časový tlak v kombinácii s paralelným vývojom na strane klienta. Frontend tím musel flexibilne reagovať na meniace sa zadania, nové features prichádzajúce počas vývoja a zároveň zabezpečiť, aby výsledná aplikácia pôsobila konzistentne, stabilne a bola pripravená na reálne používanie.
Technickou výzvou bola aj responzivita naprieč všetkými zariadeniami a práca s animáciami, pričom časť nedokonalostí bolo potrebné kompenzovať priamo na strane frontendu – programátorskými úpravami a logikou naviazanou na Rive animácie.
Na začiatku projektu nám bol zo strany klienta poskytnutý vibe-coded prototyp, čo výrazne skrátilo prvú fázu vývoja, no zároveň kládlo dôraz na refaktoring, stabilizáciu kódu a jeho prípravu na produkčné nasadenie.
Výsledky a biznisový prínos
V priebehu jedného mesiaca sme pomohli klientovi uviesť na trh funkčný mobile-first herný produkt, postavený na virálnych mechanikách, ktoré podporujú rýchly organický rast používateľov.
Aplikácia kombinuje mining, pozývanie používateľov a 1on1 súboje, pričom rebríčky, profily, história hier a push notifikácie zvyšujú engagement a návratnosť hráčov.
Vďaka škálovateľnej serverless architektúre je riešenie pripravené na rýchly rast, ďalšie iterácie produktu a budúce rozšírenia, vrátane integrácie crypto peňaženiek bez nutnosti zásadných technických zmien.
Náš klient získal:
- Funkčný herný produkt do 1 mesiaca: Kompletná mobile-first PWA aplikácia vrátane funkcionalít nad rámec pôvodného zadania.
- Rýchle uvedenie na trh (time-to-market): Serverless architektúra a efektívny frontend vývoj umožnili okamžité nasadenie bez infraštruktúrnych oneskorení.
- Škálovateľné technické riešenie: Frontend architektúra bola navrhnutá tak, aby zvládla budúci rast používateľov aj ďalší rozvoj produktu.
- Vysokú kvalitu aj pri extrémnom časovom tlaku: Stabilný a udržiavateľný napriek krátkemu vývojovému cyklu.
- Moderný technologický stack: Využitie serverless prístupu, Reactu a Firebase prinieslo rýchlosť, flexibilitu a nižšie prevádzkové náklady v úvodnej fáze projektu.