As per your mocks, start implementing the product search feature, categories page, and the single product page itself. More info is provided below.
Where will I get data to render?
If the fakestoreapi is not helpful, feel free to mock the data by creating a JSON file with any relevant data yourself. The only thing you need to be careful is that you should fix the shape of the data and assume that this data was coming from the server itself. This way, once you have the server ready, you can just change the source. I agree that there will be front-end changes when the app is paired with the server, but hopefully they should be minimal if the shape is consistent.
Also, remember that any API can and will fail. So take the error cases into account as well.
Requirements
Product Search Feature
When the user starts typing a product, you should show an autocomplete results box (or page if that's what your mock has) with the results. User should be able to tab through the results. Other natural keyboard buttons should also work.
Categories Page
The product display should have price, product name and rating at the very least. There should also be a "Add to cart" button (this doesn't have to work). The user should be able to filter the product set with a few things of your choosing. Also, the user should be able to sort the set based on some criteria (such as price, rating etc.)
Single Product Page
The page should show the price, description (if any), rating, images, quantity, add to cart, add to wishlist etc.
Feel free to add more things on these pages if they are present in your mocks.
Checklist of requirement
[ ] Autocomplete Product Search Feature
[ ] Render correct outputs
[ ] Has Autocomplete
[ ] Tab Accessible
[ ] Mobile Responsive
[ ] Categories Page
[ ] Mobile Responsive
[ ] Left side bar with filters
[ ] Sort the product set (for e.g. on the basis of price)
[ ] Tab Accessible
[ ] Product Page
[ ] Mobile Responsive
[ ] All relevant details are visible
[ ] Tab Accessible
[ ] Routes should change upon going to different screens
Read this before proceeding with E2E testing. Use puppeteer.js or Cypress (make a choice and comment it below) to make at least two E2E tests for your application. Try to do this at the end of the making the search, product, and product feature. Here's a tutorial for using Cypress with React. Here are two articles for puppeteer: 1 and 2
Need help?
Comment on this thread if there is any confusion with the requirements. Try to follow your mocks. Don't drastically change things until needed. Minor modifications are allowed.
Instructions
As per your mocks, start implementing the product search feature, categories page, and the single product page itself. More info is provided below.
Where will I get data to render?
If the fakestoreapi is not helpful, feel free to mock the data by creating a JSON file with any relevant data yourself. The only thing you need to be careful is that you should fix the shape of the data and assume that this data was coming from the server itself. This way, once you have the server ready, you can just change the source. I agree that there will be front-end changes when the app is paired with the server, but hopefully they should be minimal if the shape is consistent.
Also, remember that any API can and will fail. So take the error cases into account as well.
Requirements
Product Search Feature
When the user starts typing a product, you should show an autocomplete results box (or page if that's what your mock has) with the results. User should be able to
tabthrough the results. Other natural keyboard buttons should also work.Categories Page
The product display should have price, product name and rating at the very least. There should also be a "Add to cart" button (this doesn't have to work). The user should be able to filter the product set with a few things of your choosing. Also, the user should be able to sort the set based on some criteria (such as price, rating etc.)
Single Product Page
The page should show the price, description (if any), rating, images, quantity, add to cart, add to wishlist etc.
Feel free to add more things on these pages if they are present in your mocks.
Checklist of requirement
Resources
Need help?
Comment on this thread if there is any confusion with the requirements. Try to follow your mocks. Don't drastically change things until needed. Minor modifications are allowed.