Giełda Biomasy, Pelletu, Trociny, Zrębki — case study 4 portali e-commerce na Next.js 15

Polski rynek paliw biomasowych — pellet drzewny, zrębka, trociny — ma skalę liczoną w miliardach złotych obrotu rocznie. Mimo tej wielkości handel pozostaje rozproszony: setki małych dostawców regionalnych, dziesiątki sklepów internetowych prowadzonych przez producentów, nieformalne grupy w mediach społecznościowych. Brakowało centralnego miejsca, w którym kupujący mógłby porównać oferty z całego kraju według ujednoliconych parametrów technicznych — klasy, kaloryczności, wilgotności, certyfikacji. Zbudowaliśmy je. Cztery wertykały, jedna baza danych, monorepo Next.js 15.

Wyzwanie — agregacja rozproszonego rynku według wspólnych norm

Klient potrzebował platformy, która agreguje ofertę z całego kraju, prezentuje parametry zgodne z polskimi normami (PN‑EN ISO 17225‑2:2021‑10) oraz obowiązującym rozporządzeniem (Dz.U. 2025 poz. 618 dla pelletu klasy A1/A2), i obsługuje pełną ścieżkę zakupową — od wyszukania, przez zapytanie ofertowe i negocjację, po płatność online.

Dodatkowo: cztery odrębne wertykały (biomasa ogólnie, pellet, zrębka, trociny) miały działać jako osobne marki z własną tożsamością wizualną i pozycjonowaniem SEO, ale opierać się na wspólnej bazie danych i wspólnym koncie sprzedawcy. Jedno konto producenta, jedna oferta — wiele wertykałów, w których może się pokazać.

Zakres prac — 8 etapów

1. Strategia i pozycjonowanie — analiza rynku, definicja czterech wertykałów, mapa konkurencji.
2. Tożsamość wizualna — brandbook każdej z marek, system kolorystyczny, logotypy (sygnet + pełna forma).
3. Architektura informacji — projekty UX/UI dla mobile i desktop, prototypy interakcji.
4. Implementacja frontendowa — Next.js 15 App Router, React 19, Tailwind CSS v4, system designu w pakiecie współdzielonym.
5. Backend i baza danych — schemat Postgres, ORM‑free SQL przez Neon serverless, migracje idempotentne.
6. Integracje — uwierzytelnianie (Google OAuth + JWT), płatności (PayU), poczta transakcyjna (Resend), analityka (GA4 + Consent Mode v2).
7. Treści i SEO — 120+ artykułów blogowych w czterech wertykalach, 200+ stron lokalnych generowanych z bazy danych.
8. Wdrożenie, testy, optymalizacja — cztery osobne projekty na Vercel, ciągłe wdrażanie, optymalizacja Core Web Vitals.

Główne funkcjonalności

Dla kupującego

• Wyszukiwarka ofert z filtrowaniem po kategorii, województwie, klasie jakości i parametrach,
• Interaktywna mapa Polski z 16 województwami i geolokalizowanymi ofertami,
• Karta produktu z pełną specyfikacją techniczną oraz tabelą wymagań prawnych dla danej klasy,
• Alerty cenowe z modalem rozpoznającym województwo na podstawie kodu pocztowego,
• Zapytanie ofertowe (RFQ) z routingiem na skrzynkę sprzedawcy,
• Czat wbudowany w platformę,
• Płatności online: BLIK, karty Visa i Mastercard, szybkie przelewy, Google Pay, Apple Pay.

Dla sprzedawcy

• Rejestracja konta firmowego z weryfikacją NIP, REGON, statusu VAT,
• Kreator ofert z polami branżowymi specyficznymi dla każdej kategorii paliwa,
• Panel zarządzania ofertami i zapytaniami,
• Czat z kupującymi,
• Dashboard z historią aktywności.

Dla administratora

• Pełen panel moderacji ofert, sprzedawców i kont,
• Kolejka blogowa współdzielona między czterema serwisami,
• Statystyki i metryki w czasie rzeczywistym.

