Moodsnap — globalny mikroprodukt z presetami do Snapseed
Moodsnap to mój autorski mikroprodukt: marka sprzedająca gotowe presety (Looki) do darmowej aplikacji Snapseed na iPhone'a i Androida. Celuje w globalnego odbiorcę z TikToka i Instagrama, dlatego strona jest po angielsku i projektowana przede wszystkim pod telefon. Na start buduje listę mailingową darmowym Lookiem, a nie sprzedaje — najpierw ruch, potem monetyzacja.
Wyzwanie
Pomysł na globalny mikroprodukt z presetami wymagał czegoś więcej niż ładnego landingu — potrzebny był sklep treści, który sam się pozycjonuje w Google, buduje listę mailingową i wygląda na tyle premium, by uzasadnić zakup impulsowy.
Rozwiązanie
Zaprojektowałem i zakodowałem od zera produkt w Next.js: dopracowany, premium landing (estetyka golden hour, interaktywne before/after), panel admina z autorskim CMS (zarządzanie lookami i blog w Markdown), programatyczne SEO (strony kolekcji, sitemapa, dane strukturalne, social OG), lead-magnet z listą mailingową oraz pełną analitykę z Consent Mode.
Jak to robiliśmy
- 01
MVP bez balastu
Zacząłem od tego, czego świadomie nie robię: bez kont użytkowników, bez płatności, bez abonamentowych narzędzi do mailingu. Pierwszy etap ma tylko zweryfikować, czy ludzie chcą tych Looków, więc wszystko jest za darmo, a w zamian zbieram adresy e-mail. Stack to Next.js 16, PostgreSQL z Drizzle ORM i własna wysyłka maili przez nodemailer.
- 02
Lead-magnet, który nie zależy od skrzynki odbiorczej
Własna wysyłka maili potrafi utknąć w spamie, więc darmowy preset dostarczam od razu na stronie — po zapisie użytkownik dostaje link do pobrania zabezpieczony tokenem, a mail jest tylko dodatkiem. Endpoint zapisu ma limit prób z jednego IP i wysyła wiadomość wyłącznie przy pierwszym zapisie, żeby nikt nie zrobił z formularza narzędzia do zasypywania cudzych skrzynek.
- 03
Panel, w którym katalog żyje w bazie
Zakodowałem panel admina na jedno hasło (JWT w ciasteczku httpOnly): lista subskrybentów z eksportem CSV, statystyki, edycja katalogu Looków z wgrywaniem plików presetów i wysyłka newslettera z trybem próbnym. Katalog jest źródłem prawdy w bazie, a strona odświeża się sama kilka minut po edycji (ISR) albo od razu po zapisie w panelu. Przy okazji domknąłem bezpieczeństwo: ochronę przed path traversal przy uploadzie, nagłówki CSP i HSTS oraz zabezpieczenie eksportu CSV przed wstrzyknięciem formuł.
- 04
Estetyka golden hour
Pierwszą wersję przeprojektowałem w kierunku jasnej, przewiewnej galerii: szeryfowy krój Fraunces w nagłówkach, ciepłe tokeny kolorów, miękkie cienie i subtelne wejścia sekcji przy przewijaniu. Zaprojektowałem też logo — sygnet w kształcie zaokrąglonego kwadratu z gradientem zachodu słońca. Liczby w pasku wiarygodności są liczone z bazy, bez zmyślonych opinii, bo marka jest nowa.
- 05
SEO w trzech etapach
Najpierw fundament: sitemapa, robots, dynamicznie generowany obrazek OG i dane strukturalne z FAQPage. Potem programatyczne strony kolekcji (Beach, Golden Hour, Travel) z własnymi metadanymi i okruszkami. Na koniec blog z poradnikami pisanymi w Markdown z panelu, z linkowaniem wewnętrznym w obie strony: poradnik prowadzi do kolekcji, a kolekcja do poradnika.
Co wyróżnia ten projekt
Suwak before/after bez bibliotek
Własny komponent porównania: przeciągasz palcem lub myszą i od razu widzisz efekt Looka. Działa na dotyku i dopasowuje się do szerokości ekranu.
Przyklejone CTA na telefonie
Ruch ma przychodzić z TikToka i Reels, więc po przewinięciu hero na dole ekranu pojawia się przycisk do darmowego Looka. Na desktopie jest ukryty.
Mierzalna konwersja z Consent Mode v2
GA4 startuje z domyślną odmową zgody i włącza się dopiero po decyzji w banerze. Każdy formularz wysyła zdarzenia rozpoczęcia i zapisu z informacją, z którego miejsca strony przyszedł lead.
Własny CMS z blogiem w Markdown
Właściciel sam dodaje poradniki i edytuje katalog Looków w panelu — treść jest bezpiecznie renderowana, a każdy wpis dostaje własne metadane i dane strukturalne.
Widoki i elementy
Gotowy fundament marki: indeksowalne strony pod long-tail, mierzalna konwersja i panel, w którym właściciel sam zarządza treścią — produkt gotowy do skalowania ruchem z social mediów.
Zacznijmy Twój projekt.
Opisz w kilku zdaniach, czego potrzebujesz — odezwę się z konkretnymi pytaniami i propozycją kolejnych kroków. Bez zobowiązań.