Welcome to Dropit's Frontend Test

Disclaimers

• The stack for this task is similar to the one we're using here at Dropit (React with Typescript)
• The architecture as well (simple implementation)
• You can add and modify the given architecture, or implement a different architecture of your choosing

Guidelines

• Keep code clean and organized
• Please showcase your knowledge of best practices and your understanding of React in this assignment
• Submit the task via mail or a private repo

Design

• Figma - Frontend candidate assignment

Requirements

• Set up an application state (consistent for a single session)

• Support responsive design for mobile, tablet and desktop

• Catalog page

  • Add search input that filters locally the displayed data by product's name or id
  • Handle add product to cart
  • Display the cart icon with a badge counter for the quantity sum of the products (not products count) in the cart

• Cart page

  • Set up a new page for the cart
  • Display products that are in the cart
  • Add the ability to remove products from the cart
  • Add the ability to chage to a product's quantity
  • Show summary of the products
  • Add a checkout button (disabled when the cart is empty)
  • Handle checkout by displaying a successful modal