Loupa. Aplikację dla studiów kreatywnych zaprojektowaliśmy i zbudowaliśmy sami.
Od pierwszej notatki do działającej aplikacji pod własną domeną: badanie problemu, architektura informacji, UX, interfejs, logo, frontend, backend i wdrożenie. Jeden zespół, siedem tygodni, zero przekazywania pałeczki między agencjami.
Feedback, który ginie po drodze
Studio wysyła klientowi film, prezentację i key visual. Uwagi wracają mailem, na Slacku, w notatce głosowej i w PDF-ie z dopiskami. Nikt nie wie, której wersji dotyczą, kto je zaakceptował i ile kosztowała trzecia runda poprawek.
„Możecie przesunąć logo, to na środku, chyba slajd 4, a może było w drugim filmie?”
- Wątek mailowy, 14 odpowiedzi
- Slack, trzy kanały
- Notatka głosowa na WhatsAppie
- „Która to wersja?”
- „Chyba w drugim filmie”
Logo większe, na telefonie nieczytelne.
✓ rozwiązane w v2 · zaakceptowane z imieniem i godzinąWszystkie kompetencje produktu w jednym zespole
Loupa nie przeszła przez łańcuch podwykonawców. Każdą decyzję, od nazwy etapu po politykę bezpieczeństwa w bazie, podejmowaliśmy u siebie, więc projekt i kod nigdy się nie rozjechały.
Product management
Zakres MVP, backlog z priorytetami P0 i P1, specyfikacja przebudowy w system operacyjny dla studia: 31 rozdziałów zasad i kryteriów akceptacji.
Architektura informacji
Przejście aplikacji oczami managera, grafika i klienta. Nawigacja zredukowana do sześciu pozycji, osobne światy dla studia i klienta.
Przepływy
Kreator pierwszego uruchomienia, jeden link dla klienta na cały projekt, recenzja na telefonie z uwagami w wysuwanym panelu.
Interfejs i design system
Tokeny, trzy poziomy nagłówków, kontrast sprawdzony liczbami. Paleta wykresów przetestowana pod kątem daltonizmu.
Znak i nazwa
Logo „pinezka uwagi” wybrane z czterech kierunków. Lupa nad materiałem i pinezka przypięta do konkretnego miejsca w jednym kształcie.
Aplikacja
Next.js 15, React 19, Tailwind 4. Rysowanie po klatce wideo, przybliżanie gestem, oś czasu projektów, landing z zorzą w WebGL.
Dane i bezpieczeństwo
Supabase Postgres z politykami RLS, logowanie Google, podglądy wideo, PDF, PowerPoint i Word generowane po stronie serwera, wypłaty Stripe Connect.
Wdrożenie i SEO
Vercel, domena loupa.online, monitoring błędów, wersja angielska z hreflang, dane strukturalne i plik llms.txt dla wyszukiwarek AI.
Siedem tygodni, odtworzone z historii zmian
Każdy punkt poniżej to prawdziwa data z repozytorium. Najważniejsze zwroty zaznaczyliśmy kolorem.
- 24.08
Działające MVP
Dashboard managera, role, wiadomości i baza na Supabase. Od pierwszego dnia działający produkt, nie makieta.
- 29–30.08
Dashboard jako pierwszy ekran
Audyt dostępności, logowanie przez Google, typ projektu jako „jedna kolumna zamiast drugiej aplikacji”.
- 31.08–01.09
Studio jako firma
Nawigacja mobilna, zapraszanie do zespołu, wiele studiów na jednym koncie, faktury i wypłaty przez Stripe Connect.
- 21.09
Zwrot: z narzędzia w system operacyjny studia
Nowa specyfikacja produktu. Zasada „ekran mówi prawdę”: komunikat o sukcesie tylko po udanym zapisie.
- 22.09
Jeden link dla klienta
Cały projekt pod jednym adresem, gość widzi pracę od razu, pokój recenzji przebudowany na telefon.
- 23.09
Nowy kierunek wizualny
Research referencji, potem synteza: grafitowa kanwa, jeden akcent, hierarchia wag zamiast pogrubień.
- 25.09
Start pokazuje proces
Przy wyborze typu projektu aplikacja rysuje etapy, czas i obsadę, zanim użytkownik cokolwiek wpisze.
- 27.09
Logo i strona w dwóch językach
Wybór znaku „pinezka uwagi”, landing po polsku i angielsku, polityka prywatności i regulamin.
- 11.10
loupa.online
Własna domena, hero z zorzą w WebGL, SEO i widoczność w odpowiedziach AI.
- 13–14.10
Szlif przed testami
Subtelne szkło, jedno znaczenie koloru dla pieniędzy, projekty jako graf etapów i plików.
Pinezka uwagi ze szkłem w środku
Ludzie otwierają Loupę z dwóch powodów: żeby przypiąć uwagę do konkretnego miejsca i żeby przyjrzeć się pracy z bliska. Znak łączy obie czynności w jednym kształcie.
Kierunek C z czterech. Pełna plama lawendy, bez gradientu i bez cienkich kresek, więc znak jest czytelny nawet jako ikona karty przeglądarki w 16 pikselach.
Pole rysunku przycięte do kształtu, dzięki czemu nazwa stoi tuż obok sygnetu i czyta się jak jedno słowo.
Spokojna kanwa, jeden akcent, kolor tylko z powodem
Wszystkie wartości żyją w jednym pliku tokenów. Zmiana na górze tego pliku przestawia cały produkt, a dokument źródłowy tłumaczy, dlaczego każda wartość jest taka, a nie inna.
- 01Kolor poza akcentem znaczy tylko stan albo dane. Nigdy dekorację.
- 02Nic poniżej 12 px. Kontrast drugorzędnego tekstu 6,5:1.
- 03Cel dotykowy co najmniej 44 px dla każdej akcji.
- 04Wpływy zawsze turkusowe, koszty zawsze lawendowe, strata zawsze czerwona.
- 05Etykiety pełnymi słowami, nigdy ucięte do czterech liter.
- 06Oś czasu to najmocniejsza cecha produktu, więc nigdy nie chowa się za przełącznikiem.
Najpierw hierarchia, potem kolor
Pulpit managera ma odpowiedzieć na trzy pytania w jednym spojrzeniu: co czeka na mnie, co jest zagrożone i jak studio stoi z pieniędzmi. Przesuń suwak, żeby zobaczyć, jak szkielet zamienia się w gotowy ekran.
WireframeInterfejs
Pokój recenzji: serce produktu
Tu spotyka się praca, uwagi i decyzja. Kliknij numer, żeby zobaczyć, co i dlaczego tak zaprojektowaliśmy.
01Uwaga przypięta do miejsca
Komentarz ma kotwicę: sekundę filmu, numer strony albo punkt na obrazie. Klik w uwagę przewija materiał dokładnie tam.
02Wersje obok materiału
Ponowne wgranie pliku tworzy v2, v3 i otwiera recenzję na nowo. Historia rund jest zawsze pod ręką.
03Rysowanie po klatce
Odręcznie, prostokąt, strzałka. Wybór narzędzia pauzuje wideo, bo nie da się zaznaczyć ruchomego celu.
04Decyzja jako najmocniejszy element
„Poproś o poprawki” i „Zaakceptuj” otwierają okno, które mówi, co się zaraz stanie, i zapisują decyzję z imieniem i godziną.
05Budżet widać w trakcie
Koszt wynika z zalogowanych godzin i stawek. Manager widzi, ile zjadła kolejna runda, zanim projekt się skończy.
06Oś czasu wszystkich projektów
Kontekst studia bez wychodzenia z recenzji: każdy projekt jako pasek, każda runda jako ciemniejszy segment.
Klient nie zakłada konta. Dostaje jeden link.
Najtrudniejsza decyzja UX w całym projekcie: klient ma zobaczyć pracę, zanim o cokolwiek go zapytamy. Imię podaje dopiero przy pierwszym komentarzu.
Jeden adres obejmuje cały projekt: film, prezentację i key visual, z przyciskami „poprzedni” i „następny”. Na telefonie uwagi wysuwają się z dołu, a decyzje siedzą w belce pod kciukiem.
Backend, który pilnuje zasad sam
Projektant widzi tylko własną stawkę, manager widzi koszty całego zespołu, klient nie widzi niczego wewnętrznego. To nie jest grzeczność interfejsu, tylko reguła zapisana w bazie i sprawdzana automatycznym testem.
Studio
Logowanie Google, role: właściciel, manager, projektant, klient.
Gość z linkiem
Pokój recenzji bez konta. Zasięg linku sprawdzany przy każdym żądaniu.
Next.js na Vercelu
Jedna droga do bazy: każde zapytanie wykonuje się w imieniu konkretnej osoby, z jej uprawnieniami.
ffmpeg · poppler · LibreOffice
Pasek klatek wideo, strony PDF, prezentacje i dokumenty Worda zamieniane w obraz do komentowania.
Supabase Postgres + RLS
Polityki bezpieczeństwa w bazie. Dane w UE.
Stripe Connect
Faktury, wpłaty i wypłaty. Koszt projektu liczony z godzin i stawek.
Sentry + test RLS
Monitoring błędów i test, który dowodzi, że te same zapytania zwracają różne dane różnym rolom.
Każda zmiana stanu zapisuje się jako zdarzenie. Paski, metryki i koszty liczą się z tego logu, więc raport nie może się rozjechać z rzeczywistością.
Działa, jest w testach, rośnie
Beta w testach zamkniętych. Loupa działa pod adresem loupa.online, a pierwsze studia sprawdzają ją za darmo na własnych projektach. Uwagi testerów trafiają prosto do aplikacji przez przycisk „Zgłoś problem”.
Dołącz do testów ↗Jeden łańcuch „ktoś zrobił, ktoś ocenił, ktoś zdecydował” i dwanaście szablonów etapów:
Masz pomysł na aplikację? Zaprojektujemy ją i zbudujemy.
Od badania problemu i makiet po działający produkt z backendem i własną domeną. Pierwsza rozmowa i wstępna wycena nic nie kosztują.