This project was built using create-react-app. To run this project locally:
npm run start
Also you can check the live preview of the page here: https://mchammam.github.io/ecommerce-product-page-main/
This project was inspired by "E-commerce product page challenge".
I got images of the design for both mobile and desktop verions of the page and had to build the web version from scratch using HTML CSS and Javascript. Check out the folder /starter_files to explore the design images and the styles giude I got.
I had also some requirements. 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
- Live Site URL: https://mchammam.github.io/ecommerce-product-page-main/
- React - JS library
- Dynamically fetched data (from a json file)
- Mobile-first workflow
- Sass
- BEM naming methodology
- Flexbox
In the near future my plan is to add the following features:
- Connection to an API backend.
- Possibility to filter articles and view articles based on categories
- Admin log in with ability to add, edit, and delete articles.
- Also there will be bug fixes and minor feature enhachements. Check out the issues section to see all planned features.