Build Fullstack Apps with VueJS3 Springboot3 Bootstrap5

Name: Build Fullstack Apps with VueJS3 Springboot3 Bootstrap5
Rating: 4.5 (27 reviews)

Become fullstack developer by building real world projects using VueJS-3, Springboot-3 and Bootstrap-5

Created byRanjan Pandey

Last updated 1/2024

English

What you'll learn

You will learn about the concepts of VueJS 3
You will learn about the concepts of Springboot API development
You will develop a complete frontend using Bootstrap 5 and VueJS 3
You will develop REST API using Springboot 3 and Maven and Java 17
You will learn to use Postman tool
You will learn to integrate the VueJS app with Springboot REST API
You will learn about debugging and troubleshooting techniques.
You will get the complete source code

Course content

4 sections • 69 lectures • 4h 12m total length

Course Introduction3:10
About your Instructor0:18
Installing Nodejs and VS Code Editor1:57
Installing Vue CLI1:47
Creating new VueJS-3 app1:15
Run and access the app via browser1:26
Installing the npm dependencies1:37
Installing Java and IDE1:55
Install the JDK (Java 17 minimum for Spring Boot 3) and set the classpath, then download and install the IntelliJ IDEA Community Edition to begin Java development.
Installing Postman Tool1:14
Discover how to use Postman to test rest APIs by simulating get, post, put, and delete requests; install Postman and begin testing your Spring Boot or other tech stacks.
Installing MySQL Database Server1:52
Install Xampp to run MySQL server and access databases via phpMyAdmin on localhost. Start Apache and MySQL from the control panel to create databases.
Creating SpringBoot project with required dependencies2:57

Importing Project to IDE and Setting JDK3:34
Adding H2 Database Spring Data JPA configuration3:30
Creating the JPA Entity class with different fields7:41
Creating the DTO class for presentation layer2:17
7.0-Layered architecture and various packages1:55
Creating the Repository Interface2:47
Creating Controller class3:01
Developing POST API Endpoint5:44
Create a post /api/items endpoint in a Spring Boot controller that accepts JSON with @RequestBody, saves to the database, and returns 201 with the created item.
Developing the GET All API endpoint2:28
Developing GET Detail API Endpoint1:55
Developing UPDATE API Endpoint0:55
Developing DELETE API and PathVariable VS RequestParam5:18
Implement a delete endpoint with delete mapping, exploring path variable versus request param for ids, and return appropriate http status or void response after deletion.
Return 204 as status code after deletion1:41
Return a 204 no content status after deletion, or 200 in the 200s, to avoid 400 errors and keep the front end in the success callback.
Developing PATCH API Endpoint2:11
Declaring the Service Layer Abstract Methods5:07
Adding Service Impl methods and Integration with Controller4:36
Saving the Data into the Database using Repository5:58
Getting All Data From the Database using Repository3:45
Fetch all items via item repository.findAll, convert entities to item DTOs in a for loop, and return the item DTO list with memory safety by creating the DTO outside loop.
Get Detail from Database using Repository2:16
Retrieve an item by id from the repository, handle the optional result, copy properties to an item dto, set the id, and return it.
Full Update in Database using Repository4:00
Partial Update in Database using Repository2:36
Delete data from Database using Repository0:47
Implement Search functionality End to End4:37
Test CREATE and GET ALL API with POSTMAN Tool5:01
Setting Postman Variable and Testing GET Detail API6:44
Testing Search API2:23
Testing Full Update, Partial Update and Delete API3:39
Code Improvement to avoid returning null response1:45
Creating Converter to make code reusable6:01
Create an item converter to transform item entities to DTOs, inject it as a singleton component, and reduce duplicated code across the service layer.
Testing the complete functionality2:43
Create Database on MySQL DB Server1:18
Profiles in Springboot, Setup MySQL DB Profile3:39
Concept of Spring Profile1:22
Explore spring profiles to manage multiple environment configurations with a single codebase. Activate dev, local, test, acceptance, or production profiles to load the appropriate property file and start the app.
Testing All APIs with MySQL Database1:36
Enabling CORS2:13

Vue JS understanding app flow and folder structure4:39
Understanding details of a Vue component and installing Vue VS code extension2:13
Creating env file for storing configuration3:12
Creating all the Vue Components2:33
Create vue components for a generic item app, including create, update, items overview, and item detail views in a pages folder with title, description, ID, created at, updated at fields.
Updating main.js with app level configuration5:07
Adding routing to our app3:36
Updating App.vue component1:49
Developing a reusable Layout Container3:37
Adding Skeleton Code to all the pages4:11
Design the items overview skeleton using a shared layout container, import a component, and scaffold create item, item detail, and update item in a VueJS3 Springboot3 Bootstrap5 full-stack app.
Styling Items Overview Page8:45
Making GET API call to fetch all items9:47
Debugging and solving the base url issue in axios4:40
Looping All Items in Vue Template3:45
Making Delete API call with Alert message for different scenarios9:24
Updating template to add delete button and test the delete functionality7:00
Update template with markup for Edit and Detail item functionality2:31
Add router links for edit and detail pages in the action column, using the item id in the url and outline buttons, and plan the edit and detail components.
Working on template of item detail page4:39
Making GET API call to fetch Item Detail10:45
Mapping the API response to data fields of the component2:33
Working on the Create Item template7:48
Implementing POST API call to create new item and testing the functionality6:25
Implementing PUT API call to update item and testing the functionality7:14

Requirements

Basics of HTML, CSS, JavaScript and Java

Description

In this course you will learn to develop fullstack applications using VueJS-3, Springboot-3, Bootstrap-5 and MySQL.

You will learn to troubleshoot and debug end to end and fix issue.

You will also get the complete source code.

Full-stack development with Vue.js and Spring Boot combines the robust backend capabilities of Spring Boot with the dynamic frontend features of Vue.js, offering a comprehensive solution for building modern, scalable web applications. Vue.js, a progressive JavaScript framework, simplifies the development of interactive user interfaces by enabling developers to create reusable components and efficiently manage state.

On the server side, Spring Boot provides a powerful and flexible Java-based framework for building RESTful APIs and handling backend logic. Its convention-over-configuration approach and seamless integration with various data sources make it an ideal choice for building scalable and maintainable server-side applications.

The integration of Vue.js and Spring Boot fosters a seamless flow of data between the frontend and backend, ensuring a responsive and efficient user experience. Vue.js allows developers to create dynamic views, while Spring Boot handles the server-side processing, resulting in a well-organized and modular codebase.

Moreover, the combination of these technologies facilitates rapid development and deployment cycles, making it easier for teams to iterate on features and respond to changing requirements. With Vue.js and Spring Boot, developers can leverage the strengths of both frameworks to create robust, scalable, and feature-rich web applications that meet the demands of modern software development.

Who this course is for:

Anyone who wants to develop fullstack applications using Vue and Springboot

Build Fullstack Apps with VueJS3 Springboot3 Bootstrap5

What you'll learn

Explore related topics

Course content

Introduction, Installation and Setup11 lectures • 19min

Developing Springboot 3 based REST API35 lectures • 1hr 57min

Developing the VueJS-3 based Frontend & Integrating with Springboot REST API22 lectures • 1hr 56min

Source code1 lecture • 1min

Requirements

Description

Who this course is for: