Frozen is a modern, responsive e-commerce frontend web app built using React.js and other npm pakages. It demonstrates typical online store features like product listing, search, filtering, and data coming from fakestore API. The app is ideal for portfolio presentation or as a base project for e-commerce MVPs.
This project simulates a typical online store experience for end-users. It provides core e-commerce functionality including dynamic product listing, search, cart, checkout flow. The app communicates with a ** Fake Store API ** to fetch product data and display it.
- Build a fully responsive e-commerce interface using React and npm packages.
- Fetch and display product data from a dummy API (fakestoreapi.com).
- Enable shop simulation and make a SPA for smooth user experience.
- Provide essential UX flows: search, filtering, pagination, cart management, and checkout summary.
- Organizing state management logic using use context and create-context for products cart and checkout.
- Implementing dynamic filtering and sorting method efficiently.
- First time using npm packages for notification and loading.
- First time building a react app like this and I enjoyed it.
The app is structured using React + using local state to handle app navigation, useContext for state management, and async promise method for external API communication. react spinners for loading pages to improve performance. Product data, including categories and details and rating are dynamically fetched from fakestore API.
- Product Catalog – Displays real-time products with categories, price, ratings, and images.
- Search & Filter – Supports keyword-based search, category filtering, and sorting.
- Add/remove products, quantity management, and cart summary
- Checkout Summary – Displays selected products, total price in cart
- Reusable Components – Header, ProductCard etc.
- Notification – Push notification when item is added or deleted from cart thorugh ** react.toastify **
- Loader – Optimizes initial load with ** react.spinners **
- Responsive Design – Fully adaptive for desktop views.
- React.js
- CSS3
- React Toastify
- React Spinners