A Complete Guide on How to Develop an E-Commerce Platform
Tags: ecommerce, frontend, backend, vue
Published: 2021-04-23 15:34:44


## A Complete Guide on How to Develop an E-Commerce Platform

We will build an Ecommerce Platform from Scratch using Vue.js and Spring Framework

![Photo by [Mark König](https://unsplash.com/@markkoenig?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/7680/0*MAzqA6vuxXqSdlZn)

In this course, you will learn how to build an e-commerce platform from scratch. First, you have to be familiar with **Java** and **Springboot**, which we will use to build the backend and **Vuejs** for the frontend.

You can test the application [here](http://remotedevs.org:8000/).

## Live Demo
> # Frontend
> # [*https://github.com/webtutsplus/ecommerce-vuejs](https://github.com/webtutsplus/ecommerce-vuejs)*
> # [https://simplecoding-ecommerce.netlify.app/](https://simplecoding-ecommerce.netlify.app/)
> # *Backend*
> # [https://github.com/webtutsplus/ecommerce-backend](https://github.com/webtutsplus/ecommerce-backend)
> # [*https://limitless-lake-55070.herokuapp.com/swagger-ui.html](https://limitless-lake-55070.herokuapp.com/swagger-ui.html)*

## 1. Admin Panel: Add Product and Categories
> # Every e-commerce app need products organised into categories

So now let’s add the products and categories section to our app

In this tutorial, we will display the products and the categories of various products in our app.

Clicking on a particular product will show its details and also the options for buying it, adding to the cart, and adding to the wishlist section.

![](https://cdn-images-1.medium.com/max/3840/1*mvst-MKp0V46vHVhOcYrZA.png)

![](https://cdn-images-1.medium.com/max/3840/1*PWPnjSpx-sWh2FtuzG8psQ.png)

### Backend
{% youtube MgOJmWMSTuQ %}[**Let’s Develop an E-Commerce Application From Scratch Using Java and Spring**](https://medium.com/javarevisited/lets-develop-an-e-commerce-application-from-scratch-using-java-and-spring-a921f448a93b)
{% youtube wh3mDFB7OFg %}
you can watch product api’s video here.
{% youtube hUXfesLKl88 %}
**Frontend for Product**
[**Let’s Develop an E-Commerce Application From Scratch Using Spring Boot and Vue.js**](https://javascript.plainenglish.io/lets-develop-an-e-commerce-application-from-scratch-using-spring-boot-and-vue-js-aca33bd76517)
{% youtube PDDXAztk6xg %}
**Image upload service**

![](https://cdn-images-1.medium.com/max/3840/1*4QT6x8_RAuI6EPDj1ZFJbA.png)

We will develop a file upload service, which will be used for image upload in our e-Commerce App using [Java Spring Boot](https://medium.com/javarevisited/top-10-courses-to-learn-spring-boot-in-2020-best-of-lot-6ffce88a1b6e)
[**How to Develop File Upload Service From Scratch Using Java and Spring Boot**](https://medium.com/javarevisited/how-to-develop-file-upload-service-from-scratch-using-java-and-springboot-3a442f4636d5)

## 2. Building Authentication (sign up & sign in)

In this tutorial, we will learn how to implement authentication of users.

![](https://cdn-images-1.medium.com/max/3840/1*Gb5jayMkZVqbJxciazRvxQ.png)

![](https://cdn-images-1.medium.com/max/3840/1*7iQgGOZHdKbD2ibLWflx6Q.png)

**Backend**
[**Develop SignUp and Login for E-Commerce App using Java and Spring Boot**](https://medium.com/javarevisited/develop-signup-and-login-for-e-commerce-app-using-java-and-spring-boot-651f4aad6293)

### Frontend
[**Creating an eCommerce Frontend with Vue.js**](https://javascript.plainenglish.io/creating-an-ecommerce-frontend-with-vue-js-c64481a65941)

## **3. Building Front end for Customers**

After building the admin panel, now we are going to show products to customers.
[**Let’s Build an E-Commerce App Frontend with Vue.js**](https://javascript.plainenglish.io/lets-build-an-e-commerce-app-frontend-with-vue-js-8eb088f421a7)

## 4. Adding a Wishlist Feature

In this tutorial, we will implement the feature for saving the products not in the cart but in the wishlist section.

![](https://cdn-images-1.medium.com/max/3840/1*R7tNhueWTZF9Ui9hrxvOtg.png)
[**Let’s Add WishList Feature for Our e-Commerce App using Java and Spring Boot**](https://medium.com/javarevisited/lets-add-wishlist-feature-for-our-e-commerce-app-using-java-and-spring-boot-1402c0b6f1e8)
[**Creating an eCommerce Frontend with Vue.js**](https://javascript.plainenglish.io/creating-an-ecommerce-frontend-with-vue-js-71d7fc1ee756)

## 5. Shopping Cart Feature

In this tutorial, we will implement the important feature of any e-commerce app i.e shopping cart.

![](https://cdn-images-1.medium.com/max/3840/1*ZTn34nkvWJrsROQXZ6dyKg.png)
[**Let’s Develop Shopping Cart for eCommerce App**](https://medium.com/javarevisited/lets-develop-shopping-cart-for-ecommerce-app-8e57a9ab4868)
[**Let’s add a Shopping Cart Feature in Vue.js for Our Ecommerce App**](https://javascript.plainenglish.io/lets-add-a-shopping-cart-feature-in-vue-js-for-our-ecommerce-app-ae0cc65374ff)

## 6. Checkout using Stripe

In this tutorial, we will implement yet another important feature of any e-commerce app i.e. payment method

![payment page provided by Stripe](https://cdn-images-1.medium.com/max/2582/1*4_kZHAnOX9nWof4q4o1MGg.png)
[**Let’s add a Checkout feature in Spring Boot for our Ecommerce App**](https://medium.com/javarevisited/lets-add-a-checkout-feature-in-spring-boot-for-our-ecommerce-app-72b12a7f3648)
[**Let’s add a Checkout Feature in Vue.js for Our Ecommerce App**](https://medium.com/dev-genius/lets-add-a-checkout-feature-in-vue-js-for-our-ecommerce-app-84b5fc2df17a)

## 7. Place Order and Order History Feature

Next Step, we will implement the feature for placing the order and displaying the order history of a particular user.

![](https://cdn-images-1.medium.com/max/3840/1*AYyrs-qcYovXS2BnzZsmhw.png)

![](https://cdn-images-1.medium.com/max/3840/1*v9eAP2EFKZsEDXFZKGt48A.png)
[**Let’s add the Place Order feature to our E-commerce app using Spring Boot**](https://medium.com/javarevisited/lets-add-the-place-order-feature-to-our-e-commerce-app-using-spring-boot-1a16925be0bf)
[**Let’s Place Order and See Order History in E-commerce app using Vuejs**](https://medium.com/webtutsplus/lets-place-order-and-see-order-history-in-e-commerce-app-using-vuejs-1a8117318df)

## If you are only interested in backend APIs then follow these
[**Let’s develop an Ecommerce Application from Scratch using Java and Spring**](https://medium.com/javarevisited/lets-develop-an-ecommerce-application-from-scratch-using-java-and-spring-6dfac6ce5a9f)
[**Let’s Add WishList Feature for Our e-Commerce App using Java and Spring Boot**](https://medium.com/javarevisited/lets-add-wishlist-feature-for-our-e-commerce-app-using-java-and-spring-boot-1402c0b6f1e8)
[**Let’s Develop Shopping Cart for eCommerce App**](https://medium.com/javarevisited/lets-develop-shopping-cart-for-ecommerce-app-8e57a9ab4868)
[**Let’s add a Checkout feature in Spring Boot for our Ecommerce App**](https://medium.com/javarevisited/lets-add-a-checkout-feature-in-spring-boot-for-our-ecommerce-app-72b12a7f3648)
[**Let’s add the Place Order feature to our E-commerce app using Spring Boot**](https://medium.com/javarevisited/lets-add-the-place-order-feature-to-our-e-commerce-app-using-spring-boot-1a16925be0bf)

## For Frontend (Web) tutorials follow these
[**Let’s Create a Frontend for our eCommerce App with Vue.js**](https://nilmadhab.medium.com/lets-create-vue-js-frontend-for-products-in-our-e-commerce-app-14cc8c3459c8)
[**Let’s Create A Vue.js E-Commerce App**](https://medium.com/webtutsplus/lets-link-product-with-category-for-our-ecommerce-app-28100657a848)
[**Let’s Add Products for Our eCommerce App Using JavaScript**](https://medium.com/webtutsplus/lets-add-products-for-our-e-commerce-app-using-javascript-829f36b8571a)
[**Creating an eCommerce Frontend with Vue.js**](https://javascript.plainenglish.io/creating-an-ecommerce-frontend-with-vue-js-71d7fc1ee756)
[**Let’s add a Shopping Cart Feature in Vue.js for Our Ecommerce App**](https://javascript.plainenglish.io/lets-add-a-shopping-cart-feature-in-vue-js-for-our-ecommerce-app-ae0cc65374ff)
[**Let’s add a Checkout Feature in Vue.js for Our Ecommerce App**](https://medium.com/dev-genius/lets-add-a-checkout-feature-in-vue-js-for-our-ecommerce-app-84b5fc2df17a)

## For Android tutorials follow these
[**Android UI for E-Commerce User Profile backend**](https://medium.com/webtutsplus/android-ui-for-e-commerce-user-profile-backend-4053ab122a13)
[**Let’s Add Products in Android for E-Commerce App**](https://medium.com/webtutsplus/lets-add-products-in-android-for-e-commerce-app-b8468e055001)