Aliazbair/Shoping-Card

React Shoping Card

step One : create react app and make main contant and style its

1. header
2. main
3. footer

list of task

create filter Component

create Card Component

create Add Animation Component

create Add Model Component

create Add checkout form Component

Make Product BackEnd

Add Redux

Add Redux to Products

Add Redux to Filter

Add Redux to Card

Create Order

Add Admin Section

Publish on Heroku

Name	Email
John Doe	john@gmail.com
Jane Doe	jane@gmail.com

create product Component

• create products data.json
• import its to App.js
• make html strc
• create component folder

create Card Component

1. create filter file
2. make section to [Count product | filter section | order section]
3. style filter file with css

filter method

//  filterproducts method
filterProducts = (e) => {
  console.log(e.target.value)
  // check the value
  if (e.target.value === '') {
    this.setState({ size: e.target.value, product: data.products })
  } else {
    this.setState({
      size: e.target.value,
      products: data.products.filter(
        (product) => product.availableSizes.indexOf(e.target.value) >= 0
      ),
    })
  }
}

sort method

//  sortproducts method
sortProducts = (e) => {
  const sort = e.target.value
  this.setState((state) => ({
    sort: sort,
    products: this.state.products
      .slice()
      .sort((a, b) =>
        sort === 'lowset'
          ? a.price > b.price
            ? 1
            : -1
          : sort === 'hightes'
          ? a.price < b.price
            ? 1
            : -1
          : a.id < b.id
          ? 1
          : -1
      ),
  }))
}

create Card Component

1. Create branch cart-component
2. products.js
3. handle "Add To Cart" to this.props.addToCart(product)
4. app.js
5. add cartItems to state as []
6. Create addToCart(product)
7. Slice, Check product existance, add to catitems
8. Cart.js
9. define cartitems, order form this.props
10. check cartitem.lenght and show message
11. list cartitem{cartitems.lenght > 0 && (})}
12. index.css
13. style cart , cart-header, cart-item ( img,li)
14. use localsotroge on app constructor to load cart items (Josn.parse)
15. use localstorage on addToCart to save cart items

create Add checkout form Component

Check form

1.create branch chechout-form

1. Cart.js 1.make cart items presisten
2. use localstorage on app constructor to load cart items
3. use localstroge on addTocart to save cart items 1.handle click on process
4. update showCheckout state to ture on click
5. conditional rendering checkout form
6. get email, name and address required input
7. define handleInput function
8. add checkout button
9. handle onSubmit form event by this.createOrder
10. create order object and pass to parent to handle it
11. publish changes

Add modal and animation

1.create branch animation-modal

1. show Animation
2. create fade effect from bottom for products
3. create fade left for add to cart
4. create fade right for show checkout form
5. open modal by click on produc image
6. install react-modal 1.product.js 1.import modal
7. set state for product to null
8. define openModal and closemodal 1.show modal if product exist
9. create modal
10. create zoom effect for modal 1.index.js

Add Redux

1. create branch add-redux
2. npm insatll redux react-redux
3. import redux 1.set initial state 1.create types
4. types.js
5. define FEATC_PRODUCTS
6. actions/productAction.js
7. declare feactProducts
8. create reducers
9. reducers/ProductsReducers.hs
10. define case FETCH_PRODUCTS 1.Create Store
11. import productReducer
12. combine reducers
13. use store
14. app.js
15. import store 1.wrap all in provider
16. connect products
17. import fetchProducts
18. set state products to null
19. fetch products on did mount
20. package.json
21. set proxy to http://localhost:4000
22. npm run serever 1.check products list