Development

server.js

@@ -37,7 +37,7 @@ const server = http.createServer(app);
 
 const db = mysql.createConnection({
   user: "nodejs",
-  host: "localhost",
+  host: "3.93.4.5",
   password: "nodejs",
   database: "account_information"
 });

src/App.js

@@ -4,7 +4,7 @@ import Home from "./Pages/HomePage/HomePage"
 import Axios from "axios";
 import Product from "./Pages/ProductPage/ProductPage"
 import Login from "./Pages/SignInPage/SignInPage"
-import Cart from "./Pages/ShoppingCart/ShoppingCart"
+import Cart from "./Pages/ShoppingPage/ShoppingPage"
 import Account from "./Pages/AccountPage/AccountPage"
 import "./GeneralStyles.css";
 import "./App.css"
@@ -39,7 +39,7 @@ function App() {
                 height="50" />
             </Link>
             <Link to="/product">Product</Link>
-            <Link to="/cart">Shopping Cart</Link>
+            <Link to="/cart">Shopping Page</Link>
             {!loginState && (
               <>
                 <Link to="/registration">Register</Link>

src/Pages/ShoppingPage/ShoppingPage.css

@@ -0,0 +1,61 @@
+#sc_body {
+    width: 300px;
+    border: 15px solid green;
+    padding: 50px;
+    margin: 20px;
+  }
+
+.row {
+    display:flex;
+    justify-content:space-between;
+}
+
+.block {
+    padding:1rem;
+    margin:0.5rm;
+    border-radius:0.5rems;
+}
+
+.row.center {
+    align-items:vertical;
+}
+
+/*Text*/
+.Header{
+    margin: auto;
+    width: 90%;
+    height: 15%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+   }
+.Heading{
+    font-size: 20px;
+    font-weight: 700;
+    color: #2F3841;
+   }
+.Action{
+    margin:0.5rem;
+    font-size: 14px;
+    text-align:right;
+    font-weight: 600;
+    color: blue;
+    cursor: pointer;
+    border-bottom: 1px solid blue;
+   }
+
+   /*Items for the Cart */
+   .Cart-Items {
+       margin:5rem;
+       width:90%;
+       height:30%;
+       display:flex;
+       justify-content:space-between;
+       align-items:center;
+   }
+
+   /*images*/
+   .image-box {
+       width:15px;
+       text-align: center;
+   }

src/Pages/ShoppingPage/ShoppingPage.js

@@ -0,0 +1,15 @@
+import "./ShoppingPage.css"
+import image from "../../images/testglasses.jpg";
+function ShoppingPage() {
+    return  (
+        <div>
+            <div class="Header">
+                <h3 class="Heading">Shopping Cart</h3>
+                <h5 class="Action">Remove All</h5>
+            </div>
+            <div class="Cart-Items">test</div>
+            </div>
+    );
+}
+
+export default ShoppingPage;