This is simple shop page, rendering products from a json file and allowing the user to sort, filter and add the items to their cart. This project is built with create-react-app and uses Styled Components.
Using the dropdown select inputs, you can sort the products by price and also filter the products by size.
You can add products to the cart by selecting the product's Add to cart button.
You can view what's inside your cart by clicking on the shopping cart icon in the header. You can close your cart and go back to the shop page by clicking the Continue shopping button.
This application is tested using React Testing Library.
I chose to use a foundation dialog modal by ReachUI to display the shop items, as it provides completely accessible React components to build upon.
- Ability to remove items from the cart: I would have added a button to be able to remove items from the shopping cart. I would have added this functionality to the provider.
- Ability to select a size to add to the cart: I would have created a select input for a user to be able to select a size. I would have then saved this data and added it to the product object which is pushed onto the cart items array.
- Create a json server to fetch the data: I would have served the data via an API using a library such as
json-server. I would have had to adjust my testing strategy as the data would be coming from the API. One possible solution would be to use MSW to mock the endpoint so that I could generate test data for the responses. - Product pages: I would have used React Router to set up navigation between pages.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.