E-commerce product page

🔖 This is a solution to the E-commerce product page challenge on Frontend Mentor.

🌈 ✨ 🎉 Have Fun Building! 🚀 🎊 🎈

🖥️ Welcome
Thanks for checking out this front-end coding challenge. Frontend Mentor challenges help you improve your coding skills by building realistic projects. To do this challenge, you need a good understanding of HTML, CSS and JavaScript. Press Enter 🚀 to start the game!!

🥷 Table of Contents

• Brief
• The challenge
• Links
• My process
• Built with
• What I learned
• Difficult Things
• Author
• Acknowledgments

Brief

In this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!

Your challenge is to build out this e-commerce product page and get it looking as close to the design as possible. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go 👍.

Preview 👓

The challenge

Users should be able to:

Challenge	Newbie	Junior	Intermediate	Advanced
View the optimal layout for the site depending on their device's screen size		⭕
See hover states for all interactive elements on the 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			⭕

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Netlify

My process

⌛ I challenge my self to finish this for ~5 days
▐
🧑‍💻 Day 1. Studying the design ~4 hours
▐ _{Sass boilerplate}
▐ _{Import Frontend Mentor style guide}
▐ _{HTML content and tags placement}
▐
🧑‍💻 Day 2. Web layouting, mostly working with Sass
▐ _{Navbar ~2.5 hours}
▐ _{Main content (product images and information) ~2.5 hours}
▐ _{Responsive design ~4 hours}
▐ _{Sidebar & Cart pop-out ~3 hours}
▐ _{Lightbox design ~2.5 hours}
▐
😭 Day 3. Working with React
▐ _{Continuing Lightbox design ~2 hours}
▐ _{Lightbox & showcase images state ~1.5 hours}
▐ _{Cart state ~7.5 hours}
▐ _{Styling Cart's badge & Cart's backdrop ~3 hours}
▐ _{Make hooks for Lightbox and image showcase ~1.5 hours}
▐
⛱️ Day 4. Not doing any coding
▐
🌐 Day 5. Add little animation and submit solution to Frontend Mentor 🚩
▐ _{Sidebar ~0.5 hours}
▐ _{Lightbox & image showcase ~3 hours}
▐ _{Cart ~1.5 day}
▐ _{Try to deploy & submit the solution}
▐
🗓️ Day 6 and forward. Continuing unfinished task
▐ _{Work with ngrok later}
▐ _{Update README.md}
▐ _{See other people solution and copy the css code}
▐ _{Fix animation issue}
▐
🗓️

Built with

• HTML
• CSS
• React
• ❤️

What I learned 🥳

☑️ Prevent for showing leading zero after typing some number inside input

The value={input.toString() prevent us for showing leading zero after typing some number

src/pages/Home.js

<input type="number" value={input.toString()} onChange={change} />

☑️ Hide input slider

Hide HTML <input/> slider

src/stylesheets/pages/_home.scss

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

☑️ Respect deadlines

Should have left some extra time for testing the production sites and write some documentation

Difficult Things 😓

Things were difficult for me and I finally gave up 😓😓

• HTML5 Semantic
• Not know how to positioning the icon
• Not know how to work with <svg/>
• Can't use some css library for image slider
• Buggy z-index for button
• Not writing a clean CSS code
• Fail to implement reset input after clicking 'Add to cart'

Author

Berlianto

Acknowledgments

• Material-UI - For cart badge and icon

To Top ⤴️