E-commerce (React, Styled components, TypeScript, Swiper JS)

🔗 Links

• Github URL: Click here
• Live Site URL: Click here

🛠️ Technologies Used

• React JS
• TypeScript
• Styled-Components
• HTML5, CSS
• Swiper JS

🗒️ Core Features

• Add/Remove items to/from the cart
• Switch main image when clicking on a small thumbnail
• Display a lightbox gallery when clicking on the main image
• Responsive layout

⚡ Additional Features

• User's order information is stored and managed in Context API.
• Implementation of a slider that works on both desktop and mobile environments
  • Slider layout changes for desktop, tablet, and smartphone.
• Ability to input order quantity via the keyboard, allowing up to 2 digits.
• Animation implemented using basic hooks without a separate animation library.
• Clicking on the backdrop automatically closes the cart, mobile menu, and lightbox gallery.

‼️ To-Do for Improvement

• When removing a Cart item, Navbar gets re-rendered due to an update in ProductContext, causing the CartBox to close.
• Faced difficulty in implementing unmount animation using basic hooks.