revolalex/Ecommerce-react

An full-stack e-commerce in react, with sign-in/up, adding product, editing product, cart, basket, an almost complete e-commerce

. . . . . .
. . . .
. .
.

Table of contents

• Techno
• App
• Signup
• Signin
• Create product
• Products list
• Product detail
• Contact

Techno

Back-End

• node.js
• express
• bcrypt
• jwt (jsonwebtoken)

DataBase:

• mysql

Front-End

• react
• react-context-devtool
• react-router
• redux
• redux-persist
• axios
• boostrap

App

This App is an E-commerce, you can:

• signup
• signin (token)
• add a product to your cart
• add a product to sell
• visualize the product and detail
• sort the product list by categorie
• edit your cart (qty)
• edit your profil (change email, name..)
• edit your product (change price, add promotion)
• have acces to your order history
• ....

Signup

Handle error :

var mailformat = /^[\w-]+@([\w-]+\.)+[\w-]{2,4}$/g;
    switch (true) {
      case userObject.firstName.length < 3:
        alert("first name error: min 3 character");
        break;
      case userObject.lastName.length < 3:
        alert("last name error: min 3 character");
        break;
      case userObject.url.length < 10:
        alert("url profile picture require");
        break;
      case userObject.password < 8:
        alert("password minimun 8 character");
        break;
      case !userObject.email.match(mailformat):
        alert("email incorrect");
        break;
      case userObject.password !== this.state.confirmPassword:
        alert("confirm password error");
        break;
      default:

Handle if an user already use this email Back-End:

  /*********************** Check if user with this email already exist *************************/
  await app.use("/users/sign-up", (req, res, next) => {
    console.log(req.body.email);
    connection.query(
      `SELECT * FROM users WHERE email = '${req.body.email}'`,
      (err, results) => {
        if (err) throw err;
        if (results.length > 0) {
          res.status(200).send("this EMAIL already exist");
        } else {
          next();
        }
      }
    );
  });

Signin:

Api, Back-end (token, bcrypt)

await app.post("/users/sign-in", function(req, res) {
    let password = req.body.password;
    let email = req.body.email;
    let hash = "";
    connection.query(sqlRequestUsers.mailUser, [email], function(err, results) {
      if (err) throw err;
      // handle email error
      if (!Array.isArray(results) || !results.length) {
        res.send("Sorry, email incorrect");
      } else {
        let name = results[0].name;
        let id = results[0].id;
        /******* TOKEN *******/
        let token = jwt.sign(
          { email: email, name: name, id: id },
          config.secret
        );
        hash = results[0].password;
        // handle password error
        bcrypt.compare(password, hash, function(err, result) {
          if (result == true) {
            // get the decoded payload ignoring signature, no secretOrPrivateKey needed
            var decoded = jwt.decode(token);
            // get the decoded payload and header
            var decoded = jwt.decode(token, { complete: true });
            res.status(200).send({
              auth: true,
              token: token,
              email: email,
              id: id,
            });
          } else {
            res.send("password error");
          }
        });
      }
    });
  });

Create Product

handle error:

switch (true) {
      case productObject.category.length < 2:
        alert("category error: min 2 characters");
        break;
      case productObject.name.length < 3:
        alert("name error: min 3 characters");
        break;
      case productObject.description.length < 10:
        alert("description required min 10 characters");
        break;
      case productObject.url.length < 1:
        alert("url of product picture required min 10 characters");
        break;
      case productObject.prices.length < 1:
        alert("Price missing");
        break;
      default:

header with token:

i store it in the state

headerWithToken: {
        headers: {
          Authorization: "Bearer " + this.props.token,
        },
      },

request with token in the header:

axios.post("http://localhost:8080/products/",productObject,this.state.headerWithToken)

Middleware check token API Back-end:

const jwt = require('jsonwebtoken');
const config = require("../routes/modules/config");

module.exports  = (req, res, next) => {
  try {
    const token = req.headers.authorization.split(' ')[1];
    const decodedToken = jwt.verify(token, config.secret);
    if (decodedToken) {
      next();
    } else {
      res.sendStatus(403)
    }
  } catch {
    res.status(401).json({
      error: new Error('Invalid request!')
    });
  }
}

Import the middleware:

const auth = require("../middleware/auth");

Example of use:

  // POST /productEdit/:id => Update this specific product from the database
  await app.post("/productEdit/:id", auth, (req, res) => {
    req.body.id = req.params.id;
    if (req.body.idUser === req.body.id_user_affiliate) {
      connection.query(sqlRequestProduct.editProduct(req.body), (err) => {
        if (err) {
          console.log(err);
          res.sendStatus(500);
        } else res.send("Updated");
      });
    }
  });

Products List

Get all the product:

 componentDidMount() {
    axios
      .get(`http://localhost:8080/products/`)
      .then((result) => {
        this.props.setListOfProducts(result.data);
      })
      .catch(() => {
        console.log("Oops, request failed!");
      });
  }

Product detail

Basket

Status

Project is: Finish

Contact

• 
• revolalex@gmail.com