Vue 3 SPA z Express.js i SQLite — 19 komponentów, API podzielone na 12 grup funkcjonalnych
Realizacja · strona usługowa
kingofgloss.nl — czytelna oferta zamiast kolejnego telefonu
Studio auto detailingu w Holandii miało mocną markę w social media, ale ich strona nie radziła sobie z jednym: wyjaśnieniem, co dokładnie oferują. Klienci dzwonili, żeby zrozumieć różnicę między pakietami, a mobilna wersja witryny nie nadążała za ruchem z Instagrama. Zbudowałem wielojęzyczną aplikację SPA, która prowadzi użytkownika od oferty, przez dowody jakości, po kontakt — z panelem admina, żeby klient mógł zarządzać treścią sam.
Problem
Mocna marka, słaba strona
Studio King of Gloss miało coś, co wiele biznesów usługowych chciałoby mieć: rozpoznawalność i zaufanie zbudowane organicznie przez social media. Problem był po drugiej stronie — na stronie internetowej.
Witryna wyglądała jak szablon z innej epoki. Na mobile ładowała się wolno, a treść nie odróżniała podstawowego mycia od wieloetapowej korekty lakieru z powłoką ceramiczną. Klient, który trafił na stronę z Instagrama, nie wiedział, co może zamówić, na jaki poziom usługi się kwalifikuje, ani ile to kosztuje.
Efekt? Właściciel odpowiadał na te same pytania dziesiątki razy w tygodniu. Strona miała generować zapytania — zamiast tego generowała zamieszanie.
Podejście
Strona jako ścieżka decyzji, nie galeria
Zamiast budować kolejną galerię z efektownymi zdjęciami samochodów, potraktowałem stronę jako uporządkowaną ścieżkę: od zrozumienia oferty, przez wizualny dowód jakości, segmentację usług, wyjaśnienie procesu, aż po kontakt.
Kluczowe było to, żeby użytkownik mógł sam się zakwalifikować. Cennik z podziałem na pakiety i extras, galeria before/after z realnym porównaniem efektów, FAQ z kategoriami — każdy element odpowiada na konkretne pytanie, które wcześniej wymagało telefonu do właściciela.
Strona musiała też żyć bez developera. Dlatego od początku powstał panel administracyjny, w którym klient samodzielnie zarządza galerią, cennikiem i FAQ — w trzech językach.
Zakres
Co zostało zbudowane
Całość to aplikacja SPA z backendem i panelem administracyjnym — nie szablon z CMS-em, ale dedykowany system dopasowany do tego, jak studio faktycznie sprzedaje i prezentuje swoje usługi.
Galeria before/after obsługująca do 40 zdjęć na projekt z interaktywnym sliderem porównawczym
Wielojęzyczny cennik z pakietami, extras i czytelnym porównaniem zakresów (NL, EN, PL)
FAQ z kategoriami — osobna sekcja obniżająca barierę przed kontaktem
Panel admina do codziennego zarządzania galerią, cenami i treścią bez ingerencji w kod
Hardening serwera — Helmet, rate limiting, deploy przez GitHub Actions z nginx, PM2 i Let's Encrypt
Vue 3Express.jsSQLiteSPAHelmetRate limitingAdmin panelMultilingual
Warstwa publiczna
Strona od strony użytkownika
Pierwszy ekran — marka, obietnica, jeden ruch do kontaktu
Strona otwiera się od razu konkretem: kim jest studio, co robi i jak rozpocząć rozmowę. Zamiast rozpraszać uwagę detalami, hero kieruje użytkownika do jednego działania.
Galeria projektów — dowód jakości, nie dekoracja
Siatka realizacji z filtrowaniem po kategoriach pozwala użytkownikowi szybko ocenić poziom prac i znaleźć projekty zbliżone do własnego samochodu lub zakresu usługi.
Porównanie before/after — efekt widoczny, nie opisywany
Interaktywny slider pozwala użytkownikowi samodzielnie zobaczyć różnicę między stanem przed i po korekcie. To silniejszy dowód niż jakikolwiek opis słowny.
Cennik — zakres i poziom usługi bez domysłów
Tabela pakietów i extras porządkuje ofertę tak, żeby klient od razu widział, co obejmuje każdy poziom usługi, ile trwa i czym się różni od pozostałych.
FAQ — odpowiedzi zanim padnie pytanie
Kategoryzowane pytania i odpowiedzi eliminują najczęstsze wątpliwości, które wcześniej wymagały telefonu. Skracają drogę od zainteresowania do zapytania.
O marce i kontakt — zaufanie i prosty następny krok
Strony O nas i Kontakt domykają ścieżkę decyzyjną. Użytkownik wie już, co studio oferuje i jak pracuje — teraz dostaje formularz i dane firmy bez zbędnych kroków.
Panel administracyjny
To, czego użytkownik nie widzi
Panel galerii — treść, która żyje bez developera
Klient dodaje projekty, zarządza kategoriami i kontroluje liczbę zdjęć sam. Galeria nie jest jednorazowym zasobem — to element codziennej obsługi.
Panel cennika — oferta zmienia się bez zmian w kodzie
Pakiety, extras i ceny są edytowalne z poziomu panelu. Gdy oferta studia się rozwija, cennik nadąża bez czekania na aktualizację od developera.
Panel FAQ — wielojęzyczne pytania pod kontrolą klienta
FAQ w trzech wersjach językowych jest zarządzane z jednego widoku w panelu. Klient dodaje, edytuje i grupuje pytania bez dotykania kodu.
Potrzebujesz podobnej strony?
Jeśli Twój biznes usługowy potrzebuje czegoś więcej niż szablonu — opisz projekt. Porozmawiajmy o tym, co trzeba zbudować.