Aplikacja

ScreenShooter

Robi od nowa wszystkie zrzuty moich projektów do tego portfolio, żeby nie zostawały w tyle.

Rok: 2026
Status: Online
Rola: Solo: projekt, front end, back end, wdrożenie.

Zrzuty aplikacji się starzeją w chwili, gdy aplikacja się zmienia, a odświeżanie ich ręcznie oznaczało wieczór otwierania, przycinania i kopiowania plików dla jednego projektu. Zbudowałem więc narzędzie, które robi to za mnie. Loguje się, przechodzi przez każdą stronę, zakładkę i menu, a nowe zdjęcie pokazuje obok starego, i nic nie trafia na stronę, dopóki go nie zaakceptuję. Wszystkie zrzuty na tej stronie zostały zrobione od nowa przez nie.

Technologie

Next.js
React
TypeScript
Tailwind CSS
SQLite
Playwright
sharp
pixelmatch
Docker
Claude Code
MCP
Git
Cloudflare Tunnel

Zastosowanie

Jeden kafelek na projekt i jeden przycisk, który robi od nowa wszystkie jego zdjęcia: każdą stronę, zakładkę, menu i okno, które pokazuje portfolio. Loguje się tak, jak wymaga dana aplikacja: jako gość, wypełniając formularz, klikając przycisk konta demo albo sesją nagraną raz dla konta z 2FA.
Przepis pisze się tak, jak by się to powiedziało: „click the settings tab”, „scroll to the containers section”, „click button akceptuje”. Literówki, przestawione litery i brak polskich znaków są wybaczane.
Każde nowe zdjęcie stoi obok tego ze strony, z widokiem z przesuwaną granicą, widokiem obok siebie i zmianą w procentach. Nic nigdzie nie trafia bez akceptacji.
Zrzut ze wskazanym elementem powstaje od razu w trzech wersjach: całe okno, sam element i element w ramce 16:11 galerii. Wybór robi się potem, na karcie. Prywatne dane zamazuję, rysując prostokąty na zdjęciu, a zamazanie jest nakładane przy każdym kolejnym ujęciu.
Tryb Live jest dla widoków zbyt zawiłych, żeby je opisać: prawdziwa przeglądarka na serwerze, już zalogowana, sterowana moją myszką i klawiaturą, z przyciskiem, który zapisuje to, co pokazuje, w pełnej jakości.
Claude potrafi przejść aplikację i zaproponować przepisy. Każda propozycja jest odtwarzana od świeżej strony, zanim zostanie dodana, więc nie wejdzie przepis, który działał tylko w środku sesji.
Grupy i ich kolejność przeciąga się na tablicy i zapisuje do listy projektów strony, z nagłówkami po angielsku i po polsku (brakujący język tłumaczy Claude). Zdjęcia, których już nic nie używa, można od razu usunąć, a jeden projekt może obejmować kilka stron, więc zrzut z siostrzanej domeny trafia do tej samej galerii.
Commit i push to osobne przyciski, niezależne od robienia zdjęć, podpisane jako ScreenShooter, więc historia od razu pokazuje, że commit zmienił tylko zrzuty ekranu. Na hostingu współdzielonym, który racjonuje żądania, uczy się właściwego tempa od pierwszego 429 i je pamięta, a zdjęcie trafione takim błędem robi od nowa, zamiast zostawić je narysowane w połowie.

Jak jest zrobione

Next.js 15 na App Routerze, React 19, TypeScript i Tailwind 4, na SQLite przez better-sqlite3, w jednym kontenerze zbudowanym na obrazie Playwright od Microsoftu, więc Chromium przychodzi razem ze swoimi czcionkami i bibliotekami.
Zdjęcia robione są w podwójnej gęstości pikseli, zmniejszane filtrem Lanczos i zapisywane jako WebP w jakości 95 z inteligentnym podpróbkowaniem, dzięki czemu kolorowy tekst na ciemnych kartach się nie rozmywa. Zmiany mierzy pixelmatch na wspólnym rozmiarze.
Kroki przepisu przechodzą przez mały parser zamiast sztywnej składni: synonimy czasowników, odległość edycyjna z przestawieniami dla literówek, polskie znaki porównywane w obie strony, rodzaj elementu czytany przed nazwą albo po niej, a przy „sekcji X” najpierw szukane nagłówki.
Explore uruchamia Claude Code bez interfejsu z moim własnym serwerem MCP bez zależności, który daje tylko patrzenie, klikanie, przewijanie i propozycję. Kliknięcia w elementy brzmiące jak zapisz, usuń czy wyloguj są odrzucane, zanim się wydarzą.
Live przesyła obraz przeglądarki z serwera jako klatki JPEG i odsyła kliknięcia, kółko i klawisze jako współrzędne w jej własnych pikselach. Okno wyboru pliku otwarte przez stronę obsługuje się z własnego komputera, bo serwer nie ma pulpitu, na którym mógłby je pokazać.
Osadzone mapy rysują się tylko wtedy, gdy są na ekranie, więc przy zdjęciu całej strony każda jest fotografowana w widoku i wklejana na swoje miejsce. Leniwe ramki ładują się wcześniej, a CSS zrzutu nie trafia do ramek, gdzie zamrażał kafelki mapy.
Tempo żądań idzie przez domenę Fetch w Chrome DevTools, a nie przez routing Playwrighta: routing wyłącza pamięć podręczną przeglądarki i każda strona pobierałaby wszystkie skrypty od nowa, czyli dokładnie tę serię, którą liczy hosting.
Lista projektów strony to JSON współdzielony z panelem administracyjnym. ScreenShooter pobiera go przed każdym zapisem, edytuje tylko obiekt swojego projektu i zapisuje plik bajt w bajt tak jak panel, więc zmiana to różnica w jednej linii.
Git dostaje token jako jednorazowy nagłówek, nigdy w adresie zdalnym, który trafiłby do konfiguracji, a komunikaty błędów nigdy nie powtarzają linii polecenia. Odrzucony push przenosi commity ze zrzutami na wierzch i zostawia świeże zdjęcia.
Długie zadania działają w tle i są odpytywane, bo Cloudflare Tunnel ucina każde żądanie po stu sekundach. Zapisane hasła są szyfrowane AES-256-GCM i nigdy nie opuszczają serwera, nawet w eksporcie projektu.