Build Fullstack Apps with VueJS3 Springboot3 Bootstrap5

Import the project into IntelliJ, let it scan and download dependencies, enable Lombok, set the JDK in project structure, and run the Spring Boot main class on port 8080.

Configure the h2 database in application.properties, using a file-based store, enable the h2 console, preserve data across restarts, and show sql queries via the Hibernate dialect.

Create an item entity class mapped to the items table using JPA annotations like @Entity and @Table, with id, title, description, created_at, and updated_at fields, plus Lombok getters.

Create a dedicated dto package and define an item dto mirroring the entity fields, then use lombok getters and setters to transfer data to the presentation layer via the controller.

Explore a layered architecture with controller, service, and repository packages in a Spring Boot app, using Spring Data JPA to connect entities with the database and prepare API endpoints.

Create an item repository interface by extending Spring Data JPA's JpaRepository for the item entity with a long primary key, gaining methods like save, find all, and find by id.

Create a Spring Boot rest controller using @RestController and @RequestMapping to expose get, post, put, and delete endpoints, following one controller per entity with its service, repository, and dto.

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.

Develop a get all api endpoint in spring boot by returning a ResponseEntity<List<ItemDTO>> for /items using @GetMapping and 200 ok status. Note how identical urls with different methods avoid ambiguity.

Develop a get detail API endpoint by passing a long id as a path variable and returning a single item. Expose the endpoint at api/item/{id} for retrieving details.

Develop the update api endpoint by using a put mapping, naming it update item, and passing it to the service layer to update and return the updated item.

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 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.

Explore patch mapping for partial updates, updating a single field like title or price using an item id. Distinguish patch from full update via put and return the updated item.

Create the service layer as the business layer by defining an Item Service interface and its implementing class with abstract methods for add, all, detail, update, patch, and delete.

Implement the item service interface as a Spring singleton bean, inject it into the controller, and use it to add, get all, get detailed, update item title, and delete items.

Integrate the item repository into the item service, autowire the repository, convert item DTOs to entities with copy utilities, and save to the database, returning a DTO with generated IDs.

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.

Retrieve an item by id from the repository, handle the optional result, copy properties to an item dto, set the id, and return it.

Implement a full update in the database using a repository. Locate the item by id, update all fields from the item DTO, set the update timestamp, and save the entity.

Update only the title field in the database using a repository-based partial update. The video shows using a DTO or string input, and defining controller and service methods.

Delete an item from the database using the repository's delete by id method. Explore related repository operations like find by id, count, and exists, with a void return.

implement end-to-end search functionality for items by title and description, adding a new api endpoint, a custom repository query, and controller-service-repository wiring to return matching results.

Test create and get all items APIs using postman by building a collection, posting json to localhost:8080/api/items, and retrieving all items.

Create a test environment and a base_url variable in Postman, then use it to test the get detail api endpoint with an id and save the request.

Test the api endpoints for creating, getting all items, getting detailed items, and searching by title using case sensitive queries to find items like Java and Spring Boot.

Test get endpoints and demonstrate full update, partial update, and delete APIs by updating item 102 to Java updated, then deleting item 103 and confirming the remaining item.

Apply JSON ignore unknown properties to drop extra fields and return only non-null fields in responses, reducing bandwidth.

Create an item converter to transform item entities to DTOs, inject it as a singleton component, and reduce duplicated code across the service layer.

Test and verify a full CRUD API with Java Spring Boot, creating, reading all, updating (partial and full), searching, and deleting items, using Postman for end-to-end validation.

Open phpmyadmin from the control panel to access the mysql database server and create databases for the project. Connect the application to this database in the next video.

Configure Spring Boot profiles to switch between local and dev database configurations with application-local.properties and application-dev.properties, connect to MySQL, and verify data in both environments.

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.

Use postman to test all apis against a MySQL database by creating, retrieving, updating, and deleting records; spring boot builds rest apis and spring data jpa connects without query writing.

Configure CORS in the backend by allowing origins or using a wildcard so front-end apps like React.js and Next.js and mobile apps can call your API.

Learn how a Vue.js app runs with npm run serve and mounts to the #app element, rendering app.vue and Hello World, while reviewing folder structure from node_modules to src components.

Explore the structure of a Vue.js component with template, script, and style sections, and learn how to install the Vue language features extension in VSCode to enable syntax highlighting.

Create a root level .env file to store configurations, including api base url set to localhost:8080, place it at the app level, and add it to gitignore to prevent commits.

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.

Configure main.js by importing axios, bootstrap, router, and page components, and set axios defaults from process.env; explore an axios interceptor for request headers as you prepare to implement routing.

Add routing to the Vue app by creating a router with createRouter and createWebHistory, defining routes for home, create item, update item with id, and item detail, then mount it.

Update app.vue by clearing its template, adding a div with an id and a router-view to render routed components, and define the component name in the script export default.

Create a reusable layout container component for all pages, using a template with a div.container and a slot to replace markup, then export default layout container.

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.

Style an items overview page with Bootstrap layout, a centered header, a card header with a create item link, and a bordered table for title, description, and actions.

Learn to fetch all items from an API using axios in a Vue.js app, managing items in an array and handling errors in the created hook.

Debug base URL issues in axios by editing environment variables and restarting the dev server with npm run serve. Use console logs and axios defaults base URL to verify data.

Loop through items in a Vue template using v-for, bind each item's id as a key, and render title and description from the backend API in a table.

Learn to implement delete functionality with a confirmation alert using a pop-up module, perform an Axios delete call to remove the item, handle responses, and refresh the list.

Update the template by adding a delete button in the third column and wiring a Vue.js click event to pass the underscore ID to delete item.

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.

Build the item detail component in the Vue app by composing a card with header and body, displaying title, description, and timestamps, and wiring the router to the all-items route.

Fetch item detail via a GET API with axios in a Vue 3 component, pulling id from route params and updating title, description, and updated at; use sweet alert for notifications.

Map the API response to the component's data fields by using item fields such as item.title when nested, and adopt a spawn data = item approach to populate fields automatically.

Creates a create item template with a bootstrap form for title and description, bound to item.title and item.description via v-model, including a submit button disabled while submitting.

Implement a post request with axios to create a new item in a Vue.js app, manage submitting state, handle response with a success message, reset inputs, and test the flow.

Implement a PUT update flow in a VueJS3 fullstack app by reusing the create pattern, passing item id, pre-populating data, testing with postman, and confirming updates via the backend API.