@Manojgupta103
Latest comments
- @NovikovIlya
cool work!
- @CarvalhoVincent@NovikovIlya
cool work!
- @GergesGhaly@NovikovIlya
cool work!
- @iamporrrrrrrrr@NovikovIlya
cool work!
- @Bruck-3What 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 ChallengeThe 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
- Vue 3
- Tailwind CSS
- Vuex store
- Vite
How to Run
To run the project:
- Clone the repository.
- Install dependencies with
npm install. - Start the development server with
npm run dev. - Open your browser and navigate to
http://localhost:5173/.
Continued Development
In the future, I aim to explore more advanced features and optimize performance.
LinksAuthor
- 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 GenerationOne 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.
SolutionTo overcome this challenge, a method
getImageUrl(index)was implemented. This method constructs the URL for each image based on the index provided. Theimport.meta.urlproperty 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; }@NovikovIlyacool work!
- @momorocks111What are you most proud of, and what would you do differently next time?
The part I was most proud of was the overlay. When the user clicks on the menu, it activates the overlay, where if the user clicks on it, it will close the menu. This added extra interactivity to the mobile and tablet views.
What challenges did you encounter, and how did you overcome them?The hardest part was the making this responsive. There was a huge change from the mobile screen and the desktop screen. Getting the right margins and spacing was absolutely brutal! Seems like making webpages responsive is my kryptonite :,(
What specific areas of your project would you like help with?When it comes to creating the html, it's easy if it's only for one screen, but having to take into consideration responsive, what's the best way to write the html taking into account most of the screens, the desktops, the tablets, and the mobile devices.
@NovikovIlyacool work!
