#1
Sanlo

Webshop Builder

A no-code, performance-optimized platform enabling mobile game studios to spin up branded webshops, manage in-game items, run promos, and publish with one click—all without touching a line of code.

React (Create React App) Redux Toolkit Vite Adyen CraftJS Tailwind CSS TypeScript Chakra UI

Intro

Mobile game developers need fast, flexible storefronts that match their brand and integrate directly with their games. At Sanlo, we crafted a no-code Webshop Builder empowering studios to connect their Apple / Google game accounts, configure in-game items and promotions, and publish a live, responsive webshop—all without writing a line of code.

What I Did

  • Storefront Development
    I joined the team to build out the shopper-facing storefront application atop an existing back office. Using Create React App with Redux Toolkit, I implemented:

    • Iframe integration: Embedded our standalone Vite-powered Webshop Viewer for live previews and production reuse.
    • Drag-and-drop UI: Leveraged CraftJS to power a visual editor where developers assemble sections, items, and offers.
    • Theming & Metadata: Enabled customization of colors, fonts, backgrounds, and social-share meta tags for Discord, X, Facebook, etc.
    • Performance optimizations: Ensured sub-2 s mobile load times with Tailwind CSS and route-based code splitting.

  • Checkout Integration
    Integrated Adyen’s payment SDK into the storefront, handling localized, secure transactions and linking purchases back to players’ game accounts.

  • Publish Workflow
    Added a “staging vs. production” toggle so teams could preview changes in a dev environment and push to live when ready.

Key Takeaways

  • Modular Architecture: Splitting the dashboard and viewer apps allowed rapid iteration on both ends while reusing core components.
  • No-Code UX: CraftJS turned a complex stateful editor into an intuitive drag-and-drop interface—one of the most rewarding front-end challenges I’ve tackled.
  • Performance Focus: Prioritizing mobile-first load times and responsive layouts ensured game studios could serve players anywhere with minimal friction.
  • Real-World Constraints: Handling iframe messaging and third-party SDK quirks (especially Adyen’s payment flows) reinforced the importance of robust error handling and developer documentation.