Profter — sklep ze sprzętem profesjonalnym
Sklep internetowy dla fachowców i firm budowlanych: wyszukiwanie sprzętu malarskiego, wykończeniowego i czyszczącego, przegląd parametrów oraz wybór produktów na telefonie.
Cel projektu
Ułatwić poruszanie się po rozbudowanym katalogu sprzętu i połączyć wybór produktu z informacjami potrzebnymi przed zamówieniem: parametrami, dostępnością, dostawą i serwisem.
Rozwiązanie i architektura
Responsywna witryna Next.js komunikuje się z zapleczem Magento przez GraphQL. Kategorie i strony produktów porządkują asortyment. Moduły konta klienta obejmują ulubione, porównanie i historię zamówień. Osobny panel React zawiera interfejsy zarządzania katalogiem, zamówieniami i treścią witryny. Studium prezentuje publiczny sklep; obsługę konta i administracji opisano na podstawie kodu, bez testowania dostępu produkcyjnego.
Ekrany Profter
Rzeczywiste zrzuty z profter.com.ua: strona główna, katalog sprzętu malarskiego, karta produktu i jej responsywna mobilna wersja internetowa.
Ekrany pokazują publiczne dane katalogowe profter.com.ua z 10 października 2026 roku. Nazwy, ceny i dostępność odpowiadają tej migawce. Nie kopiowano fikcyjnych rekordów klientów ani produkcyjnej bazy danych. Logowanie, administracja, składanie zamówień, płatności i integracje dostawy nie były testowane. Wygenerowane grafiki okładkowe są oddzielone od dokumentalnych zrzutów ekranu.
Zalety
- 🛠️ Wybór według rodzaju sprzętu — kategorie ułatwiają fachowcom rozpoczęcie wyszukiwania.
- 🔎 Zawężanie wyboru — kategorie i sortowanie wspierają wyszukiwanie produktów.
- 📋 Ocena produktu — zdjęcia i parametry pomagają poznać sprzęt.
- 📱 Przeglądanie na telefonie — sklep dostosowuje się do mniejszego ekranu.
- 🚚 Informacje przed zakupem — strony dostawy, płatności i serwisu są dostępne ze sklepu.
Technologie
Potwierdzone w kodzie: Next.js 14, React 18, TypeScript i SCSS dla sklepu; Magento Open Source 2.4.6 i PHP dla handlu; GraphQL dla danych witryny. Osobna aplikacja administracyjna używa React 18, Vite 5, Redux Toolkit i Tailwind CSS.
Tworzenie sklepu internetowego ze sprzętem profesjonalnym
Profter (PROF): sklep ze sprzętem profesjonalnym z responsywną witryną Next.js, zapleczem Magento i osobnym panelem administracyjnym React.
Od szerokiego asortymentu do użytecznej karty produktu
Fachowiec wybierający agregat malarski potrzebuje więcej niż nazwy produktu. Kategorie sprzętu, sortowanie, zdjęcia i parametry techniczne ułatwiają poznanie asortymentu. Profter łączy nawigację katalogową ze szczegółowymi informacjami o produktach do budowy i wykończenia.
Architektura headless z Magento
Witryna i zaplecze handlowe pełnią osobne funkcje. Next.js i React tworzą interfejs klienta, a Magento dostarcza dane przez GraphQL. Osobny klient React zawiera interfejsy robocze produktów, zamówień i treści. Ta struktura umożliwia różne interfejsy wokół wspólnej domeny handlowej.
Responsywne przeglądanie i zakres weryfikacji
Studium pokazuje rzeczywiste publiczne strony na komputerze i w widoku wielkości telefonu. Zrzuty potwierdzają widoczny układ i treść sklepu, lecz nie zakończone zakupy ani wzrost sprzedaży. W podobnym projekcie atrybuty katalogu, ścieżki klientów i integracje operacyjne należy ustalić przed wdrożeniem.