This React application provides a seamless shopping experience, allowing users to browse products, search, filter, and add items to their cart.
- User Login: Provides a login page for existing users to authenticate themselves and access their accounts.
- Product Display: Fetches product data from an external API (DummyJSON) and displays them on the home page.
- Search Functionality: Enables users to search for products based on their name, enhancing the shopping experience.
- Filtering by Price: Provides options to filter products based on price range, improving product discovery.
- Shopping Cart: Implements a shopping cart feature, allowing users to add products, view the cart count, and see the total amount.
- Add to Cart: Adds an "Add to Cart" button on product cards for easy product selection.
- React v16+: For building the user interface and managing component-based architecture.
- React Router: Handles navigation within the application, ensuring a smooth user experience.
- React Query: Handles data fetching, caching, and synchronization with the server for improved performance.
- Redux Toolkit: Handles global state management such as add to cart and other global states.
- Iconify Library: Used for accessing and incorporating icons into the application for better visual representation.
- CSS Modules: Implements modular and scoped styling for components, ensuring maintainability and avoiding style conflicts.
- Responsive Design: Ensures the application adapts seamlessly across various devices, providing a consistent user experience.
- Error Handling & Validation: Implements robust error handling and input validation to enhance stability and user experience.
- Authentication Token: Saves the login token for authorization purposes, ensuring secure access to protected routes.
- Protected Routes: Add to cart and checkout pages can be acessed only by logged in users.
- Visit the shopping app portal in your browser to explore the features.
- Homepage: When you open the application, you will be directed to the homepage. Only logged-in users can access this page.
- Login: Existing users can log in by providing their credentials on the login page.
- Product Viewing: Once logged in, you can view the available products on the homepage. Use the search bar to find specific products or use the filter option to refine your search by price.
- Shopping Cart: Add products to your cart by clicking the "Add to Cart" button on product cards. You can view your cart's total count and amount at the top of the page.
- Navigation: Navigate between pages using the links provided in the application or the browser's back and forward buttons.
To run the application locally:
-
Clone this repository:
git clone [https://github.com/your-username/your-repository.git](https://github.com/ParthTiwa-ri/ecommerce.git)
-
Navigate to the project directory:
cd your-repository -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and visit the development server link to view the application.
