E-commerce Store (Vanilla JS + FakeStoreAPI)
A vanilla JavaScript e-commerce store that fetches products from FakeStoreAPI, supports search/filter/sort, dark mode persistence, and a full cart experience (quantity control, remove with confirmation, totals) using LocalStorage and SweetAlert2.
HTML
CSS
JavaScript
Fetch API
DOM
LocalStorage
SweetAlert2
Project Overview
Products from FakeStoreAPI with loading spinner.
Search + category filter + price sort (preferences saved).
Star rating UI (full/half stars).
Dark/Light mode toggle with LocalStorage.
Cart with quantity controls + SweetAlert2 confirmations.
Live totals and cart badge updates.
Tech Stack
HTML+CSS|VanillaJS|LocalStorage|SweetAlert2
Implementation
Data Flow: fetch() → products[] → displayProducts() → dynamic cards.
Filters: filterAndSortProducts() with search/includes, category, price sort.
Cart: LocalStorage cart[], addToCart(), updateCartUI() with reduce().
Persistence: Theme, filters, cart all saved/restored automatically.
How It Works
Load → restore theme/filters/cart from LocalStorage.
Fetch/render products from FakeStoreAPI.
Filter/sort/search → preferences persist.
Add to cart → SweetAlert2 feedback + badge update.
Cart page → quantity +/-, remove with confirmation, live totals.
Key Innovation: LocalStorage-first architecture keeps state across sessions.
Search + category filter + price sort (preferences saved).
Star rating UI (full/half stars).
Dark/Light mode toggle with LocalStorage.
Cart with quantity controls + SweetAlert2 confirmations.
Live totals and cart badge updates.
Tech Stack
HTML+CSS|VanillaJS|LocalStorage|SweetAlert2
Implementation
Data Flow: fetch() → products[] → displayProducts() → dynamic cards.
Filters: filterAndSortProducts() with search/includes, category, price sort.
Cart: LocalStorage cart[], addToCart(), updateCartUI() with reduce().
Persistence: Theme, filters, cart all saved/restored automatically.
How It Works
Load → restore theme/filters/cart from LocalStorage.
Fetch/render products from FakeStoreAPI.
Filter/sort/search → preferences persist.
Add to cart → SweetAlert2 feedback + badge update.
Cart page → quantity +/-, remove with confirmation, live totals.
Key Innovation: LocalStorage-first architecture keeps state across sessions.
ContactMe
Have a question or want to work together? Send me a message using the form below.