Wyzwania techniczne i sposób ich rozwiązania

Cztery domeny, jedna baza danych

Każdy z czterech serwisów ma własną tożsamość wizualną, osobny zestaw treści blogowych i osobny canonical URL, ale dzieli z pozostałymi wspólną bazę użytkowników, sprzedawców i ofert. Rozwiązaliśmy to przez monorepo z czterema aplikacjami Next.js i wspólnym pakietem UI (ui-core), który zawiera komponenty, typy domenowe i logikę bazodanową. Każda aplikacja deployowana jest osobno na Vercel z własną domeną, ale wszystkie korzystają z tej samej instancji Neon Postgres. Dyskryminacja kategorii (pellet / zrębka / trociny / biomasa) odbywa się na poziomie zapytań SQL i routing per domena.

Programmatic SEO na 200+ stronach

Generujemy automatycznie strony lokalne dla każdej kombinacji województwa, kategorii paliwa i wertykalu. Każda strona ma unikalny tytuł, opis, listę ofert dostępnych w danej lokalizacji, średnie ceny rynkowe i mapę. Treść jest unikalna (nie szablonowa) dzięki dynamicznym danym z bazy. Strony są generowane statycznie z fallbackiem ISR dla świeżo dodanych ofert. Bez tego mechanizmu pozyskanie ruchu wyszukiwarkowego wymagałoby ręcznego pisania 200+ stron i utrzymywania ich aktualności.

Mapa interaktywna z setkami markerów

MapLibre GL JS jako silnik renderowania map wektorowych (open source, brak vendor lock‑in), CARTO jako dostawca mapy bazowej, GeoJSON granic województw jako warstwa nakładana, klasteryzacja markerów przy większej liczbie ofert. Wszystko zoptymalizowane pod mobile — mapa działa płynnie na ekranie 320 px.

Compliance prawno‑jakościowy

W maju 2025 roku weszło w życie rozporządzenie Ministra Klimatu i Środowiska określające wymagania jakościowe dla pelletu drzewnego w obrocie. Każda karta produktu pelletu zawiera pełną tabelę 12 parametrów wymaganych przez rozporządzenie z wyróżnieniem klasy A1 vs A2, plus odwołanie do polskiej normy PN‑EN ISO 17225‑2:2021‑10. Wszystkie wartości są edytowalne z poziomu panelu sprzedawcy.

Płatności online zgodne z PSD2

Integracja PayU REST API (OpenPayU 2.1): uwierzytelnianie OAuth2 z cache'owaniem tokenu, generowanie zamówień, weryfikacja podpisu IPN (MD5 sender check w stałym czasie), persistencja stanu płatności w bazie danych z pełnym śladem audytowym (raw notification w polu JSONB). 3D Secure 2 i Strong Customer Authentication po stronie PayU, my obsługujemy tylko stan zamówienia i komunikację z klientem.

Wydajność i dostępność

Core Web Vitals w zielonej strefie na wszystkich kluczowych stronach:

• LCP poniżej 2,5 s,
• INP poniżej 200 ms,
• CLS poniżej 0,1.

Web Vitals monitorowane są w czasie rzeczywistym poprzez własną tabelę zdarzeń serwerowych. Pełna zgodność z WCAG na poziomie AA, focus rings, skip linki, semantyczny HTML.

Stos technologiczny

Warstwa	Technologia	Uzasadnienie
Framework	Next.js 15 (App Router) + React 19	SSR pod SEO, SSG pod wydajność
Język	TypeScript (strict)	Eliminacja całych klas błędów na etapie kompilacji
Style	Tailwind CSS v4	CSS‑first, brak narzutu runtime
Baza danych	PostgreSQL na Neon (serverless)	Sprawdzona baza, autoskalowanie, brak administracji
Hosting	Vercel	Globalna sieć dystrybucji, funkcje serwerowe na krawędzi
Płatności	PayU REST API (OpenPayU 2.1)	Krajowy operator regulowany przez KNF
Uwierzytelnianie	Google OAuth 2.0 + JWT	Logowanie bez hasła, sesje szyfrowane kryptograficznie
Poczta transakcyjna	Resend	Wysoka dostarczalność, branded templates
Analityka	GA4 + zdarzenia serwer‑side	Pełna obserwowalność lejka, zgodność RODO
Mapa	MapLibre GL JS	Open source, brak uzależnienia od dostawcy
Bezpieczeństwo	reCAPTCHA v3, rate limiting, SHA‑256	Ochrona przed botami, anonimizacja IP

