Skip to content
Submitted over 1 year ago

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

react, typescript, styled-components
Lee•170
@tripkmin
A solution to the E-commerce product page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

🔗 Links

🛠️ 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.
Code

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Lee's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord