← All Projects

Mockup Studio

A browser tool that renders every store screenshot across variant, language, screen and device — then publishes them to Google Play and App Store Connect without a local toolchain.

IndustryDeveloper Tooling
Product TypeWeb Application
PlatformBrowser
IntegrationsGoogle Play & App Store Connect
ResultA full screenshot release in one session, from the browser
Mockup Studio project hero image

The impact:

2
Stores published to
6
Starter device frames
0
Local tooling required
E2E
Credential vault

What this product is.

Mockup Studio generates store listing imagery for mobile apps: device frames, screenshots, backgrounds and localized titles, batch-rendered across every combination of variant, language, screen and device, and uploaded straight to Google Play and App Store Connect from the browser.

PROJECT FACTS
IndustryDeveloper Tooling
Product TypeWeb Application
PlatformBrowser
IntegrationsGoogle Play & App Store Connect
ResultA full screenshot release in one session, from the browser

What needed solving.

Store screenshot production is quietly one of the worst jobs in mobile release management. A single app with two themes, ten languages, six screens and several device sizes needs hundreds of images, every one of which has to be regenerated whenever a screen or a translation changes — and then uploaded by hand into two consoles. Tooling for it normally means a local script pipeline that only one person on the team can actually run.

How we approached it.

The whole pipeline runs in the browser. Projects live in Firestore, screenshots and backgrounds in Cloud Storage, and screens carry a translation key rather than a translated string, so renaming a key updates every screen using it. Publishing signs its own JWTs in the page using the Web Crypto API — RS256 for Google, ES256 for Apple — and calls the store APIs directly. Credentials are supplied either in-memory from disk or from an end-to-end encrypted vault, so private keys never sit on a server.

What's inside?

Batch rendering across every combination

Variant, language, screen and device multiply out automatically — a screen or translation change regenerates the whole matrix.

Direct publishing to both stores

The Android Publisher and App Store Connect APIs are called from the browser, so a full listing update never leaves the tab.

In-page JWT signing

RS256 for Google and ES256 for Apple, signed with the Web Crypto API against keys that are never uploaded to a server.

End-to-end encrypted key vault

Publishing credentials can be stored encrypted client-side, or supplied from disk in memory only and discarded on reload.

Translation keys, not translated strings

A screen references a title key, so renaming or retranslating updates every screen that uses it at once.

Extensible device frames

Six device frames ship as SVG plus a screen-area rectangle and output canvas size; new ones can be added without a release.

Tools change. Standards don’t.

We choose the stack around the product — not the other way around.

  • Vue 3
  • Pinia
  • TypeScript
  • Vite
  • Firebase Auth
  • Firestore
  • Firebase Storage
  • Web Crypto API
  • Google Android Publisher API
  • App Store Connect API
  • GitHub Actions

Vue 3, Pinia, TypeScript, Vite, Firebase Auth, Firestore, Firebase Storage, Web Crypto API, Google Android Publisher API, App Store Connect API, GitHub Actions

What we handled.

We worked on the product development and implementation, focusing on building a polished, functional and user-friendly experience aligned with the goals of the product.

Product concept and architecture
Rendering pipeline
Store API integration and JWT signing
Credential vault design
Infrastructure and CI/CD