https://github.com/kabir-afk/e-commerce-app

E-commerce frontend app
https://github.com/kabir-afk/e-commerce-app

props-and-state-components reactjs scss

Last synced: about 2 months ago
JSON representation

E-commerce frontend app

• Host: GitHub
• URL: https://github.com/kabir-afk/e-commerce-app
• Owner: kabir-afk
• Created: 2023-10-21T14:04:49.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-13T07:10:36.000Z (about 1 year ago)
• Last Synced: 2023-11-13T08:27:18.472Z (about 1 year ago)
• Topics: props-and-state-components, reactjs, scss
• Language: JavaScript
• Homepage: https://kabir-afk.github.io/E-Commerce-App/
• Size: 2.19 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - E-commerce product page solution

This is a solution to the [E-commerce product page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Inadequacies](#inadequacies)

  - [Author](#author)

- [Acknowledgments](#acknowledgments)

## 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

### Links

- Live Site URL: [live site](https://kabir-afk.github.io/E-Commerce-App/)

## My process

### Built with

- Semantic HTML5 markup

- SCSS

- Flexbox

- Desktop-first workflow

- [React](https://reactjs.org/) - JS library

### What I learned

- The many ways you can use ```useState()``` hook to achieve various tasks . . for example I used it to alter the appearance of some elements by changing the classes added to them , or for toggling elements , or change images etc . . . 

### Inadequacies

- Del button doesn't work , I'm working on how to trigger and manage reset states. 

- Site isn't completely responsive and fails to provide a good UX at many places (was too tired at this point).

- Cart checkout fucntinality doesn't update simultaneously , cart icon has to be toggled again.

- Couldn't trigger hover states, dk why.

- Lightbox gallery isn't perfect , but okay-ish at best . . .

## Author

- Frontend Mentor - [@solitary_coder](https://www.frontendmentor.io/profile/solitary_coder)

## Acknowledgments

CodeWithHarry react.js tutorials