All The reaquired files for the amazon-clone project

Amazon-clone/App.css

@@ -0,0 +1,42 @@
+*{
+  margin: 0;
+  padding: 0;
+ }
+ .App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

Amazon-clone/App.js

@@ -0,0 +1,60 @@
+
+import React, { useEffect } from "react";
+import "./App.css";
+import Header from "./Header";
+import Home from "./Home";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import Checkout from "./Checkout";
+import Login from "./Login";
+import { auth } from "./firebase";
+import { useStateValue } from "./StateProvider";
+
+function App() {
+  const [{}, dispatch] = useStateValue();
+useEffect(() => {
+
+  auth.onAuthStateChanged((authUser) => {
+    console.log("THE USER IS >>> ", authUser);
+
+    if (authUser) {
+      // the user logged in 
+      dispatch({
+        type: "SET_USER",
+        user: authUser,
+      });
+    } else {
+      // the user is logged out
+      dispatch({
+        type: "SET_USER",
+        user: null,
+      });
+    }
+  });
+}, []);
+
+
+return (
+  <div className="app">
+    <Router>
+    <div className="app">
+        <Switch>
+
+          <Route path="/login">
+            <Login />
+          </Route>
+          <Route path="/checkout">
+            <Header />
+            <Checkout />
+          </Route>
+
+          <Route path="/">
+            <Header />
+            <Home />
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  </div>
+);
+}
+export default App;

Amazon-clone/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

Amazon-clone/Checkout.css

