SkinApe – Migracja aplikacji 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

Celem było stworzenie:

• 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 doświadczenia 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 aplikacja jednostronicowa (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

• Landing page
  Stworzone w oparciu o zestaw reużywalnych komponentów. Każdy z landingów wykorzystuje tę samą strukturę. Najważniejsze elementy:
  • Sekcja hero z maskotką SkinApe, dynamicznym nagłówkiem i wyraźnym CTA.
  • Sekcja Trustpilot z oceną i opiniami, wspierająca budowanie zaufania.
  • QR Code + App Download – szybkie przejście do pobrania aplikacji mobilnej.
  • Explore Games & Giftcards – prezentacja oferty gier, platform i kart podarunkowych.
  • Sekcja 4 Steps – krótkie wyjaśnienie procesu (jak zdobyć nagrody krok po kroku).
  • Promo code section – możliwość wpisania kodu promocyjnego bezpośrednio na landingu.
  • Rozbudowana stopka z nawigacją, linkami prawnymi, socialami i informacjami o SkinApe.
• Logowanie
  Aplikacja integruje pięć metod logowania przez Firebase Authentication (Google OAuth, Facebook OAuth, Apple ID, Email, Logowanie jako gość).
• Mainpage
  Stanowi centralny punkt aplikacji, który prezentuje wszystkie najważniejsze funkcje i aktualne oferty. Najważniejsze elementy:
  • Nawigacja główna + wybór języka.
  • Dynamiczne bannery promocyjne.
  • System celów i postępy.
  • Invite & Earn lub Claim Coins – zależnie od stanu użytkownika (nagroda do odebrania lub panel referral).
• Earn
  Kluczowa część SkinApe - to tutaj użytkownicy zdobywają monety. Główne sekcje to:
  • Quests – lista zadań z gier i aplikacji.
  • Providers – lista kart partnerów.
  • In Progress – zadania rozpoczęte, z paskami postępu i możliwością kontynuacji.
• Shop
  Umożliwia wydawanie monet na skiny CS2 i karty podarunkowe. Funkcje specjalne:
  • wyszukiwarka, dynamiczne ceny i monitoring stanów magazynowych
  • rozbudowane filtry
  • unikalne URL dla popupów - wsparcie SEO,
  • ostrzeżenia regionalne dla kart podarunkowych
• Redeem Code
  Moduł umożliwia realizację:
  • kodów promocyjnych,
  • kodów referralowych.
• Referral
  System poleceń pozwala zarabiać monety przez zapraszanie znajomych. Elementy:
  • unikalny kod referralowy, szybkie udostępnianie linku, kopiowanie jednym kliknięciem
  • prowizja od aktywności zaproszonych użytkowników + system bonusów
  • statystyki, lista aktywnych „earning friends”.
• Profile
  Panel użytkownika zawierający:
  • dane konta, premium status i historia aktywności
  • integracje: Steam Trade URL (wypłaty skinów), Roblox username, Discord ID
  • historia zadań i wypłat ze statusami
• Blog
  Blog oparty o Ghost CMS.

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.