This project is a React-based web application that replicates the core functionalities of the ASOS online shopping platform.

Designed for users who want to browse, search, and save products, the app provides a streamlined shopping experience with features like item search, product details, and a save-for-later option.

It's ideal for anyone looking to explore or purchase items similar to the ASOS inventory, with an interface that emphasizes usability and smooth navigation.

• Product Search & Filtering: Easily search and filter products by categories, brands, and more.

• Product Details: View detailed information about each product, including images, descriptions, and pricing.

• Save for Later: Save your favorite items for later viewing or purchase with a custom heart button.

• Seamless Navigation: Smooth navigation with React Router, allowing users to browse different sections of the app efficiently.

• Zoom Feature: Zoom in on product images for a closer look, with smooth cursor interaction.

Client: React, React Router, Styled-Components, vite, Mo.js

Server: Netlify

• ASOS API:
  • ASOS Crawler API - For accessing product data.
  • ASOS Product Details API - For fetching detailed product information.

• UI & Icons:

  • Pictogrammers Icons - Easy-to-use icons integrated with React.
  • @emotion/react & @emotion/styled: Emotion's React-based styling solution, for writing CSS styles with JavaScript.
  • @mui/material & @mui/icons-material: Material-UI components and icons for building consistent, modern UIs.
  • styled-components: A popular library for styling React components using tagged template literals.
  • react-bootstrap: Bootstrap components as React components.
  • react-icons: A collection of popular icons for React.
  • react-responsive-carousel: A responsive carousel component for React.
  • react-slick & slick-carousel: Carousel components for React with extensive customization options.

• Animation & Effects:

  • @mojs/core: A powerful motion graphics library.
  • canvas-confetti: A lightweight library for creating confetti animations.
  • framer-motion: A library for animations and gestures in React.

• State Management & Miscellaneous:

  • react-lazyload: For lazy-loading React components and images.
  • prop-types: For type-checking React props.

• Routing:

  • react-router-dom: The standard routing library for React applications.

• React Libraries:

  • Skeleton React - To be incorporated.
  • React Slick - Carousel component with navigation.
  • Material UI Accordion - For collapsible content panels.
  • React Bootstrap Dropdowns - Dropdown menus for React.
  • Floating UI - Tooltips and popovers.

• Custom Components:

  • Heart Button: Based on a concept from this CodePen example: https://codepen.io/bnewton/pen/KMbLZx

• Error Handling:
  • Replace the default alert prompting users to select a size with a custom error message.
• Responsive Design:
  • Add media queries to improve responsiveness across different screen sizes.

Advice for future projects - Avoid using outdated or poorly maintained npm packages in future projects to minimize customization effort and improve performance.# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

MIT