Fullstack Development with Angular17 SpringBoot3 Bootstrap5

Install XAMPP to run a local web server stack with Apache, MySQL, and PHP, then start Apache and MySQL and access phpMyAdmin at localhost to manage and create databases.

Create a spring boot 3.2.1 project from start.spring.io using java 17, maven, jar packaging, and dependencies (web, Lombok, Spring Data JPA, H2, MySQL), then import into your IDE.

Import and open the project in IntelliJ, let Maven dependencies download, set the JDK, enable Lombok, then run the Spring Boot app on port 8080 with embedded Tomcat.

Explore layered architecture by creating controller, service, and repository packages in a spring boot app. See how controllers connect rest api endpoints to services and repositories to the database.

Develop a post API endpoint in Spring Boot to create items at /api/items, using @RequestBody to map JSON to an item DTO and return a 201 response with ResponseEntity.

Develop the get all api endpoint that returns a list of item dtos in a response entity with status 200 using a get mapping at /items.

Develop the update api endpoint by configuring a put mapping, passing the item to the service layer to perform the update, and returning the updated item.

Learn how patch mapping supports partial updates of a single field, such as title or price, using item DTOs and id-based lookup, versus full updates with put.

Implement item service methods and integrate with the controller using a Spring bean and autowired service to support add, get all, get detail, update, and delete item with DTO.

Fetch an item by id from the repository, handle the optional result, map the entity to a dto with copy properties, and return the item dto.

Perform a full update by locating the item by id, updating all fields from the item DTO, saving the entity, and returning the updated DTO.

Learn to test create and get all items with Postman by configuring a collection, posting to http://localhost:8080/api/items with json data, and validating inserted records.

Improve code by avoiding null responses and ignoring unknown request fields, using json ignore properties unknown and include only non-null fields, applied in the dto layer to reduce bandwidth.

Explore how Spring profiles enable multiple environment configurations in a single source, activating a profile like dev or local to load the right properties and start the application.

Enable cross-origin resource sharing by configuring the backend to allow origins or all clients, preventing browser blocks when frontend apps such as React, Angular, or mobile apps call your API.

Open Angular 17 application in VS Code by running cd, code ., or importing the app; verify the app module appears when using the no standalone flag, and review package.json.

Install Bootstrap, SweetAlert2, and Axios in the Angular project, installing dependencies and updating package.json for future users, then prepare to explore folder structure and files in the next video.

Import bootstrap CSS into the style.css, linking from node_modules, then verify by applying text-primary and text-danger classes to confirm Bootstrap loads.

Create all required components with ng generate component, organizing them under an items folder: overview, create, detail, and edit, each with css html ts and tests.

Learn how to implement create, update, and delete item functions in a service class using axios to a restful web service api, building request data and returning promises.

Implement OnInit in the overview component, inject the item service, call the get all items API, handle the promise with then and catch, and bind data to the items array.

Debugs a runtime error by making the id mandatory in the overview component. Initializes the edit id and assigns incoming data to this.item from data attributes.

Update the detail component in TypeScript to implement the item detail functionality, call the get item detail API, and console log the data before building the UI.