adamserwisokien.pl - strona serwisu okien z panelem administracyjnym

Cel projektu

Adam Wróbel naprawia okna i drzwi w Lublinie oraz w województwie lubelskim nieprzerwanie od 2002 roku. Zlecenia przychodziły do niego wyłącznie z polecenia i przez telefon - własnej strony nigdy nie miał, więc dla kogoś, kto szukał pomocy w Google, po prostu nie istniał.

Zadaniem było zbudowanie kompletnego kanału pozyskiwania zleceń: strony, która odpowiada na to, o co klienci realnie pytają („okno przewiewa", „opadło skrzydło", „ile kosztuje regulacja okien"), pokazuje zdjęcia z prawdziwych napraw i prowadzi wprost do telefonu albo zamówienia rozmowy. Z jednym warunkiem: pan Adam miał prowadzić treść samodzielnie, bez programisty i bez abonamentu za zewnętrzny CMS.

Zakres realizacji

• projekt i wdrożenie całej witryny od zera - Next.js 16 (App Router), React 19, TypeScript w trybie strict i Tailwind CSS 4,
• 10 podstron usługowych generowanych z jednego szablonu, każda z wariantem lokalnym dla Lublina,
• strona główna, cennik, obszar działania z interaktywną mapą, galeria, poradnik, o firmie, kontakt i polityka prywatności,
• autorski panel administracyjny do zarządzania realizacjami, poradami i biblioteką zdjęć,
• model danych w PostgreSQL 17 z Prismą 6, z regułami spójności pilnowanymi na poziomie bazy,
• dwa formularze kontaktowe z walidacją Zod, ochroną Cloudflare Turnstile, limitem zapytań i wysyłką SMTP,
• komplet warstwy SEO: dane strukturalne JSON-LD, mapa witryny, robots.txt, generowane obrazy Open Graph i kanonizacja adresów,
• analityka Google z Consent Mode v2 - tagi uruchamiają się dopiero po zgodzie użytkownika,
• wdrożenie produkcyjne na VPS w kontenerach Docker, uruchamiane jedną komendą,
• instrukcja obsługi panelu po polsku oraz komplet materiałów do założenia wizytówki Google.

Panel administracyjny

Zamiast gotowego CMS-a powstał panel dopasowany do tego, jak pan Adam naprawdę pracuje. Dodanie realizacji przebiega tak samo jak sama wizyta: wybiera zdjęcia z centralnej biblioteki, opisuje co było zepsute i w jakiej miejscowości, wskazuje zdjęcie główne i publikuje wpis.

• logowanie oparte o Better Auth, ze zmianą hasła dostępną z poziomu panelu,
• edytor treści (Tiptap) do porad, z okładkami dobieranymi z biblioteki zdjęć,
• zdjęcia przetwarzane automatycznie po wgraniu - usunięcie danych EXIF, konwersja do WebP i miniatura rozmycia dla płynnego ładowania,
• rozdzielenie szkicu i publikacji - wpis bez kompletu danych nie trafi na stronę, do mapy witryny ani pod bezpośredni adres,
• zabezpieczenie przed nadpisaniem nowszej wersji wpisu, gdy ten sam formularz zostanie otwarty w dwóch kartach,
• zdjęcie użyte w opublikowanej realizacji jest chronione przed skasowaniem, a okładka musi należeć do galerii tej realizacji - pilnuje tego ograniczenie w bazie, nie sam interfejs,
• panel jest w pełni odizolowany od części publicznej - żaden jego kod nie trafia do przeglądarki odwiedzającego stronę.

SEO i widoczność lokalna

Architektura treści powstała na podstawie audytu słów kluczowych dla serwisu stolarki okiennej. Każda usługa dostała własną podstronę i wariant lokalny, a poradnik odpowiada na pytania, które klienci realnie wpisują w wyszukiwarkę.

• jedno źródło prawdy dla danych firmy - nazwa, adres, telefon, godziny pracy i obszar działania zasilają jednocześnie treść, dane strukturalne i wizytówkę Google,
• dane strukturalne dla lokalnej firmy usługowej, katalogu usług, realizacji, artykułów i okruszków nawigacji,
• automatyczna bramka treści w procesie budowania - pilnuje limitów długości tytułów i opisów oraz sformułowań handlowych, których na stronie być nie może,
• opisy alternatywne zdjęć pisane pod realne frazy, bez zdjęć stockowych - wszystkie fotografie pochodzą z wizyt u klientów,
• przygotowanie pod kampanie Google Ads wraz z pomiarem konwersji z telefonu i z formularza.

Wydajność i jakość kodu

Strona osiąga w Lighthouse na urządzeniu mobilnym 100/100 w SEO, dostępności i best practices, przy wydajności na poziomie 99. Komplet kontroli jakości uruchamia jedna komenda przed każdym wdrożeniem: kontrola typów, ESLint z regułą blokującą dostęp do bazy poza warstwą repozytoriów, bramka treści i testy jednostkowe.

Kod trzyma się zasad SOLID: strony usługowe są danymi, nie kodem (nowa usługa to wpis w rejestrze, zero nowych komponentów), widok zależy od wąskich modeli prezentacyjnych zamiast od typów bazy danych, a każde współdzielone zachowanie ma dokładnie jedną implementację.

Efekt

Pan Adam dostał kompletne zaplecze sprzedażowe: szybką stronę widoczną na lokalne zapytania, realizacje i poradnik, które prowadzi samodzielnie z panelu, oraz mierzalne konwersje z telefonu i formularza. Samo wdrożenie jest w pełni powtarzalne - jedna komenda buduje obraz, przenosi go na serwer, wykonuje migracje bazy i uruchamia nową wersję, nie ruszając zdjęć ani treści dodanych z panelu.