4 |
5 | ### Features
6 |
7 | Here's the feature's included in this project
8 |
9 | - 🌐 FULL Ecommerce functionality which includes both back-end and front-end
10 | - 👨👩👧👦 Login Page
11 | - 📦 Products Page
12 | - 🛒 Cart and Checkout Page
13 | - 💳 REAL Payments (Stripe Credit Card Payments)
14 | - 📝 Order History Page (Real time database)
15 | - ❄ Awesome animations like React Hover effects
16 |
17 | ### Referances
18 |
19 | - [Amazon Clone Application Using React JS - Video Tutorial](https://www.youtube.com/watch?v=RDV3Z1KCBvo&t=6005s)
20 | - [The Amazon Clone Written Guide](https://medium.com/cleverprogrammer/amazon-clone-using-react-the-ultimate-guide-fba2b36f3458)
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/components/CheckoutProduct.css:
--------------------------------------------------------------------------------
1 | .checkoutProduct{
2 | display: flex;
3 | margin-top: 20px;
4 | margin-bottom: 20px;
5 | max-width: 800px;
6 | margin: auto;
7 | align-items: center;
8 | }
9 |
10 | .checkoutProduct_info{
11 | padding-left: 20px;
12 | }
13 |
14 | .checkoutProduct_info > button {
15 | background: #f0c14b;
16 | border: 1px solid;
17 | margin-top: 10px;
18 | border-color: #a88734 #9c7e31 #846a29;
19 | color: #111;
20 | margin-top: 5px;
21 | }
22 |
23 |
24 | .checkoutProduct_image{
25 | object-fit: contain;
26 | width: 180px;
27 | height: 180px;
28 | }
29 |
30 | .checkoutProduct_title{
31 | font-size: 15px;
32 | font-weight: 700;
33 | letter-spacing: 0.04rem;
34 | margin-bottom: 0px;
35 | }
36 |
37 | .checkoutProduct_rating{
38 | margin-top: 5px;
39 | }
40 |
41 | .checkoutProduct_price{
42 | margin-top: 0px;
43 | margin-bottom: 0px;
44 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "amazon-clone",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@material-ui/core": "^4.11.0",
7 | "@material-ui/icons": "^4.9.1",
8 | "@testing-library/jest-dom": "^5.11.5",
9 | "@testing-library/react": "^11.1.1",
10 | "@testing-library/user-event": "^12.2.0",
11 | "react": "^17.0.1",
12 | "react-currency-format": "^1.0.0",
13 | "react-dom": "^17.0.1",
14 | "react-router-dom": "^5.2.0",
15 | "react-scripts": "4.0.0",
16 | "web-vitals": "^0.2.4"
17 | },
18 | "scripts": {
19 | "start": "react-scripts start",
20 | "build": "react-scripts build",
21 | "test": "react-scripts test",
22 | "eject": "react-scripts eject"
23 | },
24 | "eslintConfig": {
25 | "extends": [
26 | "react-app",
27 | "react-app/jest"
28 | ]
29 | },
30 | "browserslist": {
31 | "production": [
32 | ">0.2%",
33 | "not dead",
34 | "not op_mini all"
35 | ],
36 | "development": [
37 | "last 1 chrome version",
38 | "last 1 firefox version",
39 | "last 1 safari version"
40 | ]
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/reducer.js:
--------------------------------------------------------------------------------
1 | export const initialState = {
2 | basket: [],
3 | };
4 |
5 | export const getBasketTotal = (basket) =>
6 | basket?.reduce((amount, item) => item.price + amount, 0);
7 |
8 | const reducer = (state, action) => {
9 |
10 | console.log(action);
11 |
12 | switch(action.type){
13 | case 'ADD_TO_BASKET':
14 | return {
15 | ...state,
16 | basket: [...state.basket, action.item],
17 | };
18 |
19 | case 'REMOVE_FROM_BASKET':
20 | const index = state.basket.findIndex(
21 | (basketItem) => basketItem.id === action.id
22 | )
23 | let newBasket = [...state.basket]
24 |
25 | if(index >= 0){
26 | newBasket.splice(index, 1);
27 | } else{
28 | console.warn(
29 | `Can't remove the product (id: ${action.id}) as its not present in the basket!`
30 | )
31 | }
32 |
33 | return {...state, basket : newBasket}
34 |
35 | default:
36 | return state;
37 | }
38 | };
39 |
40 | export default reducer;
--------------------------------------------------------------------------------
/src/components/Subtotal.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './Subtotal.css';
3 | import CurrencyFormat from "react-currency-format";
4 | import { ShoppingBasket } from '@material-ui/icons';
5 | import { useStateValue } from "../StateProvider";
6 | import {getBasketTotal} from "../reducer";
7 |
8 | function Subtotal() {
9 |
10 | const [{ basket}, dispatch] = useStateValue();
11 |
12 | return (
13 | 18 | Subtotal ({basket.length} items) : 19 | {value} 20 |
21 | 22 | This order contains a gift 23 | 24 | 25 | )} 26 | decimalScale={2} 27 | value={getBasketTotal(basket)} 28 | displayType={"text"} 29 | thousandSeparator={true} 30 | prefix={"$"} 31 | /> 32 | 33 | 34 |{title}
23 |24 | $ 25 | {price} 26 |
27 |
17 |
18 | {title}
30 |{subtitle}
31 |{author}
32 |42 |
15 |
16 |
17 |
18 |
44 | 
10 |
11 |