SkinApe – Migration of the application to a high-performance web platform

The goal of the project was to develop a modern web application (optimized for both desktop and mobile devices) based on the existing Firebase backend infrastructure, fully aligned with the current data model and business logic of the mobile application.

Challenge

The objective was to create:

• a responsive web application that replicates the core functionalities of the mobile version,
• full integration with the existing Firebase backend,
• optimization for both desktop and mobile devices,
• a solution independent of the distribution limitations of Google Play and the App Store.

The main challenge of the project was to successfully migrate the complete mobile user experience to the web while maintaining functional consistency and seamless integration with the existing backend.

Solution

The application was designed as a Single Page Application (SPA) built on the following stack:

• Frontend: Next.js (SPA with SSR for fast initial load and SEO), React, Tailwind CSS (mobile-first).
• Backend: Existing Firebase infrastructure (no changes to the core backend), ensuring full compatibility with the mobile app.
• Firebase Authentication: Google, Facebook, Apple, Email (Magic Link), and anonymous login.
• External Systems
  • Ghost CMS – source of blog articles, categories, tags, and featured content.
  • Zendesk – customer support (Get Help).
  • Offerwall partners and task providers.

Key Features

• Landing Page

  Built using a set of reusable components. All landing pages follow the same structure. Key elements include:

  • Hero section with the SkinApe mascot, a dynamic headline, and a clear CTA.
  • Trustpilot section with ratings and reviews to build trust.
  • QR Code + App Download for quick access to the mobile app.
  • Explore Games & Gift Cards – presentation of available games, platforms, and gift cards.
  • 4 Steps section – a short explanation of how to earn rewards step by step.
  • Promo code section – ability to enter a promo code directly on the landing page.
  • Extended footer with navigation, legal links, social media, and SkinApe company information.

• Authentication

  The app supports five login methods via Firebase Authentication: Google OAuth, Facebook OAuth, Apple ID, Email login, and Guest login.

• Main Page

  The central hub of the application, showcasing key features and current offers. Main elements:

  • Main navigation and language selector.
  • Dynamic promotional banners.
  • Goals and progress tracking system.
  • Invite & Earn or Claim Coins – displayed depending on the user’s state (referral panel or available reward).

• Earn

  The core section of SkinApe where users earn coins. Main areas include:

  • Quests – list of tasks from games and apps.
  • Providers – partner offer cards.
  • In Progress – started tasks with progress bars and continuation options.

• Shop

  Allows users to spend coins on CS2 skins and gift cards. Special features include:

  • Search, dynamic pricing, and stock availability monitoring.
  • Advanced filtering options.
  • Unique URLs for popups to support SEO.
  • Regional warnings for gift cards.

• Redeem Code

  A module for redeeming:

  • Promo codes.
  • Referral codes.

• Referral

  The referral system enables users to earn coins by inviting friends. Features include:

  • Unique referral code.
  • One-click link sharing and copying.
  • Commission based on referred users’ activity plus bonus system.
  • Statistics and a list of active “earning friends”.

• Profile

  User dashboard containing:

  • Account details, premium status, and activity history.
  • Integrations: Steam Trade URL (skin withdrawals), Roblox username, Discord ID.
  • Task and payout history with statuses.
  • Management of active withdrawals and expiration mechanisms.

• Blog

  A blog powered by Ghost CMS.

Results

• Opening the platform to new users - no need to install a mobile app, with direct access through the browser.
• A modern, modular architecture based on Next.js and Tailwind, making further development and iteration easier.
• Full compatibility with the existing Firebase backend - no need to rewrite server-side logic.
• A responsive and consistent platform - users can seamlessly switch between mobile and web while keeping their account and progress.
• Educational onboarding and a blog help users better understand the product and increase engagement.
• Optimized interfaces and pop-ups contribute to higher conversion rates.

Summary

SkinApe Web is a full migration of the product from Unity to the browser, built with Next.js and integrated into the Firebase ecosystem (Auth, Realtime Database, Functions, Remote Config). The project brings core mobile app functionality to the web while maintaining consistent UX and business logic - from authentication and onboarding, through earning coins and redeeming rewards, to user profiles, referral systems, and integrated Zendesk support.

The result is a modern, responsive web platform that improves product accessibility and development flexibility, while also bypassing the distribution limitations of mobile app stores.