gozdehisarckllar/challenge-ecommerce-product-page

E-commerce product page coding challenge

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.

• Front-end code for the Ecommerce product app that lets users to preview a product through the gallery/lightbox and enables users to use cart functionalities such as adding and removing items

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

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

Screenshot

Links

• Solution URL: Git repository
• Live Site URL: Git Pages

My process

• I created and tried to use reusable custom components as much as possible, especially for the lightbox/gallery and navbar components.

• By creating a list of sample data objects, I tried to create a simulation of the case as if the data was fetched from an API. I adjusted some custom components, in order to make it became more compatible to display possible additional data. (For instance, I refined some code for shopping cart updates and gallery/lightbox. Still, React Routers and other product pages are required to be created and some necessary adjustments such as using the map() function for rendering product pages and showing data should be made as well).

• After adding media-queries in the final steps, I made the page components responsive to desktop, tablet and mobile viewports.

Built with

• Semantic HTML5 and JSX markup
• CSS3
• Flexbox
• CSS Grid
• BEM methodology
• ES6 features
• React - JS library

What I learned

Throughout the project, I faced some new challenges and learning oppotunities while coming up with possible solutions to some cases such as gallery/slider functionalities & animations, updating context of an inner object of a state variable. I really enjoyed the process of both learning and contemplating, finding out solutions and then testing my solutions by considering different possible cases that an app user can encounter.

Continued development

I am plannig to continue focusing on coding different types of gallery or slider designs. Also, I would like to create a project with additional product pages on the frontend and product data fetched from the backend.

Author

• Github - Gözde Hisarcıklılar
• Twitter - @gzdehsr