This project is a dynamic, single-page e-commerce application built to demonstrate proficiency in modern front-end web development. It simulates a functional product browsing experience, complete with dynamic data fetching, filtering, and a fully interactive shopping cart.
The application serves as a comprehensive showcase of core React concepts, API integration, and user-centric design principles.
- Dynamic Product Display: Fetches and displays a wide range of products from a live REST API.
- Real-time Search: Instantly filters products based on a user's search query.
- Dynamic Category Filtering: Generates filter buttons based on the categories available from the API, allowing users to browse products by type.
- Interactive Shopping Cart: Users can add products to a cart, which dynamically updates item quantities and calculates the total price.
- Responsive Layout: The UI is designed to be fully responsive, providing a seamless experience on both desktop and mobile devices.
- Toast Notifications: Provides instant user feedback with pop-up notifications when an item is added to the cart.
- React: A JavaScript library for building user interfaces.
- Vite: A lightning-fast build tool that provides an optimized development and production experience.
- CSS: For custom styling and responsive design.
- React Icons: A library for including popular icons in the project.
- React Toastify: A library for creating a customizable toast notification system.
- REST API: Utilizes the FakeStoreAPI to simulate backend product data.
Follow these steps to get a local copy of the project up and running on your machine.
- Node.js (v18 or higher) and npm
-
Clone the repository:
git clone [https://github.com/bhargavaalapati/ecommerce-product-page.git](https://github.com/bhargavaalapati/ecommerce-product-page.git)
-
Navigate to the project directory:
cd ecommerce-product-page -
Install the required npm packages:
npm install
To start the development server:
npm run dev