Ecommerce Online Shopping Project using React JS + Spring Boot + MySQL

 Ecommerce Online Shopping Project

watch the complete video on youtube



Online Shopping System Project or E-commerce Project is developed using React JS, Spring Boot & MySQL. By using this application, users can order products online just by sitting at home or from anywhere.

This is a Major level Full Stack project, that can be used by CS, IT Final Year Students, and Post-Graduate Students for learning purposes.

-----------------------------------
HOME PAGE




-----------------------------------

TECHNOLOGIES USED

1. Spring Boot (REST APIS)

2. React JS (Frontend)

3. MySQL for Database

4. Maven for project management

-----------------------------------

USER MODULES


The project basically has three user modules:

1) CUSTOMER MODULE

2) ADMINISTRATOR MODULE

3) DELIVERY PERSON MODULE

-----------------------------------

FUNCTIONAL MODULES

1) User Authentication Module: The registration and Login system has been added so that only authenticated users (Admin or Customer or Delivery Person) can perform their functionalities.                                              
2) Product Module: Add Product, Update Product, Delete Product, Search Products. 

3) Product Category Module: Add Product Category, Update Product Category, View Categories,            Search Products by Category.

4) Cart Module: Add Products to Cart, Remove Products from Cart, View My Cart and
     The total amount of Cart.

5) Order Module: Order Products, View All Orders, My Orders, Search Orders by Order Id.

6) Delivery Module: Assign Delivery Person for the Orders, View My Order Deliveries, Update                Delivery Status for the Orders, View Delivery Status.

7) Payment Module: Make the payment for the Order.

-----------------------------------
OVERVIEW OF THE PROJECT


In this project, all the main functionalities have been which should be present in any Ecommerce Project or Online Shopping Project. 

When a user visits our application for the first time, he will be able to see all the Products on the Home Page by default, he can also search the products based on the product categories which was added by the Administrator. After that User can log in and add the products to the Cart, and he can add multiple products to Cart with his required quantity, User can also delete the product from the Cart at any time.  

After this, the User can Order the products which are present in his Cart. During the Order placing, the User will be redirected to the Dummy Payment Page for the Order Payment. After the payment, all the products which were present in the Cart will be Ordered and he will get Order Id for the reference, And now he can also see his Orders, Delivery Person Details, and Delivery Status.

After the Customer Order, Admin can all the Orders made by All the Customers. And now,  Admin can assign a Delivery Person for the Order by using the Customer Order Id. Now, After Assigning the Delivery Person, that particular Customer will be able to see the assigned Delivery Person who will deliver his Orders. And this Delivery Person will update the customer's Order Delivery Status like at what date and time the order is expected to deliver.

-----------------------------------

ROLES OF USER

Register & Login User

Register & Login of User is Role Based. During the Registration & Login, we have to select the Role like Admin, Customer, or Delivery Person.

Register User(Customer, Admin, Delivery Person)

Login User(Customer, Admin, Delivery Person)

CUSTOMER ROLE

1) Customers can view all the Products on the Home Page.



All Products Shown

2) Customers can search the Products by Category.

 In the below example, we have searched all the Mobile Category Products.



Mobile Products Category



Single Product View

In the above picture, we can see the Product Title, Description, Stock Available, and Price.

3) Customers can Open a Product to View it in Detail.


Product In Detail with Related Products


In the above image, we can see, Customer will be able to see the Product in detail and below that, he can also see Related Products.

4) Customer's Cart

In the above picture, we can see when we open a Product, we get the option to  Add Product Quantity to the Cart.

After adding all the required Products, Now, Customer can see his Cart as shown in the below picture.

Products In Cart

Customers can also delete the Product from the Cart by clicking on the delete button in front of the Products.

Below, the Customer will be able to see the total amount to Pay for the Order.

4) Payment for the Order

In the above pic, below the Total Price for the Order, customers will get the Checkout button, so when the customer will click on it, It will be redirected to the payment page as shown below.


So after filling in all the details, when the customer will click the Pay button, an Order will be placed for the Customer.

5) My Orders

After Placing the Order, Now, Customer can see his Orders.


Now, In the Picture, we can see that After the order placement, we are able to see the Delivery Date, Delivery Status, Delivery Person, and Delivery Person Mobile Number as PENDING.

After Updation of the Order Delivery details by the Admin & Delivery Person, the Customer will be able to see the updated delivery status for the orders.

ADMIN ROLE

1) View All Customer Orders

Admin can see all the Customer Orders after the login as shown in the below picture.


Admin can see for the Order, delivery Status is Pending. So from here, the admin can assign the Delivery Person for the Customer Order.

2) Assign a Delivery Person for Customer Orders

As seen in the above picture, For all the Customer Orders, the Delivery Status is Pending. So now, Admin can assign a Delivery Person for the Customer Orders by using the Unique Order Id.


As shown in the above picture, Admin can select the Delivery Person for the Order. After assigning a Delivery Person for the Order, and now Admin and Customer can see this  Delivery Person for the Order delivery as shown below.



3) Add Category

Admin can add the Product Categories like laptops, Mobile, Shoes, etc.


3) Add Products

Admin can add the Product.


DELIVERY PERSON ROLE

1)  View My Deliveries

Delivery Person can see all the Orders which are assigned to him by the Admin as shown below.\


2) Update the Delivery Status for the Order.

In the above picture, the Delivery Person can see the Delivery Status, and Time as Pending. So from here, Delivery Person can update the Delivery Status and Time as per his expectation as shown below.


So after updating the Delivery Date, Date, Status. We can see the Order Delivery Status got updated. And the same Delivery Status will be visible to the Custome and Admin. 



**************************************

Students can use this project for learning and can submit the project for their final year or Internship projects.
****************IMPORTANT**********  

IF YOU WANT THE PROJECT DO CONTACT ME. 

I will give you the full project SOURCE CODE and I will do a COMPLETE SET-UP of the project on your PC or Laptop remotely.                                                                       

MAIL ME AT mjmuradali31@gmail.com    

OR

DM ME ON INSTAGRAM at @muradalimj (πŸ‘ˆπŸ‘ˆCLICK HERE)

OR

DM ME ON FACEBOOK at Murad Ali (πŸ‘ˆπŸ‘ˆCLICK HERE)

OR

DM ME ON TELEGRAM at @muradalimj (πŸ‘ˆπŸ‘ˆCLICK HERE)

---------------------------------------------------------------------

Connect on My Discord Server: CLICK HERE

---------------------------------------------------------------------

THANK YOU:)

CODE WITH MURAD


Post a Comment

2 Comments