Full Stack e-commerce app built with Express, Node.js, MySQL and React

Overview

Auction Point

Auction Point is a website where users can buy and sell items. My aim with this Full Stack project was the design and development of an online auction platform, similar to eBay. The implementation follows a REST-api architecture and some of the key features are:

  • Secure Authorisation and Authentication
  • Role-based Access Control
  • Mail Client within the Application
  • Recommendations using Matrix Factorisation

Technologies

A Javascript stack was used for easier and faster deployment, comprised of Express and Node.js for the back-end, MySQL for the database and React for the front-end. A different relational database can also be used since the data modeling, associations and queries are handled with object-relational mapping using Sequelize.

l (3)

Requirements & Setup

Back-end

  1. For the back-end MySQL or a similar relational database is required as well as the installation of Node.js and npm.

  2. In the config.json file add your personal MySQL settings.

  3. To install express, cors and other necessary modules, in the api folder run: npm install

  4. To connect sequelize to the database, run the command: sequelize init

  5. The transactions are encrypted through the SSL/TLS protocol. To create the certificate locally you can use mkcert and then add the path in:

const sslServer = https.createServer({
    key: fs.readFileSync('/yourpath/key.pem'),
    cert: fs.readFileSync('/yourpath/cert.pem')
}, app);
  • When the server starts with a "clean" database, the tables are automatically created based on the object-oriented models defined in models.
  • Also, a user with the administrator role is automatically created with the username: admin and initial password: 1234, which can be changed.
  • Nodemon is also set up, so that the server automatically restarts every time the code of back-end is changed, while the server is running.

To start up the server simply run in the api directory:

npm start

Front-end

For the front-end all the necessary dependencies are defined in the package.json file. To install them simply run in the front directory: npm install

To start up the front-end in the front directory run:

npm start

Design

For the design of the application I used pure CSS and a few Material UI components. A few animations were added for the page transitions, as well as the editing page. For the titles and main elements I used Futura, which is a simple and timeless typeface, while for the body and details I used Roboto and other similar Sans-Serif fonts.

Welcome Page

site

The site's welcome page is rather simple, aiming to get the new visitors interested in entering the site. There is only a login button and a brief summary of the services provided, so that they're not overwhelmed with information.

Auctions

Screenshot 5

From the Auctions page the user can browse the listings by category, search or filter. The categories have a hierarchical structure, which was achieved in MySQL by using a self referencing foreign key and by building the tree on both the front-end and the back-end recursively when needed.

Auction Page

loc3

The auction page has all the details of an item and depending if a buyer or the seller is viewing it, they are presented with different options. The photos are displayed in a carousel and for the photo upload I used the Multer api in the back-end. To display the location I used OpenStreetMap and leaflet. The user can add the exact location by dropping a pin or by searching. I designed a polaroid-like container for the map as can been seen in the screenshot above, where the coordinates are displayed in the DMS format.

Login & Registration

l(1)

For the registration fields, as well as the other forms of the website, I used yup to perform the schema validation in combination with the formik library. The user's password is stored in the database hashed using the bcrypt function, which is based on the blowfish cipher.

Profile

Scr2

On the profile page, a buyer can see all the available items of a seller. A similar dashboard page is provided for each user, where items are also recommended to them. The recommendation system uses the Matrix Factorisation algorithm, while the data for it are gathered while the users are visiting an auction or bidding on it.

Mail

messages

Aside from inbox, outbox and the ability to send a new message, in the mail client there is also a messaging interface. There aside from the messages, the buyer can rate a seller when an item has arrived and the seller respectively can rate a buyer when they have completed the payment.

Admin

admin

When logged in the administrator can approve user applications, as well as export the auction details in XML, JSON or CSV format following the ebay DTD template. Also, to populate the database and train the recommender algorithm, I used real data from the eBay website in XML format provided by UCLA.

Tools

The website was built using Express, Node.js, MySQL, Sequelize and React.

You might also like...
A full stack e-commerce web app with ReactJS

A Full Stack Shopping App that i built using ReactJS Redux with full E-Commerce Functionality!!

