amazon clone added

closes #227

Amazon_Clone/.gitignore

@@ -0,0 +1,21 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Amazon_Clone/README.md

@@ -0,0 +1,5 @@
+<center>
+
+<img src="./amazon.png" alt="amazon Poster"/>
+
+</center>

Amazon_Clone/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "amazon-clone",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.11.4",
+    "@material-ui/icons": "^4.11.2",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "firebase": "^8.6.8",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.6.1",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

Amazon_Clone/public/css/Card.css

@@ -0,0 +1,81 @@
+.Card {
+  position: relative;
+  margin: 9px;
+  width: 17rem;
+  height: 20rem;
+  transition: 0.2s;
+  z-index: 100;
+  background-color: white;
+  padding: 10px;
+  flex-direction: column;
+}
+.Card:hover {
+  transform: scale(1.08);
+}
+.Card img {
+  height: 11rem;
+  width: 12rem;
+}
+.rating {
+  color: rgb(255, 195, 42);
+}
+.title {
+  font-size: 15px;
+}
+.price {
+  text-align: left !important;
+  width: 100%;
+  font-weight: bolder;
+  font-size: 13px;
+}
+.link {
+  text-align: left !important;
+  width: 100%;
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  font-size: 10px;
+}
+.add-cart-btn {
+  font-size: 10px !important;
+  font-weight: bolder !important;
+  position: absolute !important;
+  bottom: 2px;
+  right: 2px;
+  background-color: rgb(255, 183, 0) !important;
+}
+.row {
+  width: 95vw;
+  flex-direction: row !important;
+  flex-wrap: nowrap !important;
+  overflow-x: auto;
+  overflow-y: hidden;
+  justify-content: flex-start;
+  align-items: flex-start;
+  height: 17rem;
+  margin: auto;
+  background-color: white;
+}
+.row-item {
+  flex-wrap: nowrap;
+  margin: 10px 55px;
+  transition: 0.2s;
+}
+.row img {
+  /* width: 10rem; */
+  height: 14rem;
+}
+.row-item:hover {
+  transform: scale(1.08);
+}
+.row::-webkit-scrollbar {
+  display: none;
+}
+.BigCard {
+  margin: 10px;
+  width: 90vw;
+}
+
+.BigCard img {
+  width: 100%;
+}

Amazon_Clone/public/css/Cart.css

@@ -0,0 +1,28 @@
+.Cart {
+  padding-top: 80px;
+}
+.cart-card {
+  position: relative;
+  padding: 10px;
+  justify-content: space-evenly;
+  background-color: white;
+}
+.Cart .title {
+  font-size: 30px;
+}
+.Cart img {
+  width: 15rem;
+}
+.Cart .detail {
+  width: 50vw;
+  flex-direction: column !important;
+  flex-direction: column;
+  justify-content: left;
+  align-items: flex-start;
+}
+.cart-card .link {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  float: right;
+}

Amazon_Clone/public/css/Log.css

@@ -0,0 +1,33 @@
+.Log {
+  flex-direction: column !important;
+  background-color: white;
+  padding: 20px;
+  text-align: center;
+  min-height: 100vh;
+}
+.Log input {
+  width: 100%;
+}
+.Log img {
+  position: relative;
+  bottom: 30px;
+  width: 200px;
+  height: 150px;
+  padding: 0;
+}
+.Log form {
+  min-width: 30vw;
+  background-color: white;
+  padding: 40px;
+  border: 1px solid black;
+  flex-direction: column !important;
+  justify-content: left;
+  align-items: flex-start;
+}
+.Log Button {
+  right: 10px !important;
+  width: 100% !important;
+}
+.username {
+  width: 100%;
+}

Amazon_Clone/public/css/Responsive.css

@@ -0,0 +1,95 @@
+@media (max-width: 970px) {
+  .fade-box {
+    display: none;
+  }
+  .item-count {
+    top: 0px;
+  }
+  .banner {
+    top: 8vh !important;
+  }
+  .main {
+    top: 90px;
+  }
+  .navbar input {
+    width: 25vw;
+  }
+}
+@media (max-width: 700px) {
+  .Sidemenu {
+    display: flex;
+  }
+  .banner {
+    top: 100px !important;
+    margin: 10px 0px;
+  }
+
+  .navbar .logo {
+    position: relative;
+    left: 30px;
+  }
+  .navbar input {
+    width: 40vw;
+  }
+  .flag {
+    display: none;
+  }
+  .log {
+    display: none;
+  }
+  .navbar form {
+    position: relative;
+    top: 3px;
+    width: 100%;
+  }
+  .navbar input {
+    width: 80%;
+  }
+  .cart {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+  .display-toggle {
+    display: block;
+    color: white !important;
+  }
+  .navbar Button {
+    color: white !important;
+  }
+  .navbar .signIn {
+    position: absolute !important;
+    top: 4px;
+    right: 20vw;
+  }
+  .hamburger {
+    width: fit-content !important;
+    position: absolute;
+    top: 15px;
+  }
+
+  .Card {
+    width: 11rem;
+    min-height: 24rem;
+    flex-direction: column !important;
+  }
+
+  .Card img {
+    width: 9rem;
+    height: 12rem;
+  }
+  .row {
+    width: 100vw;
+  }
+  .DisplayPage .detail {
+    width: 100vw;
+  }
+  .Cart {
+    padding-top: 130px;
+    height: auto;
+  }
+
+  .Cart .detail {
+    width: 100vw;
+  }
+}

Amazon_Clone/public/css/Sidemenu.css

@@ -0,0 +1,47 @@
+.Sidemenu {
+  position: fixed;
+  top: 30px;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.288);
+  height: 100vh;
+  width: 100%;
+  z-index: 1000;
+  overflow-y: hidden;
+  transition: 0.5s;
+  display: none;
+}
+.Sidemenu-menu {
+  position: relative;
+  top: 100px;
+  margin-top: 30px;
+  background-color: white;
+  height: fit-content;
+  width: 80%;
+  flex-direction: column !important;
+  align-items: flex-start;
+}
+.Sidemenu::after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0;
+  width: 80%;
+  background-color: white;
+  height: 100%;
+  z-index: -1;
+}
+.Sidemenu-menu Button {
+  border-radius: 0 !important;
+  padding: 15px;
+  font-size: 18px;
+  width: 80vw !important;
+  color: black !important;
+}
+.cancel {
+  font-weight: lighter;
+  position: absolute;
+  top: 90px;
+  right: 20px;
+  font-size: 30px;
+  color: white;
+}