ShopVerse is a fully responsive e-commerce frontend built from scratch with HTML5, CSS3 and Vanilla JavaScript. The project recreates the core shopping experience of a modern online store — a hero landing page, category browsing, product listings with filtering and sorting, individual product detail pages, a persistent shopping cart, a multi-step checkout flow and account authentication screens. The interface includes a dark/light theme toggle, a wishlist system, toast notifications and smooth scroll-reveal animations, all powered by a shared product dataset and reusable JavaScript components for the header, footer and product cards across every page.
- Design and build a complete, multi-page e-commerce frontend from scratch
- Implement dynamic product rendering from a shared JSON-style dataset
- Build filtering, sorting and search across category and product pages
- Develop a persistent cart and wishlist using browser local storage
- Deliver a fully responsive layout with light and dark theme support
A lean, framework-free stack was used to keep the project lightweight, fast and fully transparent:
- Semantic HTML structure and accessible markup
- CSS architecture using custom properties and responsive grids
- DOM manipulation and dynamic UI rendering with Vanilla JS
- State management with localStorage (cart, wishlist, theme)
- UI/UX design, animation and cross-page component reuse
📁 e-commerce/ ├── 📄 index.html ├── 📄 products.html ├── 📄 product.html ├── 📄 cart.html ├── 📄 checkout.html ├── 📄 login.html ├── 📂 css/ │ ├── style.css │ └── responsive.css ├── 📂 js/ │ ├── app.js │ ├── products.js │ ├── cart.js │ └── checkout.js └── 📂 screenshot/
A visual walkthrough of the storefront — from the landing page hero and featured products to the full catalog with category filters.
The final build delivers a 16-product catalog spread across four categories — Electronics, Fashion, Accessories and Home — with featured and best-seller collections on the homepage. Visitors can browse by category, filter and sort the full catalog, view detailed product specs and related items, add products to a persistent cart, manage quantities, and complete a multi-step checkout. A wishlist and theme toggle round out the experience, all rendered dynamically from a single shared product dataset so every page stays consistent and easy to maintain.
ShopVerse demonstrates how a polished, production-style e-commerce experience can be built with nothing but HTML, CSS and Vanilla JavaScript — no frameworks required. By centralizing product data and reusing shared header, footer and card components across every page, the project stays lightweight, fast and straightforward to extend. It serves as a solid foundation for a real storefront, and as a showcase of clean frontend architecture, responsive design and thoughtful interaction details.