A plateform made for sharing static files with dynamic routing. Made using Express, React SSR, JWT, MySQL.

XeCours A plateform made for sharing static files with dynamic routing. Made using Express, React SSR, JWT, MySQL.

TeaLab is a whimsical full-stack browser-based application built using ReactJS, Cloudinary, CSS, PostgreSQL and Express
TeaLab is a whimsical full-stack browser-based application built using ReactJS, Cloudinary, CSS, PostgreSQL and Express

TeaLab is a whimsical full-stack browser-based application built using ReactJS, Cloudinary, CSS, PostgreSQL and Express. Users are able to create and collect teas, that makes learning about tea fun! Users will be able to save, edit and delete their tea recipes on a recipe profile page.

Full stack e-commerce web application

🛍️ Shopitel 🛒 To Get Started ⚡ Clone the shopitel-ecommerce-app repository using git: git clone [email protected]:AbihaFatima/shopitel-ecommerce-app.gi

flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

A full stack task manager application built with node, react,mongodb,and mantine.

A full stack task manager application built with node, react,mongodb,and mantine.

MERN stack  (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.
MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.

MERN stack (MongoDB, Express, React, Node.js) blog app with Chakra UI and Redux.

Wink - Full-stack social webapp written in TypeScript, React & Express
Wink - Full-stack social webapp written in TypeScript, React & Express

Wink Full stack social web app made with TypeScript, React & Express

Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io
Instagram MERN - Full-Stack Instgram Clone using MERN Stack and Socket.io

Instagram MERN Full-Stack Instgram Clone using MERN Stack and Socket.io Visit Now 🚀 🖥️ Tech Stack Frontend: Backend: Realtime Communication: Cloud S

Owner
Themis Valtinos
Department of Informatics and Telecommunications, UoA
Themis Valtinos
A full E-Commerce Full Stack Amazon Clone which built using ReactJS. You can register, sign in and shop!

Amazon Clone with ReactJS In this Amazon Clone application you can register on the site, log in with your account, shop, pay for the products and see

Mert Çankaya 15 Jul 7, 2022
E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

E-commerce Web App for audio products. A full-stack project, using Nodejs and Express in the backend, MongoDB as database, React, and Redux on the front-end.

Jose Furtado 10 Nov 25, 2022
Clone project of a famous Q/A website for developers which is stackoverflow built using MySQL-Express-React-Node :globe_with_meridians:

StackOverflowClone As the name suggests, this project is a clone of a famous Q/A website for professional and enthusiast programmers built solely by m

Mayank Aggarwal 461 Nov 30, 2022
A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

A Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality!!

Özge Coşkun Gürsucu 50 Oct 3, 2022
A Responsive Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality

A Responsive Full Stack Amazon Clone which created using ReactJS with full E-Commerce Functionality including user register, user login, user authentication, shop cart management, order management, and payment using Stripe, etc.

Mostafa Habib 3 Aug 18, 2022
Discord Clone using React, Node, Express, Socket-IO and Mysql

React Discord Clone Functional Discord Clone written in Typescript using React, Socket IO, NodeJS, Express and MySQL View the live verison at -> http:

Eric Ellbogen 393 Nov 22, 2022
Node.js Express Login example (with Registration) using JWT, Cookies, MySQL database

Node.js Express Login and Registration example with JWT Appropriate Flow for User Login and Registration with JWT Authentication Node.js Express Archi

null 53 Nov 26, 2022
Full Stack E-Commerce App built with React, using Firebase and Stripe API. 🗽🚀

Full Stack E-Commerce App built with React, using Firebase and Stripe API. ????

Lakshman 12 Nov 16, 2022
Light Christian Library App - Built with React, JavaScript, Material UI, Node.js and MySQL

A unique search bar that filters through data. Built with React, JavaScript, Material UI, Node.js and MySQL

Christotle Agholor 3 Feb 26, 2022
A full-stack e-commerce website inspired by the amazon website. Built with React, Redux and Firebase.

Amazon-Clone View Live · Report Bug · Request Feature Table of Contents About The Project Built With Getting Started Clone Locally Prerequisites Contr

Okoye Charles 19 Oct 3, 2022