Strona glowna portalu Miasta i Gminy Stary Sacz

Programowanie

Portal Miasta i Gminy Stary Sacz

Nowy portal internetowy Miasta i Gminy Stary Sacz: headless CMS, cztery wersje jezykowe, pelna zgodnosc z WCAG 2.2 AA i RODO, zbudowany od podstaw na otwartym oprogramowaniu i utrzymywany wylacznie na serwerach gminy.

6.09.2026

Stary Sacz zglosil sie do mnie z zadaniem, ktore w administracji publicznej rzadko bywa proste: zbudowac portal internetowy, ktory jednoczesnie informuje mieszkanca, prowadzi turyste, obsluguje sprawe urzedowa i spelnia wymogi prawne dotyczace dostepnosci cyfrowej. Bez utraty tempa, bez zewnetrznych chmur i bez ani zlotowki kosztow licencyjnych.

Zamiast gotowego systemu pod klucz zaprojektowalem architekture headless: osobny panel administracyjny do zarzadzania trescia i osobny silnik generujacy strony dla odwiedzajacych. Taki podzial daje redaktorom w urzedzie prosty, znany interfejs do pracy z trescia, a uzytkownikom strone, ktora laduje sie blyskawicznie, bo nie dzwiga na sobie ciezaru panelu administracyjnego.

Strona glowna portalu Miasta i Gminy Stary Sacz
Strona glowna portalu, z wyroznionymi aktualnosciami i przelacznikiem jezyka PL/EN/HU/SK

Dla kogo jest ten portal

Zanim usiadlem do pierwszego komponentu, rozpisalem sobie, kto faktycznie z tej strony korzysta, bo urzad gminy obsluguje bardzo rozne potrzeby pod jednym adresem: mieszkanca, ktory chce sprawdzic aktualnosci i wydarzenia, turyste i inwestora, ktorzy potrzebuja informacji w swoim jezyku, pracownika urzedu, ktory ma redagowac tresc bez pomocy informatyka, osobe z niepelnosprawnoscia, dla ktorej czytnik ekranu musi po prostu dzialac, oraz lokalnego przedsiebiorce, ktory chce zglosic atrakcje turystyczna wprost przez formularz.

Ta lista zdecydowala o strukturze tresci duzo bardziej niz jakikolwiek szablon graficzny.

Uklad strony glownej: aktualnosci, sekcje tematyczne, slider uslug, widgety
Sekcje tematyczne, slider uslug, nadchodzace wydarzenia i widgety pogody oraz jakosci powietrza

Co znalazlo sie w portalu

Najwiekszym wyzwaniem nie bylo pojedyncze trudne zadanie, tylko skala: portal ma dzis ponad trzydziesci modulow funkcjonalnych i ponad trzydziesci piec typow tresci w panelu CMS, a wszystkie musialy dzialac spojnie w czterech jezykach.

Publikacja tresci stoi na aktualnosciach z filtrami po kategoriach i tagach, kalendarzu wydarzen z eksportem do Google i Apple Calendar oraz galeriach fotograficznych z lightboxem. Nad wszystkim czuwa wyszukiwarka pelnotekstowa oparta o Meilisearch, ktora zwraca wyniki w czasie pisania, radzi sobie z polskimi koncowkami fleksyjnymi i przeszukuje jednoczesnie artykuly, procedury urzedowe i katalog turystyczny.

Osobna galaz stanowi eUrzad: wyszukiwarka procedur, karta sprawy z podstawa prawna, wymaganymi dokumentami i oplatami, oraz bezposrednie linki do ePUAP i gov.pl. Do tego pelna struktura organizacyjna urzedu z referatami i danymi kontaktowymi, a osobno jednostki podlegle: organizacyjne, edukacyjne i spolki gminne.

Dla turysty zbudowalem katalog atrakcji z filtrami, mapa i formularzem, przez ktory lokalny przedsiebiorca moze sam zglosic miejsce do moderacji, oraz questy turystyczne z kodami QR prowadzacymi na krotkie, czytelne adresy /q/kod. Interaktywna mapa gminy, oparta o Leaflet.js i PostGIS, pokazuje solectwa i obszary jako klikalne regiony, bez zadnej zaleznosci od Google Maps.

Lista aktualnosci z filtrami po kategoriach i tagach
Lista aktualnosci z filtrami po kategoriach i tagach
Sekcja Dla Turysty z katalogiem atrakcji
Sekcja Dla Turysty z katalogiem atrakcji
Karta miejsca turystycznego z opisem, mapa i danymi kontaktowymi
Karta miejsca turystycznego z mapa i danymi kontaktowymi
Sekcja Dla Mieszkanca z procedurami i informacjami urzedowymi
Sekcja Dla Mieszkanca z procedurami urzedowymi
Struktura organizacyjna urzedu i jednostek podleglych
Struktura organizacyjna urzedu i jednostek podleglych
Kalendarz wydarzen gminnych
Kalendarz wydarzen gminnych

Dostepnosc jako fundament, nie dodatek

