E-commerce Product Page [React - Next.js - Tailwind CSS]

What are you most proud of, and what would you do differently next time?

In general, I am very happy how the solution turned out. My main focus with this project was to practice the use of browser local storage & to learn more about custom hooks.

• React Context for state sharing;
• Custom Hooks for WindowWidth & LocalStorage
• Build from scratch Carousel/Sliders with different logic for mobile and desktop in order to achieve more native experience. TBH there are many great pre-build components for those, but building one from scratch gives a lot of practical knowledge

Next time I would like to be faster and actually plan the steps a bit more before starting to code.

Built with

• React / Next.js 14
• Mobile first approach
• Tailwind CSS
• Responsive design with Mobile, & Desktop view

What challenges did you encounter, and how did you overcome them?

There were some hiccups when building the img carousel or the hamburger menu due to lack of practice, but may be the most interesting challenge was the hydration error due to server side rendering for my cart badge.

Basically the server sees the cart as empty therefore the value in the badge is 0 and not rendered, while there is a different value stored in the browser localStorage. This leads to hydration error.

My way out of this was to not render this badge on the server, using useState and useEffect combination

const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);
// On client side first render - set's the value to true

{* Other Code *}

{isClient && ( badge jsx code.. )}

// renders the badge only if isClient is true, meaning on the client side

What specific areas of your project would you like help with?

Any and all feedbacks are welcome!

I would much appreciate any feedback related for better solving hydration errors/warnings