MERN Stack E-Commerce Web Application

By Alok Kumar

The MERN Stack E-Commerce Web Application is a modern and scalable web platform that enables businesses to sell their products online.

E-commerce Web App

 

USER LOGIN AND REGISTER PAGE
A new User have register before login and after login user can add product to the cart. In this page registered user can login and buy product where new user can create a new account for buying the product.

USER LOGIN
A new User have register before login and after login user can add product to the cart. In this page register user can login to buy product and non existing user can create an account for buying the product.

USER HOME PAGE
Here user can view all the product and category added by the admin and here user has option to filter the product by the category name and also by the product price by selecting the price and category the user will see the product according to the selected category by the user and also the by the specific price which the user have selected from the filter tab. If user want then he/she can reset all the filter applied. Here user get the search bar from where user can search the product by entring the title of the product as well.

ADD TO CART PAGE
To buy any product the user have should add product to cart. After adding the product customer can view the added product as well as the details of the product while viewing the details customer will see the similar items at the bottom of the page

ADD PRODUCT BEFORE CHECK OUT
There user can view the product number which they have added to the cart user can delete theof product from cart and send request to check out for payment.

SELECT PAYMENT METHOD
Basically there are two type of payments method to pay the price of the product user/ customer can select any of the payment method and after clicking on the payment method user has to confirm the order weather customer confirm to pay for the product or not.

ADMIN LOGIN PAGE
Admin dashboard is important for this application and here admin take care of all the part of the shopping. Here admin has to login with the admin id and password then only admin can get into the admin dashboard

ADMIN HOME PAGE
Admin get different options in his home page after login with admin id and password. Admin will have access to category in category he will get submenu Create category, Edit Category and Delete Category. He can also Edit Product, Create product and delete product sub menu
under the product menu. The Admin can also see the user request for product which will show on the Manage Order menu

CREATE CATEGORY
Admin can add category to add product of specific category such as TV, mobile, watches which will be easier for the user to find/ search a specific product in the e-commerce web site using category user can add filter to the product using the filter option user can see the product related to the specific filter. Admin can edit as well as can delete the category as soon as the admin create a new category in the web page a new category with unique ID get created in the database Inside the MongoDB.

MANAGE CATEGORY
Manage Category important part of the admin dashboard for set status the category will show or not in the home page admin can select this. Here admin has the right to View, Edit and Delete category from Manage Category menu.

VIEW CATEGORY
In this category user can see the detail of the category

EDIT CATEGORY
If admin added the wrong category name then by edit option the page admin can correct the information by updating the information

DELETE CATEGORY
Unwanted category or product category that company or admin decided to stop to sell permanently the admin can delete after deleting the category admin will get a popup notification that category has be deleted successfully.

ADD PRODUCT
Admin dashboard where admin can added product that will show in the home page here admin.To add a product admin have to specify the product category and select that option or category from the category dropdown box after selecting the category admin have to select photo in PNG/JPGE for and the n add the Title of the Product and next to the title of the product write the Description of the product with key points. Then add the price of the
product in Dollars and the add the quantity of the product which is available and at the last select the shipping option yes/no.

MANAGE PRODUCT
Manage Product is important of admin dashboard for setting the status of Product. In home page admin can select this Admin can view, edit and delete the product from Manage Product submenu.

VIEW PRODUCT
In this option customer can see the details of the product.

EDIT PRODUCT
If admin has done any mistake in any section of the product while adding the product then by editing the page admin have the right to correct the information that uploaded when it is created

DELETE PRODUCT
Unused Product or the product company decided to stop selling permanently can delete before deleting it a notification will come to reconfirm that admin is sure he want to delete the product

VIEW ORDER
In view category-submenu customer can show the details of the category as well as the order which they have placed.

EDIT ORDER STATUS
The Product which were ordered by the customer can be managed by the admin from this menu. When a product delivered to the customer, the customer paid for this then need to change product order status to delivered and paid if the order is in the processing then admin can update the order status to processing mode so that customer will get the update about the order and if the order is shipped then admin can update the status to shipped that can be done from this manage order menu.

PAYMENT GATEWAY
The foremost critical include of the e-commerce application is installment portal. To supply payment door Braintree is one of the most excellent installment preparing alternative accessible within the market. On the off chance that the e-commerce as it were need to utilize the credit card alternative for the installment at that point it may well be misfortune of store since any people these days need to utilize PayPal. There for the application coordinating both credit card and PayPal framework. Braintree is utilized by a few of the greatest title within the world such as Google, Dropbox, GitHub

Braintree need to be introduced exclusively in hub API. At that point the token can be asked in backend and it can be given to frontend. The .env record is required secretly for the utilization of environment factors After the token has been sent to frontend. Clients can login to their PayPal account and pay
for the arrange they have made some time recently. the sandbox account can be made to test the PayPal work. After paying for the arrange by PayPal or credit cards, clients fair wrapped up their shopping and go back to the Domestic page.