Każda publikacja aplikacji mobilnej wymaga kompletu grafik sklepowych: screenshotów w kilku rozmiarach urządzeń i feature graphic dla Google Play. Robienie tego w Figmie czy Photoshopie za każdym razem od nowa jest żmudne — a przy kilku własnych aplikacjach w portfolio ten koszt się mnoży.
Screenshot Maker — kreator grafik do Google Play i App Store
Webowy edytor screenshotów sklepowych i feature graphics: edycja na canvasie, undo/redo, eksport gotowych zestawów
Wyzwanie
Rozwiązanie
Screenshot Maker to edytor działający w całości w przeglądarce: surowe zrzuty ekranu wrzuca się drag-and-dropem, osadza w mockupach urządzeń, dodaje nagłówki i tła, a całość komponuje na canvasie (Konva) z pełnym undo/redo. Projekty zapisują się lokalnie w IndexedDB — bez kont i bez wysyłania grafik na serwer. Gotowy zestaw eksportuje się jednym kliknięciem jako paczka ZIP w wymiarach wymaganych przez Google Play i App Store. Interfejs po polsku i angielsku, jakość pilnowana testami E2E w Playwright.
Efekt
Narzędzie dostępne pod adresem storeshot.mobilesoft.pl, używane m.in. do grafik naszych własnych aplikacji — Check! i Magic Storyland.
Co zbudowaliśmy
Edytor canvas w przeglądarce
React 18 + TypeScript + Vite, edycja na canvasie przez react-konva, undo/redo na Zustand + zundo, projekty trzymane lokalnie w IndexedDB (idb), import przez react-dropzone, eksport paczek ZIP (jszip). UI na Tailwind + shadcn/ui, i18next (PL/EN), testy E2E w Playwright, hosting statyczny na Firebase.
Stack technologiczny
Efekty
Powiązane realizacje
CV Creator — kreator CV działający w całości w przeglądarce
Privacy-first: dane kandydata nie opuszczają urządzenia, PDF generowany lokalnie
→Headless e-commerce dla sieci sklepów
Storefront Next.js + Shopify backend
→Check! — minimalistyczny tracker nawyków
Aplikacja mobilna oparta o jedną zasadę: jeden tap dziennie na każdy nawyk, który chcesz utrzymać
→Masz pomysł?
Wycena, konsultacja czy audyt - wybierz ścieżkę, która Ci pasuje. Resztą zajmiemy się my.
Wycena projektu
Powiedz nam o pomyśle — zakres, harmonogram i koszt dostarczymy w 5 dni.
Wypełnij brief→ 02Konsultacja techniczna
30-minutowa rozmowa z naszym tech leadem o stacku, architekturze i ryzykach.
Umów rozmowę→ 03Audyt produktu
Sprawdzimy kod, architekturę i wydajność. Raport z konkretną roadmapą.
Zacznij audyt- Odpowiadamy w 24h
- NDA na pierwszym callu
- Pierwsza rozmowa bez zobowiązań