Express js react app

server.js

@@ -4,6 +4,8 @@ const express = require('express');
 const app = express(); // create express app
 const http = require('http');
 const mysql = require('mysql');
+const bcrypt = require('bcrypt');
+const saltRounds = 10;
 app.use(cors());
 
 const bodyParser = require('body-parser');
@@ -26,34 +28,51 @@ const db = mysql.createConnection({
   database: "account_information"
 });
 
-db.connect( (err) => {
-  if (err) {
-    throw err;
-  }
+db.connect((err) => {
+    if (err) {
+        throw err;
+    }
 
-  console.log("Connected to MySQL server.");
+    console.log("Connected to MySQL server.");
 });
 
-app.post("/create", (req, res) => {
-  const username = req.body.username;
-  const password = req.body.password;
-  const email = req.body.email;
-  const address = req.body.address;
-  const firstname = req.body.firstname;
-  const lastname = req.body.lastname;
-  const phone = req.body.phone;
-
-  const query = "INSERT INTO account (username, email, address, password, first_name, last_name, phone_num) VALUES (?, ?, ?, ?, ?, ?, ?);";
-  db.query(
-    query,
-    [username, email, address, password, firstname, lastname, phone],
-    );
-  return res.json(200);
-});
+app.post("/register", (req, res) => {
+
+    const username = req.body.username;
+    const password = req.body.password;
+    const email = req.body.email;
+    const address = req.body.address;
+    const firstname = req.body.firstname;
+    const lastname = req.body.lastname;
+    const phone = req.body.phone;
+
+    bcrypt.hash(password, saltRounds, (err, hash) => {
+        if (err) {
+            console.log(err);
+        }
 
-app
+        const data = [
+            username,
+            email,
+            address,
+            hash,
+            firstname,
+            lastname,
+            phone
+        ];
 
+        const query = "INSERT INTO account (username, email, address, password, first_name, last_name, phone_num) VALUES (?, ?, ?, ?, ?, ?, ?);";
+        db.query(
+            query, data,
+            (err, result) => {
+                if (err) {
+                    res.send({ err: err });
+                }
+            }
+        );
+    });
+});
 // start express server on port 5000
 server.listen(5000, () => {
-      console.log('NodeJS server running');
-});
+    console.log('NodeJS server running');
+});

src/App.js

@@ -1,6 +1,8 @@
 import React from "react";
-import Registration from "./Pages/LoginPage/LoginPage";
+import Registration from "./Pages/RegistrationPage/RegistrationPage";
 import Home from "./Pages/HomePage/HomePage"
+import Product from "./Pages/ProductPage/ProductPage"
+import "./GeneralStyles.css";
 import {
   BrowserRouter as Router,
   Switch,
@@ -17,11 +19,17 @@ function App() {
           <Link to="/">Home</Link>
           &nbsp;
           <Link to="/registration">Register</Link>
-          </nav>
+          &nbsp;
+          <Link to="/product">Product</Link>
+        </nav>
+
         <Switch>
           <Route path="/registration">
             <Registration />
           </Route>
+          <Route path="/product">
+            <Product />
+          </Route>
           <Route path="/">
             <Home />
           </Route>

src/GeneralStyles.css

@@ -0,0 +1,12 @@
+button {
+  border: none;
+  margin-left: 1%;
+  background-color: rgb(102, 255, 0);
+  border-radius: 10px;
+}
+
+button:hover {
+  background-color: rgb(0, 141, 141);
+  color: white;
+  cursor: pointer;
+}

src/Pages/HomePage/HomePage.css

@@ -4,80 +4,80 @@
     font-family: 'Times New Roman', Times, serif;
     margin: 0;
     padding: 0;
-    text-align: center;
-  }
-
-  header {
+}
+
+header {
     text-align: left;
     background-image: url(../../images/oceanimage.jpg);
-    background-blend-mode:lighten;
+    background-blend-mode: lighten;
     background-position: center;
-    background-size:cover;
-    opacity:1;
+    background-size: cover;
+    opacity: 1;
     color: black;
-    font-size:x-large;
+    font-size: x-large;
     margin: none;
     border-radius: none;
     padding: 10%;
-  }
+}
 
-  h2 {
-    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+h2 {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     text-align: center;
     background-color: rgb(184, 227, 240);
     color: black;
-    font-size:large;
+    font-size: large;
     margin: none;
     border-radius: none;
     padding: 1%;
-  }
-  h3 {
-    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+h3 {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     text-align: justify;
     color: black;
-    font-size:large;
+    font-size: large;
     margin: none;
     border-radius: none;
     padding: 1%;
-  }
+}
 
-
-  button {
+.Frames{
+    display: flex;
+    flex-direction: column;
     color: black;
-    padding: 20px 60px;
-    text-decoration: none;
     font-size: large;
-    border: none;
     margin: 5%;
-    background-color: rgb(102, 255, 0);
-  }
+    align-items: left;
+    text-align: center;
+}
+
+.Frames button {
+    height: 30px;
+    width: 20%;
+}
 
-  .hotbar-button {
+.hotbar-button {
     color: black;
     padding: 5px 5px;
     text-decoration: none;
     font-size: large;
     border: none;
     margin: 1%;
-  }
-  .hotbar-button:hover {
-    cursor:pointer;
-  }
-
-  button:hover {
-    background-color: rgb(0,141,141);
-    color: white;
-  }
+}
 
-  .Topright {
+.hotbar-button:hover {
+    cursor: pointer;
+}
+
+.Topright {
     position: absolute;
     top: 30px;
     right: 16px;
-    font-size:18px
-  }
-  
-  .Middleright {
+    font-size: 18px
+}
+
+.Middleright {
     position: absolute;
-    top:30px;
-    right:80px;
-  }
+    top: 30px;
+    right: 80px;
+}

src/Pages/HomePage/HomePage.js

@@ -1,37 +1,44 @@
 import "./HomePage.css"
-import image  from "../../images/cartimage.png"
+import image from "../../images/cartimage.png"
 import image2 from "../../images/searchbar.png"
 function Home() {
-    return (
-      <div>
-          <div className="App">
-          <header><b>WorldWide Frames</b> - <i>See A Better World</i></header>
-          <h2><i>Items on Sale</i></h2>
-          <h3>Deals of the Day</h3>
-          <button>frame set 1</button>
-          <button>frame set 2</button>
-          <button>frame set 3</button>
-          <h3>Sunglasses</h3>
-          <button>frame set 4</button>
-          <button>frame set 5</button>
+
+  return (
+    <div>
+      <div className="App">
+        <header><b>WorldWide Frames</b> - <i>See A Better World</i></header>
+        <h2><i>Items on Sale</i></h2>
+        <div className="Frames">
+          <div className="DoD">
+            <h3>Deals of the Day</h3>
+            <button>frame set 1</button>
+            <button>frame set 2</button>
+            <button>frame set 3</button>
+          </div>
+          <div className="Sunglasses">
+            <h3>Sunglasses</h3>
+            <button>frame set 4</button>
+            <button>frame set 5</button>
+          </div>
         </div>
-        <div className="Topright">
-          <div className="hotbar-button">
-         <img src={image} alt = ""
-         width="55"
-         height = "50" />
-         </div>
+      </div>
+      <div className="Topright">
+        <div className="hotbar-button">
+          <img src={image} alt=""
+            width="55"
+            height="50" />
         </div>
-        <div className = "Middleright">
-          <div className="hotbar-button">
-            <img src = {image2} alt = ""
-            width = "55"
-            height = "50" />
-          </div>
+      </div>
+      <div className="Middleright">
+        <div className="hotbar-button">
+          <img src={image2} alt=""
+            width="55"
+            height="50" />
         </div>
       </div>
-
-    );
+    </div>
+
+  );
 }
 
 export default Home;