This app empowers users to effortlessly explore the lightbox gallery and add items to the cart. It leverages a seamless lightbox gallery, advanced Tailwind CSS, and optimized component communication. Additionally, it applies dynamic theming using a utility-first approach.
Live Site: E-commerce Product Page
- Open a lightbox gallery by clicking on the large product image
- Switch the large product image by clicking on the small thumbnail images
- Add items to the cart
- View the cart and remove items from it
- Dynamic Theme
- View the optimal layout for the site depending on their device's screen size
- Vue.js
- Tailwind CSS
-
Efficient Lightbox Gallery Implementation: Mastered the creation of a lightbox gallery with seamless dynamic switching for thumbnails.
-
Advanced CSS Techniques for Image Centering: Utilized top-2/4 transform and translate-y-1/2 to effectively center items inside images.
-
Component Communication Optimization with defineProps and Emits: Successfully implemented defineProps() and defineEmits() in Vue.js to enhance component communication. First defined custom events using defineEmits(['addCart']). It emits the 'addCart' event with the necessary data inside an event function. Next listened to the custom event on the parent component and handled the emitted data. Finally defined a new const to store the received data and updated the component accordingly.
-
Leveraging Vue Slots for Modular Design: Utilized Vue's slots component to seamlessly integrate parent content into child components.
-
Dynamic Theming with :root Theme Colors: Utilized :root theme colors for the project, enabling the easy creation of dynamic themes.
This project is a solution to the challenges provided by Frontend Mentor, with some additional features implemented by me.