STRIPE_PUBLIC_KEY

STRIPE_SECRET_KEY

Gain insights into building a full-stack e-commerce app using Java, Spring Boot, and Vue.js. Delve into secure user profiles, inventory management, and the Stripe payment integration for online businesses.

Let’s Develop an E-Commerce Site Using Java and Springboot_468 x 60 copy 2.png

docker.tar.gz

vue.js

java

java-mysql

Stripe

Every business is moving online. Building customer-facing e-commerce solutions requires full-stack development, involving a backend to handle users, inventory, and payments, and a frontend for customers.

In this course, you’ll build a full-stack e-commerce application from scratch. We will use Java and the Spring Boot environment to create a robust backend supporting payments with the Stripe API. The backend will have an inventory administration panel, support secure user profiles, and checkout.

For the frontend, you’ll use Vue.js to create a customer-facing application. Users will be able to view products, create wish lists, manage their cart, and checkout using Stripe to complete payments. User profiles will also store order history.

At the end of this course, you will be able to create a full-stack e-commerce application. Your knowledge of Java, Spring Boot, and Vue.js will enable you to drive development for the emerging generation of online businesses.

Develop an E-Commerce App Using Java, Spring Boot and Vue.js

We have already configured the backend of this app using Spring Boot. Next, we’ll look at the front-end.


# Vue project creation

If you want to set up the project in your local machine and you already have npm set up on your computer, you can run the following command to start a Vue project. We’ve already set everything up, so go ahead and run the following command in the terminal widget below.

```
> vue create ecommerce-ui
```





The command should work properly as long as we already have Vue CLI installed. Next, it will ask for some project configurations. We’ll provide the following data for configuring our front-end Vue application.

We’ll choose the “Vue 3” option. 

After confirming all the details, we’ll have a project folder created for us by Vue CLI.

The best way of checking whether the project has been correctly created is to run the project. Go to the project folder and give the following command to run the application:
```
> npm run serve
```

After the application has launched, we can open it in browser. The response should be something similar to the output, as shown below:

Learn how to set up a Vue project for the e-commerce application.

Introduction and Project Setup

Building Admin Panel: Backend

Building an Admin Panel: Frontend

Displaying the Products and Categories For Customers

Sign-Up and Login Backend

Sign-Up and Login Frontend

Wishlist and Cart Feature: Backend

Wishlist and Cart Feature: Frontend

Stripe Integration

Order History: Backend

Order History: Frontend

Conclusion

Get Started with Front-end (Vue.js)

Vue project creation