KLIENT:
SkinApe

Migracja z mobile do web bez utraty użytkowników ani logiki biznesowej

Podsumowanie projektu

PROJEKT LIVE
KLIENT
SkinApe
ZESPÓŁ
  • Front-end Developer
  • Tester

Rezultaty

  • Dostęp z każdej przeglądarki

    bez instalacji i bez pośrednictwa sklepów mobilnych

  • Ciągłość kont użytkowników

    te same konta, monety i postępy na mobile i w webie

  • Backend nietknięty

    pełna kompatybilność z istniejącym Firebase

  • Architektura gotowa na rozwój

    reużywalne komponenty i modułowe landingi

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ń.

 

laptop z nową stroną skinape

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.

ręką trzymająca telefon z otwartą stroną skinape

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ę.

 

tablet z otwartą stroną skinape

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.

Render 3D różowej chmury połączonej z procesorem – ilustracja architektury chmurowej

Wykorzystane technologie

Frontend

Next.js w modelu SPA + SSR dla szybkiego startu i SEO, Tailwind CSS w podejściu mobile-first.

Backend

Istniejący backend bez zmian w rdzeniu, zapewniający pełną kompatybilność z aplikacją mobilną.

Systemy zewnętrzne

Istniejący blog jako źródło artykułów, kategorii, tagów i featured content.

Wyceń swój projekt