Większa dostępność, dzięki migracji aplikacji SkinApe do wydajnej platformy webowej

Celem było stworzenie nowoczesnej aplikacji webowej (optymalnej dla desktop i mobile), działającej w oparciu o istniejącą infrastrukturę backendową Firebase i zgodnej z dotychczasowym modelem danych oraz logiką aplikacji mobilnej.

Wyzwanie

W ramach realizacji zaplanowaliśmy wdrożenie:

• responsywnej aplikacji webowej odwzorowującej kluczowe funkcjonalności wersji mobilnej,
• w pełni zintegrowanej z istniejącym backendem w Firebase,
• zoptymalizowanej pod urządzenia desktopowe i mobilne,
• niezależnej od ograniczeń dystrybucyjnych Google Play i App Store,

Największym wyzwaniem projektu była pełna migracja rozwiązania mobilnego na web, bez utraty spójności działania i przy zachowaniu integracji z istniejącym backendem.

Rozwiązanie

Aplikacja została zaprojektowana jako (SPA) w oparciu o:

• Frontend: Next.js (SPA + SSR dla szybkiego startu i SEO), React, Tailwind CSS (mobile-first).
• Backend: istniejący Firebase (bez zmian w rdzeniu backendu), zapewniający pełną kompatybilność z aplikacją mobilną.
• Firebase Authentication: Google, Facebook, Apple, Email (Magic Link), logowanie anonimowe.
• Systemy zewnętrzne
  • Ghost CMS (istniejący blog) - źródło artykułów blogowych, kategorii, tagów, featured content.
  • Zendesk - obsługa wsparcia (Get Help).
  • Partnerzy offerwall i dostawcy zadań.

Kluczowe funkcjonalności

W ramach realizacji dla SkinApe zaprojektowaliśmy i wdrożyliśmy spójny ekosystem kluczowych elementów produktu: skalowalne landingi oparte na reużywalnych komponentach (z mocnym hero, czytelnym CTA, sekcjami budującymi zaufanie, szybkim przejściem do pobrania aplikacji oraz klarownym opisem ścieżki użytkownika), a także aplikację z uproszczonym onboardingiem i wieloma metodami logowania. W samym produkcie zbudowaliśmy centralny ekran sterujący komunikacją i ofertami, moduł „Earn” do zdobywania monet przez zadania i partnerów z widocznymi postępami, sklep do wymiany monet na nagrody (z wyszukiwaniem, filtrami, dynamiczną prezentacją dostępności i wsparciem dla kontekstu regionalnego), obsługę kodów promocyjnych i referralowych oraz system poleceń z udostępnianiem i statystykami. 

Uzupełnieniem całości jest profil użytkownika z integracjami pod wypłaty i kanały społecznościowe, historią aktywności i statusami, a także blog oparty o Ghost CMS - wszystko zaprojektowane tak, by zwiększać konwersję, utrzymywać spójność UX i umożliwiać dalszą rozbudowę bez przebudowy fundamentów.

Rezultaty

• Otwarcie platformy na nowych użytkowników – brak konieczności instalacji aplikacji mobilnej, dostęp bezpośrednio przez przeglądarkę.
• Nowoczesna, modułowa architektura oparta o Next.js i Tailwind, ułatwiająca rozwój i iterację.
• Pełna kompatybilność z istniejącym Firebase backendem – bez konieczności przepisywania logiki serwerowej.
• Responsywna, spójna platforma - użytkownik może płynnie przechodzić między mobile a web, zachowując swoje konto i stan.
• Edukacyjny onboarding i blog pomagają lepiej zrozumieć produkt i zwiększają zaangażowanie.
• Zoptymalizowane interfejsy i popupy wpływają na wyższą konwersję.

Podsumowanie

SkinApe Web to kompleksowa migracja produktu z Unity do przeglądarki, zbudowana w Next.js i zintegrowana z ekosystemem Firebase (Auth, Realtime Database, Functions, Remote Config). Projekt przenosi kluczowe funkcjonalności aplikacji mobilnej na web, zachowując spójność UX oraz logiki biznesowej: od logowania i onboardingu, przez zarabianie monet i wymianę nagród, po profil użytkownika, system poleceń i zintegrowane wsparcie Zendesk.

Efektem jest nowoczesna, responsywna platforma webowa, która zwiększa dostępność produktu i elastyczność rozwoju, jednocześnie pozwalając ominąć ograniczenia dystrybucji w sklepach mobilnych.