Pompa Ciepła 4 You: Projekt end-to-end od koncepcji po wdrożenie
PompaCiepla4You.pl to projekt szkoleniowy zrealizowany w pełnym cyklu — od wizji, przez autorski design w Figmie, po działającą stronę w Next.js. Celem było stworzenie lekkiej, szybkiej wizytówki dla firmy z branży OZE i praktyka technik optymalizacji Web Vitals.
📋 Metryki projektu
- Start: 18 września 2023 r. (Initial Repo)
- Data wdrożenia: październik 2024 (produkcja)
- Status: Produkcyjne wdrożenie (pompaciepla4you.pl)
- Rola: UX/UI Designer & Front-End Developer
- Cel: Realizacja pełnego cyklu produkcyjnego (design → kod → deployment) z naciskiem na UX i wydajność
🚀 Ewolucja projektu (Design-to-Code)
- Discovery & UX — projektowanie ścieżki użytkownika wg zasady "Don't make me think"; pierwotnie formularz, po konsultacjach uproszczony do CTA + telefon + chat.
- UI Design (Figma) — autorski Custom UI bez gotowych szablonów; design dostosowany do specyfiki branży instalacyjnej.
- Development (Web Vitals) — wdrożenie makiet z jednoczesną optymalizacją CLS i LCP.
- Produkcja (SSG) — statyczne buildy dla szybkiego ładowania i niskich kosztów hostingu.
🎯 Problem do rozwiązania
Branża OZE wymaga budowania zaufania — klient inwestuje w pompę ciepła na lata. Strona musiała działać szybko na mobile, wyglądać profesjonalnie i ułatwiać kontakt. Dodatkowym wyzwaniem była konieczność pokazywania mediów (zdjęcia, wideo) bez obniżania wydajności.
❌ Wyzwania techniczne
- Multimedia vs wydajność: Osadzenie YouTube i galerii obniża wydajność (render-blocking).
- Friction na mobile: Rozbudowane formularze zniechęcają użytkowników.
- SEO: Konkurencja w Google wymaga szybkiej strony.
- Custom UI: Szablonowe motywy nie budują unikalnego wizerunku.
💡 Rozwiązania techniczne
- Wzorzec "Facade" dla wideo: Miniatura JPEG z przyciskiem Play, player ładuje się dopiero po kliknięciu — brak render-blocking.
- LQIP (BlurHash): plaiceholder + sharp generują rozmyte placeholdery w build-time → eliminacja CLS.
- Uproszczenie UX: CTA, telefon, mapa, chat LLM zamiast rozbudowanego formularza.
- Custom UI: SCSS (BEM) bez ciężkich bibliotek, semantyczny HTML.
📈 Rezultaty projektu
Projekt pozwolił przećwiczyć pełen cykl produkcyjny i zweryfikować w praktyce techniki optymalizacyjne:
| Aspekt | Co zostało osiągnięte |
|---|---|
| Web Vitals | Optymalizacja CLS i LCP, szybkie ładowanie mediów |
| Architektura | SSG (Static Site Generation) — zero backendu |
| UX | Skrócona ścieżka do kontaktu, "Don't make me think" |
| Workflow | Design-to-code w jednym cyklu |
"Strona buduje profesjonalny wizerunek firmy od pierwszego kliknięcia."
🛠️ Architektura i stack techniczny
- Frontend: Next.js 14 (App Router) z SSG
- Język: TypeScript (Strict Mode)
- Stylowanie: SCSS (moduły, BEM, zmienne)
- Media & performance: sharp + plaiceholder (BlurHash), react-youtube z wzorcem Facade
- Interakcja: Custom UI + chat oparty o LLM
- Jakość kodu: ESLint
🚀 Dalsze plany
Wzrost liczby realizacji w portfolio → rozważenie wdrożenia Headless CMS (np. Sanity, Strapi) przy zachowaniu parametrów SSG.