Data

1. You have phones.json and phones/:phoneId.json files in the api folder.
2. Images are inside img/phones folder grouped by phone models and colors.
3. Better to move images to the API side, but they can exist on a FE side too.
4. Each product has:
   • id is required to fetch product details;
   • name with a product name;
   • image with a link to the first image relative to a public folder;
   • price and fullPrice to show the discount;
   • year is used to sort by Newest;
   • capacity and color that can be chosen on product details page.

App

1. Put components into an src/components folder.
   • each component should be a folder with index.ts, ComponentName.tsx, ComponentName.module.scss files.
   • use CSS modules.
   • keep .module.scss files together with their components.
2. Advanced project structure:
   • ~~src/modules folder. Inside per page modules HomePage, CartPage, ect. and shared folder. with shared content between modules.~~
   • inside each module is own components folder with the structure described above. And optionally other files/folders: hoocs, constants and so on.
3. Add the sticky header with a logo, navigation, favorites and cart.
4. The footer with the link to the Github repo and Back to top button.
   • the content should limited to the same width as the page content;
   • Back to top button should scroll to the top smoothly;
5. Add NotFoundPage containing text Page not found for all the unknown URLs.
6. All changes the hover effects should be smooth.
7. Scale all image links by 10% on hover.
8. Implement all form element and icons according to the UI Kit

Product pages

There should be 3 separate pages /phones, /tablets and /accessories.