fatukunda/e-commerce-product-page

Task

• A product page and a search bar to search and filter products.

How to test it locally

• Clone the repo by running git clone https://github.com/fatukunda/e-commerce-product-page.git
• Install dependencies by running npm install
• Run the application by running npm start
• Run tests by running npm run test
• Get test coverage by running npm run test:coverage

Tasks implemented

• A product page that has the following:-
  • Displays product attributes (Attributes: title, body_html, vendor, images)
  • Displays available variants (Attributes: options, variants)
  • Displays a programmatically generated QR code for the product with the product url.
  • Displays a button to add the product to the cart
• A search bar component that achieves the following:-
  • Sorts products randomly, alphabetically, price high to low and price low to high.

Technologies & packages used

• Typescript - Stongly typed language that builds on top of JavaScript
• React 17 - A frontend UI framework
• Redux Toolkit - For state management
• Tailwind - A utility-first css program
• Json server - For creating REST API-like server
• QRCode.React - A package to generate QR code
• Jest & React testing library - For writing Unit tests
• Netlify - For hosting the application

Bonus Features:

• Implemented mobile Responsiveness
• Deployed the project on Netlify.
• Implemented a shopping cart. Adding and deleting products from the shopping cart