watch the complete video on youtube
E-commerce Online Shopping Project using React JS + Spring Boot + MySQL
An 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 only authenticated users (Admin, 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 Orders, 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.
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.
Customers can also delete the Product from the Cart by clicking on the delete button in front of the Product.
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 the 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.
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.
Other practical projects using React & Spring Boot
1) Employee Management System using Spring Boot Microservices & React.
2) Hospital Management System using Spring Boot & React.
3) Online Bike Service Booking System using Spring Boot & React.
4) Gym Management System using Spring Boot & React.
5) Train Ticket Booking System using Spring Boot Microservices & React.
6) Hotel Booking System using Spring Boot & React.
7) Task Management System Project using Spring Boot & React.
8) Turf Booking System Project using Spring Boot & React.
9) Online Banking System using Spring Boot & React.
10) Airline Reservation System using Spring Boot & React.
11) E-Commerce Multi-Vendor Shopping System using Spring Boot & React
12) Multi Vendor Online Food Ordering Project using Spring Boot & React.
13) Online Job Portal using Spring Boot & React.
14) Courier Management System Project using Spring Boot & React.
15) Online Bidding System Project using Spring Boot & React.
16) Online Exam Portal Project using Spring Boot & React.
Students can use this project for learning and can submit the project for their final year or Internship projects.
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.
Or You can simply Request for the Project Source Code & Set Up by clicking on the below button.
MAIL ME AT codewithmurad@gmail.com
DM ME ON INSTAGRAM at @codewithmurad
DM ME ON FACEBOOK at @codewithmurad
DM ME ON TELEGRAM at @codewithmurad
Connect on My Discord Server: CLICK HERE
.png)
2 Comments
Awesome project!
ReplyDeleteThank you:)
Delete