Katalog książek z koszykiem
Responsywny prototyp księgarni z katalogiem, modalem produktu, koszykiem i prostym scenariuszem zakupu.
RolaFrontend development w projekcie zespołowym
TypPrototyp katalogu e-commerce
LokalizacjaProjekt kursowy
ZakresImplementacja katalogu książek z filtrowaniem, modalem produktu, koszykiem i powiadomieniami.
StackHTML, CSS, JavaScript, Vite, API, LocalStorage
Czas realizacji1 tydz.
Podsumowanie projektu
- Typ projektu
- Prototyp katalogu e-commerce
- Cel
- Zbudować prosty katalog książek z filtrowaniem, kartą produktu, koszykiem i podstawowym procesem zakupu.
- Główne funkcje
- Katalog książek
- Filtrowanie kategorii
- Modal produktu
- Koszyk
- Wishlist
- Powiadomienia
- Moja rola
- Frontend development w projekcie zespołowym
- Stack
- HTML
- CSS
- JavaScript
- Vite
- API
- LocalStorage
- Rezultat
- Responsywny prototyp księgarni z podstawowym shopping flow i interaktywnymi stanami UI.
Problem
Użytkownik potrzebuje szybko przejrzeć katalog książek, zawęzić listę według kategorii, zobaczyć szczegóły produktu i dodać wybrane pozycje do koszyka bez przechodzenia przez złożony proces.
Rozwiązanie
Projekt łączy katalog książek, filtrowanie, modal produktu, koszyk, wishlist i krótkie komunikaty systemowe. Interfejs został przygotowany jako responsywny widok sklepu z podstawowym scenariuszem zakupowym.
Efekt
Powstał działający prototyp księgarni, który pokazuje pełną ścieżkę od przeglądania książek do dodania produktu do koszyka i potwierdzenia akcji.
Co zrobiliśmy
- Współtworzyliśmy frontend aplikacji w zespole
- Zaimplementowaliśmy przeglądanie katalogu i filtrowanie kategorii
- Przygotowaliśmy obsługę modala produktu i stanów szczegółów
- Dodaliśmy logikę koszyka i wishlist opartą o LocalStorage
- Zintegrowaliśmy widoki z danymi z API
- Zadbaliśmy o responsywność kluczowych sekcji
- Dodaliśmy stany powiadomień po akcjach użytkownika
- Wspieraliśmy integrację modułów w jeden spójny flow
Katalog książek
Główna sekcja z hero, kategoriami i listą książek.
Responsywność
Widoki desktop i mobile pokazujące responsywność interfejsu.
Opinie i wydarzenia
Sekcje z opiniami klientów oraz wydarzeniami księgarni.
Sekcja lokalizacji
Blok kontaktowy z adresem, danymi kontaktowymi i mapą.
Modal produktu
Widok szczegółów książki z ceną, ilością i akcjami zakupu.
Szczegóły produktu
Rozwinięte sekcje informacji o książce, dostawie i zwrotach.
Powiadomienia koszyka
Komunikaty po dodaniu produktu do koszyka i zakończeniu zakupu.
Potrzebujesz strony, która ułatwia klientom kontakt?
Przygotuję przejrzystą stronę z prostą ścieżką do zapytania, rezerwacji albo rozmowy.