Wirtualna Skarbonka — wyzwanie oszczędnościowe online
Wirtualna Skarbonka to cyfrowa wersja popularnych drewnianych skarbonek-wykreślanek: ustawiasz cel, dostajesz planszę losowych kwot, które sumują się dokładnie do niego, i wykreślasz pola, gdy naprawdę odłożysz pieniądze. To mój własny mikroprodukt — darmowy, bez zakładania konta, dla osób, które chcą zbudować nawyk regularnego odkładania małych kwot.
Wyzwanie
Papierowe skarbonki-wykreślanki są popularne, ale nie da się ich mieć przy sobie, łatwo je zgubić, a aplikacje do oszczędzania wymagają konta i dostępu do banku.
Rozwiązanie
Zaprojektowałem i zakodowałem PWA bez kont: trwały link do każdej skarbonki, zapis postępu na serwerze z synchronizacją offline, karta tempa z prognozą daty osiągnięcia celu, ekran powitalny tłumaczący zasady, kontrasty sprawdzone pod WCAG AA i panel statystyk dla właściciela.
Jak to robiliśmy
- 01
Prototyp, zanim powstał kod produkcyjny
Pomysł sprawdziłem najpierw na klikalnym prototypie w jednym pliku HTML, zapisującym stan w przeglądarce. To wystarczyło, żeby zobaczyć, że mechanika wykreślanki działa — i że zapis tylko w przeglądarce to za mało, bo postęp znika po wyczyszczeniu danych i nie przechodzi na inne urządzenie.
- 02
Bez kont, ale z trwałym linkiem
Zamiast rejestracji każda skarbonka dostaje nieodgadywalny, trwały adres, a stan planszy leży w PostgreSQL. Każde kliknięcie kafelka to Server Action w Next.js, więc postęp działa na telefonie i komputerze i przeżywa czyszczenie cache. Plansze z adresami użytkowników są wyłączone z indeksowania w Google.
- 03
Algorytm planszy
Generator losuje nominały z wagami — przeważają małe kwoty, jak na grawerowanej skarbonce — i domyka planszę tak, żeby suma zgadzała się co do złotówki z celem. Kafelki są potem tasowane, a kliknięcie zawsze można cofnąć, bo pomyłka przy odkładaniu nie powinna karać.
- 04
Redesign „różane złoto” z kontrolą kontrastu
Pierwotny czarno-złoty wygląd zamieniłem na jasny, butikowy styl z szeryfową kursywą — produkt trafia głównie do kobiet, stąd też żeńskie formy w tekstach. Kontrasty przepuściłem przez audyt WCAG AA: gradient tylko w ciemnym zakresie, na tekst wyłącznie pełne kolory. Fonty Playfair Display i Montserrat są hostowane lokalnie z pełnym zestawem polskich znaków, bo systemowe kroje gubiły ogonki.
- 05
PWA, offline i własna domena
Aplikację można zainstalować na telefonie; zaznaczenia zrobione bez internetu trafiają do kolejki i wysyłają się same po powrocie sieci, a mały wskaźnik pokazuje stan synchronizacji. Start był na subdomenie, ale przeniosłem projekt na własną domenę wirtualnaskarbonka.pl z przekierowaniem 301, tak żeby stare linki do skarbonek dalej działały.
Co wyróżnia ten projekt
Plansza, która sumuje się dokładnie do celu
Losowe kwoty, przewaga małych nominałów i zawsze idealna suma — klik wykreśla kafelek, a przy komplecie na ekran spada deszcz banknotów.
Karta „Twoje tempo”
Z dat ostatnich wpłat liczę bieżące tempo odkładania i przewidywaną datę osiągnięcia celu. Historię dopisałem do istniejących danych bez zmiany schematu bazy, żeby nie ruszać skarbonek realnych użytkowników.
Ekran powitalny „Grosz do grosza”
Przy pierwszej wizycie jasno mówi, że skarbonka nie przechowuje pieniędzy, tylko pokazuje postęp — to narzędzie do budowania nawyku, nie usługa finansowa.
Analityka zgodna z RODO i SEO od pierwszego dnia
GA4 działa w Consent Mode v2 i domyślnie nic nie mierzy bez zgody. Strona główna ma sekcję FAQ z danymi strukturalnymi, mapę strony i własny obraz do udostępnień.
Widoki i elementy
Produkt działa na własnej domenie i zbiera użytkowników bez reklam: od lipca 2026 powstało 38 skarbonek, a w 21 z nich trwa już regularne odkładanie.
Zacznijmy Twój projekt.
Opisz w kilku zdaniach, czego potrzebujesz — odezwę się z konkretnymi pytaniami i propozycją kolejnych kroków. Bez zobowiązań.