Outland Gear

Statyczny, wielostronicowy front-end sklepu e-commerce ze sprzętem outdoorowym, katalogiem produktów, kompletami podróżnymi, koszykiem, checkoutem i zapleczem buildowym pod publikację.

Katalog korzysta z danych w data/products.json i obsługuje filtrowanie po cenie, ocenie, podkategorii oraz badge'u, a także sortowanie, wyszukiwanie, paginację typu load more i synchronizację stanu filtrów z adresem URL.

Projekt zawiera dynamiczne strony produktów i kompletów podróżnych oparte o slugi i dane JSON, koszyk zapisujący stan w localStorage, checkout z walidacją, formularz kontaktowy, newsletter, obsługę motywu light/dark oraz fallbacki dla problemów z danymi lub storage.

E-commerceOutdoorTurystykaSklep online

Typ projektu

Wielostronicowy front-end sklepu e-commerce

Status

Projekt referencyjny / gotowy front-end statyczny

Showcase portfolio bez backendu zamówień. Zakres skupia się na warstwie front-endowej: katalogu, koszyku, checkoutcie, formularzach, SEO, dostępności i buildzie produkcyjnym.

Dokumentacja

Opis techniczny projektu

Plik opisuje zakres sklepu, funkcje, dane, stack, build, deployment, SEO i testy dostępności.

Pobierz opis techniczny

Priorytet

Katalog produktów, koszyk, checkout, dostępność, SEO i build e-commerce

01

Katalog produktów i filtry

Katalog korzysta z lokalnych danych JSON, obsługuje filtrowanie, sortowanie, wyszukiwanie, paginację load more oraz synchronizację stanu filtrów z URL.

02

Produkt, koszyk i checkout

Dynamiczne strony produktów i kompletów działają na podstawie slugów, a koszyk w localStorage obsługuje ilości, usuwanie pozycji i podsumowanie zamówienia.

03

SEO, Netlify i testy a11y

Build generuje metadane, sitemapę, roboty i prerenderowane ścieżki, a jakość dostępności wspierają testy Playwright + axe-core oraz workflow GitHub Actions.

Architektura CSS jest podzielona na warstwy tokens, base, layout, components i pages. Logika aplikacji działa w modułach ES, a dane produktów, kategorii i kompletów są utrzymywane w data/*.json.

moduły catalog, product, cart, checkout, travel-kits, faq, newsletter i contact,
PostCSS z postcss-import i cssnano oraz esbuild,
sharp, własne skrypty Node i prerender ścieżek produktów oraz kompletów,
Playwright, axe-core i GitHub Actions dla automatyzacji testów dostępności.

Frontend

HTML5 MPA / CSS3 / ES Modules

Wielostronicowa aplikacja z partialami header/footer i modułowym JavaScriptem.

Dane i sprzedaż

JSON, katalog, koszyk, checkout

Produkty i komplety są zasilane z danych, a koszyk oraz formularze działają po stronie klienta.

Standard jakości

Build, SEO, Netlify i a11y

Projekt obejmuje netlify.toml, robots.txt, sitemap.xml, nagłówki, cache policy i testy Playwright + axe-core.

Mockup mobilny projektu Outland Gear prezentowany w widoku telefonu

Mockup tabletowy projektu Outland Gear prezentowany w widoku tabletu

Zobacz stronę Wróć do projektów

Outland Gear

Outland Gear to statyczna aplikacja MPA dla sklepu outdoorowego, z katalogiem, stronami produktów, koszykiem, checkoutem, formularzami i zapleczem SEO.

Case study koncentruje się na praktycznych elementach sklepu: katalogu, danych produktowych, koszyku, checkoutcie oraz standardzie technicznym wdrożenia.

Katalog produktów i filtry

Produkt, koszyk i checkout

SEO, Netlify i testy a11y

Outland Gear został zbudowany jako wielostronicowy front-end HTML, CSS i Vanilla JavaScript, z lokalnymi danymi JSON oraz procesem buildowym dla e-commerce.

Przejdź do wersji live sklepu albo wróć do pełnego portfolio.