Responsive Product Page | Tailwind CSS + Vanilla JS + Vite

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

I’m proud of successfully completing this challenge despite the obstacles I encountered along the way. It was a rewarding experience that helped me grow more confident in using Tailwind CSS, Vanilla JavaScript, and Vite to build responsive and interactive layouts.

If I were to approach this project again, I would focus more on refactoring my code — particularly the logic for switching between the main image, thumbnail images, and lightbox images in the product gallery. I would also make a conscious effort to apply the DRY (Don't Repeat Yourself) principle to reduce redundancy and improve the overall structure and maintainability of the code.

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

One of the biggest challenges I faced was implementing the image-switching functionality — both for the main product image and the thumbnail images, including those inside the lightbox. Initially, I tried studying someone else’s code, but it didn’t quite solve the problem or fit my structure.

Eventually, I decided to break the problem down and tackle it step by step, writing the logic myself and testing it incrementally. Along the way, I also used ChatGPT to deepen my understanding of certain JavaScript concepts and clarify why specific parts of the code were or weren’t working. With persistence and a better grasp of the logic, I was able to solve it on my own and successfully implement the feature.

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

I’d appreciate feedback on how I can improve the structure and readability of my JavaScript — especially the logic around image switching for the main product view, thumbnails, and lightbox functionality. I'm also interested in best practices for applying the DRY principle more effectively, and any suggestions for making my code more modular and maintainable in a real-world context.

Additionally, I’d like help with improving the JavaScript functionality for showing and hiding the cart items container, to ensure it works smoothly across different user interactions and screen sizes.