Interaktywny model 3D
Luneta w Hero (React Three Fiber) rozkłada się na części i obraca samoczynnie, z detekcją WebGL i degradacją do statycznego wariantu na słabszym sprzęcie.
E-commerce · Projekt własny · 2026
Vantage Hunting
Demo sklepu i wizerunku dla marki premium sprzętu myśliwskiego i optycznego.
Next.js 16 i Payload CMS 3 w jednym procesie, PostgreSQL i Tailwind v4 - sklep i wizerunek dla marki premium sprzętu myśliwskiego i optycznego. Katalog z wariantami i realną walidacją stanu magazynowego, konta klientów z historią zamówień, dział wiedzy sterowany z CMS. Projekt demonstracyjny - katalog czeka na prawdziwą fotografię produktową.
Next.jsPayload CMSPostgreSQLTailwind v4DockerReact Three Fiber
Rola: Projekt, kod i wdrożenie - całość solo.
Next.js · Payload CMS
Next.js 16
Stack
Payload 3
CMS
React Three Fiber
Model 3D
Wyzwanie
Chciałem sprawdzić, czy da się zbudować sklep, który wygląda i działa jak dla marki premium - to demo bez prawdziwego klienta i prawdziwego katalogu zdjęć. Wyzwaniem było wizerunkowe Hero z interaktywnym elementem, który od pierwszej sekundy komunikuje precyzję i technologię bez utraty wydajności na słabszym sprzęcie, plus pełna logika e-commerce (konta, zamówienia, stan magazynowy) i dział wiedzy edytowalny bez pomocy programisty.
Rozwiązanie
Next.js 16 (App Router) z Payload CMS 3 jako headless backendem w tym samym procesie - jedna aplikacja, jeden deployment, bez osobnego serwera CMS. W Hero interaktywny model 3D lunety (React Three Fiber) rozkłada się na części i kręci samoczynnie, z detekcją WebGL i płynną degradacją do statycznego wariantu na słabszym sprzęcie. Całość konteneryzowana w Dockerze i wdrażana przez Portainer za Nginx Proxy Manager, z CI/CD na GitHub Actions.
Proces
- 01 Architektura: Next.js 16 (App Router) z Payload CMS 3 jako headless backend w tym samym procesie - jedna aplikacja, jeden deployment.
- 02 Katalog produktów, koszyk i checkout z zamówieniami gościa oraz kontami klientów (historia zamówień, zapisane adresy).
- 03 Warstwa wizualna: model 3D lunety w React Three Fiber w Hero, animowane tło canvas 2D reagujące na kursor, mikro-tilt na kafelkach kategorii.
- 04 Konteneryzacja (Docker, multi-stage build) i CI/CD na GitHub Actions, wdrożenie przez Portainer za Nginx Proxy Manager.
- 05 Audyt własnego kodu w trakcie budowy panelu klienta - znaleziona i naprawiona dziura w kontroli dostępu.
- 06 Optymalizacja wydajności: leniwe ładowanie warstwy 3D dopiero po zdarzeniu load i bezczynności głównego wątku, test na 320-768px i wyżej.
Jak to wygląda
Co potrafi
Katalog i stan magazynowy
Produkty z kategoriami, wariantami i specyfikacją techniczną; dostępność sprawdzana po stronie klienta i ponownie, autorytatywnie, na serwerze przy składaniu zamówienia.
Koszyk i checkout
Zamówienia gościa oraz konta klientów: rejestracja, logowanie, historia zamówień, zapisane adresy, „zamów ponownie".
Dział wiedzy z CMS
Blog techniczny w pełni sterowany z panelu Payload - kategorie, artykuły i obrazy dodaje się bez dotykania kodu.
Sekcje marketingowe z CMS
Hero, „Manifesto" i „Przewaga Vantage" edytowalne z panelu admina, nie zaszyte w kodzie strony.
Tło reagujące na kursor
Animowana „cyfrowa topografia" w tle (canvas 2D) reaguje na ruch kursora - świadomie bez WebGL, bo druga ciężka scena 3D nie miała uzasadnienia wydajnościowego.
Dane techniczne
- Stack
- Next.js 16 (App Router, TypeScript)
- CMS
- Payload CMS 3 (headless, w tym samym procesie)
- Baza danych
- PostgreSQL
- Styling
- Tailwind CSS v4
- Infrastruktura
- Docker (multi-stage, standalone), Portainer, Nginx Proxy Manager
- CI/CD
- GitHub Actions
Prywatność
W trakcie budowy panelu klienta znalazłem i naprawiłem realną dziurę w kontroli dostępu - błąd w API pozwalał zalogowanemu klientowi odczytać dane innych klientów. Naprawione samodzielnie, zanim trafiło to na produkcję.
Następny projekt
Mobilna platforma pentestingowa →