Develop

[Blenemy]

https://blenemy.github.io/react_phone-catalog/
For some reason, I could not implement the input search with the debounce method. I have left commented code in the Header.tsx component. It works partially, but after performing a search, I am redirected to the previous page. I would appreciate your help.

[Anastasiia-Svintsova]

• Add fav icon, please
  

• Don't hardcode the page width. The header and the footer should be full-width.
  

• Fix the logo link in the footer

2023-06-08.130254.mp4

• Make sure the images have the correct size. It doesn't look like in Figma now
  

• Let's imagine the shop will have 8000 positions. How long the pagination will be? Change it a bit. Smth like 1 ... 6 7 8 ... 18
  

• Change the search bar placeholder if the user changes the tab
  

• The user should have the possibility to change the color. It doesn't work now
  

• The id on the product details page doesn't match the design
  

[Blenemy]

I did not delete the id on the product details page,

I have no idea where does this ID number come from so i used its name instead.

[witflash]

Hi!
About debounce approach.
For React handlers it's better to implement debounce with useEffect hook.
You could check this approach here: https://usehooks.com/usedebounce (or if you find other samples).
If you still have any questions, feel free to ask them is Slack.

[Anastasiia-Svintsova]

• The search bar should have the same color as a header. It's different now. And add a search icon as well
  
  

• The clear button doesn't match the design
  
  

• The images in the cart look very compressed
  

• Check the position of the images on the product details page. The user should see the whole picture in the preview
  

• These links don't work correctly. They should redirect to the correct model.
  

• Don't forget about the favicon
  

• These links shouldn't lead to the 404 page. You can use your GitHub link for now.
  

[agniya-i]

Good job!

Let's fix one of the previous comments related to the product image slider:
the user should see the whole picture in the preview, it looks cropped now

Also, please pay attention to image size, it shouldn't overlay other blocks

Screen.Recording.2023-06-16.at.15.02.50.mov

[witflash]

Good job! Well done! 👍🏻