- A product page and a search bar to search and filter products.
- 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
- 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.
- 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
- Implemented mobile Responsiveness
- Deployed the project on Netlify.
- Implemented a shopping cart. Adding and deleting products from the shopping cart
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent