Skip to content

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

Notifications You must be signed in to change notification settings

revolalex/Ecommerce-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

. react-router. redux. redux. . .
. . . .
axios. Express.
Hits.

Table of contents

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •