Responsive ecommerce product page - React.js, Tailwind and TypeScript

Hello, Frontend Mentor community! 😊

In this challenge, I embarked on the journey of using Tailwind and TypeScript, tools that I've recently started diving into 🚀. My experience with Tailwind was truly gratifying 😊, and I'm excited to continue incorporating it into my projects. As for TypeScript, I have some uncertainties about whether I'm adhering to the best practices, but I've put forth my utmost effort to grasp its concepts 💪. I'm committed to delving deeper into it to extract its full potential.

While I had previously employed Custom Hooks and Context in React for my solution to the Todo app, this time I opted to put them into action once again 🛠️. For instance, I leveraged Context to efficiently manage the cart 🛒. I approached this with a forward-thinking mindset 🧠, envisioning a more 'real-world' application where cart access might be required across various parts of my app.

Concerning the Custom Hooks, I crafted one to handle cart functionalities 🛍️ and another to facilitate the closure of the cart, navigation menu, and product modal by clicking outside 🚀. My intention was to eliminate redundancy across my codebase, ensuring consistent implementation of these features wherever needed 👌.

Perhaps the most challenging part for me was the implementation of the lightbox or modal, for which I chose to utilize Headless UI. Generally, I'm not a huge fan of employing this kind of libraries, but there are instances where it becomes incredibly convenient . I highly recommend this article on the topic for more insights 📖.