The challenge is a basic shopping cart, it allows you to search, add, update and remove products.
Once you have all you need in your shopping cart you can complete the order and visit the thank you page.
You can see the prototype and the design inspector
You will have to signup in Figma in order to use the inspector.
At the beginning the cart is empty, the pricing panel is set to zero, the delivery date is calculated (see the rules section to know how to calculate it) and the complete order button is disabled.
The search box lets you find products.
When you type the name of a product, the matched results will appear in the cart panel.
The cart panel shows the results when the search box is not empty, otherwise, it shows the products already added to the cart.
From this view you can add the product using the counter component (see rules section).
Here you can see the products added to our cart, the pricing panel updated and the complete order button enabled (see rules section to know when to enable the button).
Remember that you can only access the cart products if the searchbox is empty.
Once you complete the order you visit this page, it displays the order code and gives you a link to continue shopping.
- Use create-react-app to setup the project.
- Use styled-components to style the components.
- Use apollo-client to communicate with the backend and state management.
- Use reach-router as the router.
- Use graphql-js to build the api
- Use MySQL as database and sequelize as ORM to handle operations.
- Use express as server.
The company delivers in 24 hours from Monday to Friday. Take this rule into account while calculating the delivery date.
For example:
A person buying on Friday, Saturday or Sunday will see Monday as the delivery date instead of Saturday. A person buying on Monday will see Tuesday as the delivery date.
The shipping cost is always 10% of the products cost. Taxes are 18% of the products cost. Product prices have taxes included.
Example:
if all products cost $100 the shipping cost will be $10 while taxes is $18 and the final price $110.
The shipping cost line must highlighted.
The complete order button is only enabled and has an orange color if the total price is equal or greather than $50, otherwise, the button is disabled and the order cannot be completed.
A shopping cart product can be removed by clicking on the delete button.
Check the behaviour in here
The counter component will dull the product component if opened and show two knowbs to decrease and increase the product quantity while the number in the middle gets updated as well as the pricing panel.
If the cart has no products and the search box is empty, an empty cart state is shown.
The order code should be incremental, and must have 5 characters including the
P.
example: for the first order the code will be P0001 for the order 20 the code
should beP0020.
