[11]
ARCHITEKTON GDA — STRONA WYNAJMU MODUŁÓW
▒ TIER C · ROK 2026 · STATUS: W BUDOWIE · JĘZYKI: JAVASCRIPT
Landing z interaktywną mapą najmu i panelem CMS — czysty web design, 7 iteracji układu
[FIG. 1] MISJA
Firma architekton GDA wynajmuje od 1995 roku kompaktowe moduły magazynowo-biurowe w Trójmieście — a jej obecność w sieci była ulotką-wizytówką, która nie odpowiadała na jedyne pytanie najemcy: co jest wolne i gdzie. Zbudowałem stronę, której rdzeniem jest interaktywna mapa lokalizacji (Leaflet): numerowane pinezki obiektów, popupy-wizytówki z liczbą wolnych lokali i linkiem dojazdu do Google Maps, schematyczne polyline arterii S6/S7/A1. Obok mapy żyje tabela wolnych lokali — metraż, cena od, termin, plan PDF — a wszystkie liczby (dostępność per obiekt, zajętość %, suma m²) liczy jedna funkcja withDerived() z jednego pliku danych, więc hero, spotlight i tabela nigdy się nie rozjeżdżają. Właściciel dostaje panel /admin za hasłem, w którym edytuje obiekty, lokale i statystyki bez dotykania kodu. Do finalnej kompozycji — ciemne hero, ukośne pasma, spotlight z count-up statystyk — doszedłem przez siedem udokumentowanych zrzutami wersji układu.
[FIG. 2] ARCHITEKTURA
[FIG. 3] WYZWANIA
[+][CH-01]
Dekoracyjne pole plusów w tle sekcji miało jedną zasadę: żaden znak nie może być przecięty przez tekst. Zwykłe tło (CSS pattern, SVG) tnie znaki w połowie tam, gdzie leży napis — brzydko i nieczytelnie. Rozwiązałem to geometrią DOM: PlusField generuje plusy jako komórki siatki i wygasza całe komórki kolidujące z prostokątami elementów tekstowych (getBoundingClientRect z paddingiem bezpieczeństwa), a siatka przelicza się na ResizeObserver i scroll z throttlingiem przez requestAnimationFrame. Osobną pułapką okazał się moment pomiaru: prostokąty tekstu są wiarygodne dopiero po ustabilizowaniu webfontów, więc przeliczenie odpala się też z opóźnieniem po załadowaniu layoutu.
[+][CH-02]
Leaflet dotyka window już przy imporcie, a Next 14 renderuje komponenty na serwerze — statyczny import mapy wywala SSR. Mapa ładuje się więc przez next/dynamic z ssr:false i placeholderem w kolorze tła mapy, żeby hydratacja nie skakała layoutem. Właściwa interaktywność to dwukierunkowe sprzężenie landing↔mapa: hover na pinie podświetla kartę obiektu na stronie, a wybór obiektu na stronie otwiera popup na mapie — piny mają stan zajętości, popup pokazuje liczbę wolnych lokali i link „Dojazd”. Centrowanie mapy liczy się ze średniej współrzędnych obiektów; znam granicę tego skrótu (pusta lista → dzielenie przez zero) i mam nazwaną poprawkę.
[+][CH-03]
Panel CMS zapisuje treść i wgrane zdjęcia na dysk — a filesystem Vercela jest w runtime read-only, więc zapis rzuca wyjątkiem. Zamiast ukrywać ograniczenie, projekt godzi się z nim jawnie: readContent() ma graceful fallback do zbundlowanego seeda (try/catch zamiast cichej awarii), dane produkcyjne pochodzą z commitowanego content.json, a w kodzie uploadu komentarz nazywa sufit i ścieżkę migracji na Vercel Blob. To świadoma decyzja o modelu wykonania serverless — panel działa w pełni na własnym hostingu, na Vercelu jest podglądem.
[+][CH-04]
Dojście do finalnej kompozycji zajęło siedem wersji układu — i każda jest udokumentowana zrzutem ekranu w repo. Proces działał jak design-review z samym sobą: wersja → screen przez Playwright → krytyka → kolejna wersja. Po drodze padły całe kierunki (pomarańcz marki jako gradient — odrzucony na rzecz płaskiego akcentu #ec3d12, nigdy gradientu), a paleta zastygła w tokenach CSS z komentarzami-regułami. Efekt: strona ma spójny system — jeden akcent, dwie farby, faktura wyłącznie w elementach chromu — zamiast kolażu ładnych sekcji.
[FIG. 4] WARSTWA AI
W produkcie nie działa żaden model — mapa, tabela i CMS są w pełni deterministyczne. AI był warsztatem, nie składnikiem: strona powstała w całości z Claude w reżimie design-first — siedem wersji układu recenzowanych na zrzutach z Playwright MCP, pamięć projektu kodująca decyzje („paleta orange/black/white, faktura tylko w chromie”), a każdy świadomy skrót w kodzie ma komentarz z nazwanym sufitem i ścieżką upgrade'u: auth jednym hasłem → NextAuth, upload na dysk → Vercel Blob.
[FIG. 4A] EWOLUCJA UKŁADU — 7 WERSJI
KLIKNIJ WERSJĘ — TA SAMA SEKCJA, KOLEJNE PODEJŚCIA (REVIEW NA ZRZUTACH)
→ FINAL: ciemne hero, płaski akcent #ec3d12 (nigdy gradient), pole plusów z knock-outem pod tekstem
[FIG. 5] GALERIA