Treści i SEO

• 120+ artykułów blogowych rozłożonych między czterema wertykalami, każdy z dedykowanym autorem branżowym i kategorią tematyczną,
• Wewnętrzne linkowanie sterowane regułami: artykuł o normie ENplus linkuje do strony kategorii, strona kategorii linkuje do najlepszych ofert, oferty linkują do profilu sprzedawcy,
• 200+ stron lokalnych generowanych z bazy danych z unikalnym kontentem per województwo i kategoria,
• Schema.org / JSON‑LD dla każdej oferty (typ Product), bloga (typ Article), sprzedawcy (typ Organization),
• Sitemap XML automatyczna, robots.txt, Open Graph + Twitter Cards na każdej stronie.

Rezultat

• 4 serwisy produkcyjne wdrożone na osobnych domenach: gieldabiomasy.pl, gieldapelletu.pl, gieldazrebki.pl, gieldatrociny.pl,
• Pełna ścieżka zakupowa od wyszukania, przez zapytanie ofertowe, czat, po płatność online z PayU,
• Compliance z polskimi normami i prawem — gotowe pod realny obrót handlowy (rozporządzenie z 2025, norma PN‑EN ISO 17225‑2),
• Skalowalna architektura serverless — brak kosztów stałych infrastruktury, koszty zależne od ruchu,
• Performance w zielonej strefie Core Web Vitals — LCP <2,5 s, INP <200 ms, CLS <0,1,
• Mobile‑first — pełna funkcjonalność na ekranach od 320 px.

Kontekst — szersze portfolio biomasowe Max Digital

Giełda Biomasy zamyka klamrą portfolio projektów Max Digital w branży paliw odnawialnych. Wcześniejsze realizacje:

• biomasstrust.eu — strona europejskiej organizacji zajmującej się biomasą i energią odnawialną, projekt firmowy z silną tożsamością wizualną pod B2B EU,
• biomasaportal.pl — polski portal branżowy biomasy.

Cztery portale giełdowe są jakościowym skokiem w porównaniu do tych projektów: pełny e‑commerce, własna integracja PayU, programmatic SEO, monorepo i compliance ze świeżym rozporządzeniem. To projekt, który łączy strategię produktową, design systemowy i twardy backend handlowy — czego potrzebuje każdy poważny gracz B2B chcący zbudować przewagę technologiczną w niszy.

Wnioski

Trzy rzeczy, które ten projekt udowodnił:

1. Monorepo + wspólny pakiet UI to realne narzędzie skali. Cztery niezależne marki na tym samym kodzie utrzymują spójność produktową i obniżają koszt rozwoju o połowę względem czterech osobnych stacków.
2. Programmatic SEO zadziała tylko wtedy, gdy treść jest dynamicznie unikalna, nie szablonowa. 200 stron typu „pellet województwo X" z tym samym akapitem to thin content. Te same 200 stron z aktualnymi ofertami, średnimi cenami i mapą — to realny ruch i realne leady.
3. Compliance to feature, nie obciążenie. Tabela 12 parametrów z odwołaniem do rozporządzenia z 2025 i normy PN‑EN ISO 17225‑2 to nie tylko zgodność z prawem — to różnicownik wobec konkurencji, która sprzedaje pellet bez podawania klasy.

Szukasz partnera technologicznego, który potrafi zbudować poważny portal e‑commerce z prawdziwym backendem handlowym, a nie kolejny landing na WordPressie? Aplikacje webowe i strony Next.js Max Digital — w tym samym stacku, na którym powstała Giełda Biomasy.