Skip to content

pierre1590/MERN_E-commerce

Repository files navigation

E-SHOP

npm tag react node-current GitHub repo size GitHub last commit

Table of Contents
  1. Introduction
  2. Getting Started
  3. Demo
  4. Gallery of the app
  5. Technologies used
  6. Contact

Introduction

An installable e-commerce app built using the MERN stack, Redux.js e Bootstrap 5. User authentication is done using e-mail and password. The app also implements an email verification system for users who register using an email and password, in case you have forgotten your password you can create a new one using the forgot password feature.
The payment method implemented is PayPal which allows you to pay for orders, the app also includes an administration panel to keep track of all products, orders and users.

Getting Started

  • Clone this repo and run the git clone <repo> command from your terminal.
  • Type cd <project-name> to enter the project directory.
  • Run npm install to install all dependencies in the root directory and in frontend directory.
  • Create an .env in the root directory and add the variables as in this file
  • Run the command npm run dev to start the server and the client concurrently.

You can obtain the MONGO_URI from the MongoDB Atlas after you create an account.

For setting up Nodemailer for gmail accounts, refer to the Nodemailer documentation.

Obtain the paypal client ID from the Paypal developer dashboard after you create an account.

Demo

The app has been hosted on Heroku here.
To pay with PayPal use the following fake account:

Gallery of the app

  • HomePage

HomePage

  • ProductPage

Product-Detail

  • User Page

User

  • Cart Page

Shopping-Cart

  • Order Page

Order

  • Checkout Page

Order-Paid-Delivered

  • Admin Page : Users

UserList

  • Admin Page : Products

Products-List

  • Admin Page : Create Product

Create-Product

  • Admin Page : Orders

Orders-List

  • Send Link to reset password

Email-Reset-Password

  • Reset password

Reset-Password

Technologies Used

Some of the technologies used in the development of this web application are as follow:

  • MongoDB Atlas: It provides a free cloud service to store MongoDB collections.
  • React.js: A JavaScript library for building user interfaces.
  • Node.js: A runtime environment to help build fast server applications using JS.
  • Express.js: A popular Node.js framework to build scalable server-side for web applications.
  • Redux.js: A predictable & global state container for React apps.
  • Mongoose: An ODM(Object Data Modelling)library for MongoDB and Node.js
  • Heroku: A platform(PaaS) to deploy full stack web applications for free.
  • JSON Web Tokens or JWTs: A standard to securely authenticate HTTP requests
  • Bootstrap 5: A popular framework for building responsive, mobile-first sites.
  • React Bootstrap: The most popular front-end framework, rebuilt for React.
  • Multer:Node.js package that help in dealing with file uploads.
  • nodemailer: Send mails using a node based server

Contact

Piero Sabino - @SabinoPiero - P137ru590 - Piero Sabino - [email protected]

Project Link : https://github.com/pierre1590/MERN_E-commerce

Go up

About

An e-commerce app built with MERN stack, Redux.js and Bootstrap.

Topics

Resources

Stars

Watchers

Forks