Create a small e-commerce app, integrated with a fake API, using React, React Hooks, React Context and Typescript.
- React.js with vite;
- modularization, breaking the app in small chunks
- Hooks & Custom Hooks;
-
Context APIRedux Toolkit;- I think redux is a better and easy tool to manage the cart state across components and keep it imutable while doing so.
- Typescript;
- React Query;
- A great tool to cache http responses, it even deduplicate calls that are made from diferent components at same time.
- ZOD;
- validate the format of the api return, throwing an error if something unexpected is returned
General considerations: Design/UI is not important, but something minimally beautiful is a plus; What will be reviewed is code organization, componentization, good practices; We expect to see a functional app, so error/loading/success messages should be present;
live.
- User should be able to see all Product Categories;
- User should be able to enter into a Category to see category details;
- User should be able to see the products of a category;
- User should be able to enter into a product to see the product details;
- User should be able to see the details of a product;
- User should be able to select the amount and add the product to the cart;
- User should be able to see the active cart;
- User should be able to remove a product from the cart;
- User should be able to cancel the order, cleaning up the cart;
- User should be able to confirm his order, seeing a success screen;
- User should be able to search by product name, to easily find a product to buy;
- The system should calculate the total amount of the cart;
- The system should persist the state of the cart even closing/opening the app;
- The system should do a pre-load of the data, so the user can navigate among screens without seeing reloading every time;