Next.js, Chakra UI, Redux Toolkit, React-Hook-Form, Atomic Design

First of all I wanted to appreciate how well the starter files for this project have been prepared. Responsive images, icons and especially big products.json file containing products data with paths to all images. It must have taken a lot of work, so for that big thanks to FM team (not sure who prepared that, would that be Matt or Em)

And this was such a great challenge. It's like everything I learned during these 5 months since I joined FM combined into this one big project: modals, custom radios, routing, form validation (checkout form was huge!) and especially creating reusable components. I also tried some completely new things for me like animations, inspired by Tediko and his awesome landing pages I added some on scroll animations on the home page.

As far as accesibility, new thing for me was 'Skip to content' link and aria-disabled attribute on button instead of 'disabled' for more inclusive disabled form button when cart is empty. For the full list of techniques and tools I used you can check out README.

One thing I couldn't figure out. In Firefox hero section is included in tabbing order for some reason. I don't see this issue in Chrome. Is that some kind of Firefox bug I'm not aware of, or something wrong with my code?

If you see anything wrong or that needs to be improved, please drop a comment