Frontend Mentor - E-commerce product page solution

This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - E-commerce product page solution
  • Table of contents
  • Overview
    • The challenge
    • Links
  • My process
    • Built with
    • What I learned
    • React.js
    • CSS
    • Continued development
    • Useful resources
  • Author
  • Acknowledgments

Overview

• An e-comerce site for sneakers. Users can add products to the cart which calculates the total cost depending on quantity.

The challenge

Users should be able to:

• 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: solution URL here
• Live Site URL: live site URL here

My process

• This is my first react project. I decided i would learn react with a few udemy courses, however, instead of doing the uemy projects, i decided to get straight into the Frontend Mentor challenge: e-commerce peoject via The Learning People. This is very much a learn as i go project.

• I started of with mobile first layout, then tablet, and then a desktop layout. I used Google Chrome Dev Tools to understand what the layout would look like on each device.

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
  • Mobile-first workflow
• React - JS library

What I learned

While building this project, i have learnt the following:

React.js

• JSx
• Functional components
• Hooks such as useState & useEffect aswell as building custom hooks
• useContext and many more React related features.

CSS

• CSS Grid

I also learnt that it is always important to plan the structure of your project regardless if you have been presented with the designs.

Continued development

I will continue you to develop in all areas such as css, javascript and react. I will also strengthen my frontend skills by learning redux and typescript.

Useful resources

• Kyle Leary - This is an article which helped me with creating my customer hook.
• Brian Design - This is the youtube video which helped me create my carousel component
• TsbSankara - This youtube video helped build my product display component.

Author

• Me - Mikhail Stewart ☺️

Acknowledgments

• Alex Ford - My Learning People mentor.
• Stuart Gough - My mentor who helps me with my learning and development and adviced to learn react. He also helped with finding css and react bugs
• Lou Bichard - My mentor who has helped me with parts of my css and jsx.
• Rosin Kelly - My mentor who helps me with my development.