Ustawa o dostepnosci cyfrowej stron internetowych i aplikacji mobilnych podmiotow publicznych nie zostawia wyboru: portal gminny musi spelniac WCAG 2.2 AA. Zamiast traktowac to jako liste poprawek na koniec, zaprojektowalem dostepnosc jako wymaganie od pierwszego komponentu.

W praktyce oznacza to kontrast tekstu na poziomie minimum 4.5:1 weryfikowany automatycznie, pelna obsluge klawiatura bez uzycia myszy, widoczny fokus na kazdym elemencie interaktywnym, minimalny obszar klikniecia 24 na 24 piksele zgodnie z WCAG 2.2, alternatywne opisy zdjec, logiczna hierarchie naglowkow i semantyczny HTML5 wsparty ARIA, testowany z czytnikami NVDA i VoiceOver. Do tego przelacznik rozmiaru czcionki, skroty klawiszowe (Alt+1 do tresci, Alt+S do wyszukiwarki, Alt+M do menu mobilnego) i dedykowana strona z lista tych skrotow.

Tryb ciemny dopina calosc: strona rozpoznaje preferencje systemowe uzytkownika i pozwala je nadpisac recznie.

Bezpieczenstwo i pelna niezaleznosc od zewnetrznych dostawcow

Druga decyzja, ktora przewijala sie przez caly projekt: zadne dane gminy nie opuszczaja jej wlasnej infrastruktury. Zero Google Analytics, zero zewnetrznych chmur, zero uzaleznienia od jednego dostawcy oprogramowania.

Panel CMS jest dostepny wylacznie z sieci urzedu albo przez VPN. Baza danych PostgreSQL siedzi w izolowanej sieci Docker, bez wystawionego na zewnatrz portu. Pliki i media trzyma wlasny serwer S3 oparty o MinIO, zamiast Dropboksa czy Google Drive. Backup bazy leci automatycznie co noc na osobny serwer, z retencja 30 dni, a Uptime Kuma alarmuje SMS-em i mailem w ciagu 60 sekund od awarii. Statystyki odwiedzin liczy self-hosted Matomo, wiec dane ruchu tez zostaja na miejscu.

Wszystkie formularze publiczne, od zgloszenia bledu po zgloszenie atrakcji turystycznej, chroni kilka warstw naraz: honeypot na boty, rate-limiting ograniczajacy liczbe zgloszen z jednego adresu IP, walidacja po stronie serwera i sprawdzanie rzeczywistego typu pliku, nie tylko rozszerzenia. Formularze wykorzystujace weryfikacje captcha korzystaja z mCaptcha, self-hostowanego rozwiazania proof-of-work, wiec zadne dane uzytkownika nie trafiaja do Google reCAPTCHA.

Stack i koszt licencji: zero zlotych

Caly portal stoi na oprogramowaniu open-source, co dla budzetu gminnego oznacza brak oplat licencyjnych teraz i w przyszlosci, a dla samego urzedu, ze nie jest przywiazany do jednej firmy IT na lata. Panel tresci prowadzi Directus, strony generuje Astro 5 w trybie SSR na Node.js, dane geograficzne i tekstowe trzyma PostgreSQL z rozszerzeniem PostGIS, a Redis przyspiesza cache i kolejki. Do tego Meilisearch jako wyszukiwarka, Leaflet.js jako silnik map, TailwindCSS z DaisyUI po stronie interfejsu i Docker Compose spinajacy calosc w kontenery.

Wdrozenia ida przez wlasny pipeline CI/CD: push do repozytorium uruchamia sprawdzenie typow TypeScript, automatyczny deploy na staging ze smoke testem, a po otagowaniu wersji, automatyczny deploy na produkcje z kolejnym smoke testem i mozliwoscia blyskawicznego rollbacku. Zero przestojow przy aktualizacjach.

Nie budowalem kolejnej wizytowki urzedu. Budowalem narzedzie, z ktorego mieszkaniec, turysta i urzednik korzystaja codziennie, bez zastanawiania sie, ze w tle stoi headless CMS, self-hostowana infrastruktura i architektura zgodna z WCAG.

- Aleksander Kowal

Stan projektu

Pierwsza faza jest zrealizowana i dziala: strona glowna, aktualnosci, galerie, wydarzenia, interaktywna mapa, wyszukiwarka, eUrzad z procedurami, struktura urzedu i jednostek podleglych, katalog turystyczny z questami QR, modul inwestycji i system zglaszania bledow. W trakcie realizacji jest eRada, czyli sesje Rady Miejskiej, radni i komisje, oraz modul konsultacji spolecznych. Przed uruchomieniem produkcyjnym czeka jeszcze zewnetrzny audyt WCAG 2.2 AA, szkolenie redaktorow, migracja tresci ze starego portalu i testy bezpieczenstwa. Po starcie w kolejce stoja newsletter, aplikacja PWA instalowalna na telefon bez sklepu z aplikacjami i elektroniczne wnioski z podpisem.