@@ -0,0 +1,17 @@
+.checkout {
+    display: flex;
+    padding: 20px;
+    background-color: white;
+    height: max-content;
+  }
+
+  .checkout__ad {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .checkout__title {
+    margin-right: 10px;
+    padding: 10px;
+    border-bottom: 1px solid lightgray;
+  }

Amazon-clone/Checkout.js

@@ -0,0 +1,43 @@
+import React from "react";
+import "./Checkout.css";
+import Subtotal from "./Subtotal";
+import { useStateValue } from "./StateProvider";
+import CheckoutProduct from "./CheckoutProduct";
+
+function Checkout() {
+  const [{ basket, user }, dispatch] = useStateValue();
+
+  return (
+    <div className="checkout">
+      <div className="checkout__left">
+        <img
+          className="checkout__ad"
+          src="https://images-na.ssl-images-amazon.com/images/G/02/UK_CCMP/TM/OCC_Amazon1._CB423492668_.jpg"
+          alt=""
+        />
+
+        <div>
+          <h3>Hello, {user?.email}</h3>
+          <h2 className="checkout__title">Your shopping Basket</h2>
+
+          {basket.map(item => (
+            <CheckoutProduct
+              id={item.id}
+              title={item.title}
+              image={item.image}
+              price={item.price}
+              rating={item.rating}
+            />
+          ))}
+
+        </div>
+      </div>
+
+      <div className="checkout__right">
+        <Subtotal />
+      </div>
+    </div>
+  );
+}
+
+export default Checkout;

Amazon-clone/CheckoutProduct.css

@@ -0,0 +1,33 @@
+
+.checkoutProduct {
+    display: flex;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.checkoutProduct__info {
+    padding-left: 20px
+}
+
+.checkoutProduct__info > button {
+    background: #f0c14b;
+    border: 1px solid;
+    margin-top: 10px;
+    border-color: #a88734 #9c7e31 #846a29;
+    color: #111;
+}
+
+.checkoutProduct__image {
+    object-fit: contain;
+    width: 180px;
+    height: 180px;
+  }
+
+.checkoutProduct__rating {
+    display: flex;
+  }
+
+.checkoutProduct__title {
+    font-size: 17px;
+    font-weight: 800;
+}

Amazon-clone/CheckoutProduct.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import './CheckoutProduct.css'
+import { useStateValue } from "./StateProvider";
+
+function CheckoutProduct({ id, image, title, price, rating, hideButton }) {
+    const [{ basket }, dispatch] = useStateValue();
+
+    const removeFromBasket = () => {
+        // remove the item from the basket
+        dispatch({
+            type: 'REMOVE_FROM_BASKET',
+            id: id,
+        })
+    }
+
+    return (
+        <div className='checkoutProduct'>
+            <img className='checkoutProduct__image' src={image} />
+
+            <div className='checkoutProduct__info'>
+                <p className='checkoutProduct__title'>{title}</p>
+                <p className="checkoutProduct__price">
+                    <small>$</small>
+                    <strong>{price}</strong>
+                </p>
+                <div className="checkoutProduct__rating">
+                    {Array(rating)
+                    .fill()
+                    .map((_, i) => (
+                        <p>🌟</p>
+                    ))}
+                </div>
+                {!hideButton && (
+                    <button onClick={removeFromBasket}>Remove from Basket</button>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default CheckoutProduct

Amazon-clone/Header.css

@@ -0,0 +1,69 @@
+.header {
+    height: 60px;
+    display: flex;
+    align-items: center;
+    background-color: #131921;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  .header__logo {
+    width: 100px;
+    object-fit: contain;
+    margin: 0 20px;
+    margin-top: 18px;
+  }
+
+  .header__search {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    border-radius: 24px;
+  }
+
+  .header__searchInput {
+    height: 12px;
+    padding: 10px;
+    border: none;
+    width: 100%;
+  }
+
+  .header__searchIcon {
+    padding: 5px;
+    height: 22px !important;
+    background-color: #cd9042;
+  }
+
+  .header__optionLineOne {
+    font-size: 10px;
+  }
+
+  .header__optionLineTwo {
+    font-size: 13px;
+    font-weight: 800;
+  }
+
+  .header__optionBasket {
+    display: flex;
+    align-items: center;
+    color: white;
+  }
+
+  .header__basketCount {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .header__nav {
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .header__option {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    margin-right: 10px;
+    color: white;
+  }

Amazon-clone/Header.js

@@ -0,0 +1,67 @@
+import React from "react";
+import "./Header.css";
+import SearchIcon from "@material-ui/icons/Search";
+import ShoppingBasketIcon from "@material-ui/icons/ShoppingBasket";
+import { Link } from "react-router-dom";
+import { useStateValue } from "./StateProvider";
+import { auth } from "./firebase";
+import Product from "./Product";
+
+function Header() {
+  const [{ basket, user }, dispatch] = useStateValue();
+
+  const handleAuthenticaton = () => {
+    if (user) {
+      auth.signOut();
+    }
+  }
+
+  return (
+    <div className="header">
+      <Link to="/">
+        <img
+          className="header__logo"
+          src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
+        />
+      </Link>
+
+      <div className="header__search">
+        <input className="header__searchInput" type="text" />
+        <SearchIcon className="header__searchIcon" />
+      </div>
+
+      <div className="header__nav">
+        <Link to={!user && '/login'}>
+          <div onClick={handleAuthenticaton} className="header__option">
+            <span className="header__optionLineOne">Hello {!user ? 'Guest' : user.email}</span>
+            <span className="header__optionLineTwo">{user ? 'Sign Out' : 'Sign In'}</span>
+          </div>
+        </Link>
+
+        <Link to='/orders'>
+          <div className="header__option">
+            <span className="header__optionLineOne">Returns</span>
+            <span className="header__optionLineTwo">& Orders</span>
+          </div>
+        </Link>
+
+
+        <div className="header__option">
+          <span className="header__optionLineOne">Your</span>
+          <span className="header__optionLineTwo">Prime</span>
+        </div>
+
+        <Link to="/checkout">
+          <div className="header__optionBasket">
+            <ShoppingBasketIcon />
+            <span className="header__optionLineTwo header__basketCount">
+              {basket?.length}
+            </span>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default Header;