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

E-commerce Product Page

This project is a solution to the E-commerce product page challenge on Frontend Mentor. It is built using Vue 3, Tailwind CSS, Vuex store, and Vite.

Overview

The Challenge

The challenge required implementing an E-commerce product page with specific features:

• View optimal layout based on device screen size
• Hover states for interactive elements
• Lightbox gallery for large product images
• Switching large product images by clicking on small thumbnails
• Adding items to the cart
• Viewing and removing items from the cart

Built With

• Vue 3
• Tailwind CSS
• Vuex store
• Vite

How to Run

To run the project:

1. Clone the repository.
2. Install dependencies with npm install.
3. Start the development server with npm run dev.
4. Open your browser and navigate to http://localhost:5173/.

Continued Development

In the future, I aim to explore more advanced features and optimize performance.

Links

• Solution URL: Link
• Live Site URL: Link

Author

• Website - Bruck Demssie
• Frontend Mentor -@Bruck-3

Acknowledgments

I'd like to thank Frontend Mentor for providing this challenge, which helped me enhance my skills. Additionally, I'm grateful for the support and resources provided by the Vue.js and Tailwind CSS communities.

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

Challenges Faced

Dynamic Image URL Generation

One of the challenges encountered was building an image carousel that accepts dynamic URLs. The requirement was to dynamically generate image URLs based on the index to ensure proper sourcing of images, especially when the project is hosted.

Solution

To overcome this challenge, a method getImageUrl(index) was implemented. This method constructs the URL for each image based on the index provided. The import.meta.url property was utilized to ensure correct resolution of relative paths, especially in a dynamic environment.

getImageUrl(index) {
  return new URL(`../assets/shoes/image-product-${index}.jpg`, import.meta.url).href;
}