Book catalog with cart
Responsive bookstore catalog prototype with product details, cart interactions, and a simple purchase path.
RoleFrontend development in a team project
TypeE-commerce catalog prototype
LocationCourse project
FocusBuilding a practical bookstore catalog flow with filtering, product details, and cart interactions.
StackHTML, CSS, JavaScript, Vite, API, LocalStorage
Duration1 week
Project summary
- Project type
- E-commerce catalog prototype
- Goal
- Build a simple book catalog with filtering, product details, cart, and a basic purchase flow.
- Main features
- Book catalog
- Category filtering
- Product modal
- Cart
- Wishlist
- Notifications
- My role
- Frontend development in a team project
- Stack
- HTML
- CSS
- JavaScript
- Vite
- API
- LocalStorage
- Result
- A responsive bookstore prototype with a basic shopping flow and interactive UI states.
Problem
Users need a quick way to browse books, narrow the list by category, open product details, and add selected items to the cart without a complex flow.
Solution
The project combines a book catalog, category filtering, product modal, cart, wishlist, and short system notifications. The interface was built as a responsive bookstore view with a basic shopping flow.
Result
The result is a working bookstore prototype that shows the path from browsing books to adding a product to the cart and confirming the action.
What we did
- Implemented key frontend modules in a team workflow
- Built the catalog browsing and category filtering experience
- Implemented product modal interactions and detail states
- Added cart and wishlist state handling with LocalStorage
- Connected UI logic with API-driven book data
- Implemented responsive behavior for catalog sections
- Added notification states for cart and purchase actions
- Integrated and stabilized UI flows across team modules
Book catalog
Main section with hero, categories, and book list.
Responsive Design
Desktop and mobile views showing the responsive interface.
Feedbacks and events
Sections with customer feedback and bookstore events.
Location section
Contact block with address, contact details, and map.
Product modal
Book details view with price, quantity, and purchase actions.
Product details
Expanded information sections for book details, shipping, and returns.
Cart notifications
Messages after adding a product to the cart and completing purchase.
Need a website that makes customer contact easier?
I can prepare a clear website with a simple path to an inquiry, booking request or conversation.