Heat Pump 4 You: End-to-end project from concept to launch
Pompaciepla4you.pl is a training project delivered through the full cycle — from vision and custom Figma design to a live Next.js site. The goal was to build a lightweight, fast showcase for a renewable energy company and to practice Web Vitals optimization techniques.
📋 Project metrics
- Start: 18 September 2023 (Initial Repo)
- Go-live: October 2024 (production)
- Status: Production deployment (pompaciepla4you.pl)
- Role: UX/UI Designer & Front-End Developer
- Goal: Deliver the full production cycle (design → code → deployment) with focus on UX and performance
🚀 Project evolution (Design-to-Code)
- Discovery & UX — user flow via the "Don't make me think" rule; initially a form, later simplified to CTA + phone + chat.
- UI Design (Figma) — custom UI without templates; design tailored to the installation industry.
- Development (Web Vitals) — implementing mockups while optimizing CLS and LCP.
- Production (SSG) — static builds for fast load times and low hosting costs.
🎯 Problem to solve
Renewable energy projects require trust — customers invest in a heat pump for years. The site had to be fast on mobile, look professional, and make contact easy. Another challenge was showing media (photos, video) without hurting performance.
❌ Technical challenges
- Media vs performance: Embedding YouTube and galleries can cause render-blocking.
- Mobile friction: Large forms discourage users.
- SEO: Competing in Google requires a fast site.
- Custom UI: Templates don't build a unique expert image.
💡 Technical solutions
- “Facade” pattern for video: JPEG thumbnail with Play button; player loads only after click — no render-blocking.
- LQIP (BlurHash): plaiceholder + sharp generate blurred placeholders at build time → eliminates CLS.
- UX simplification: CTA, phone, map, LLM chat instead of a bulky form.
- Custom UI: SCSS (BEM) with semantic HTML, no heavy UI libraries.
📈 Project outcomes
The project exercised the full production cycle and validated optimization techniques in practice:
| Aspect | What was achieved |
|---|---|
| Web Vitals | Optimized CLS and LCP, fast media loading |
| Architecture | SSG (Static Site Generation) — zero backend |
| UX | Shortened path to contact, "Don't make me think" |
| Workflow | Design-to-code in a single cycle |
"The site builds a professional image of the company from the very first click."
🛠️ Architecture & tech stack
- Frontend: Next.js 14 (App Router) with SSG
- Language: TypeScript (Strict Mode)
- Styling: SCSS (modules, BEM, variables)
- Media & performance: sharp + plaiceholder (BlurHash), react-youtube with the Facade pattern
- Interaction: Custom UI + LLM-powered chat
- Code quality: ESLint
🚀 Next steps
As the portfolio of completed projects grows → consider adding a Headless CMS (e.g., Sanity, Strapi) while keeping SSG performance.