Fullstack Development with Angular17 SpringBoot3 Bootstrap5

Install the Java JDK (Java 17 for Spring Boot 3) and set your classpath, then download and install IntelliJ IDEA Community Edition to start Java development.

Install Postman, then test REST APIs built with spring boot or other tech by simulating get, post, put, and delete requests and verifying endpoints.

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.

Configure h2 database with spring data jpa using application.properties, choose file-based storage, enable console access, and enable sql logging and dialect settings to preserve data.

Define a generic item entity to map to an items table using jpa annotations such as @Entity and @Table. The example shows h2 table creation with created_at and updated_at fields.

Create a dedicated DTO package for the presentation layer, mirror the entity fields in an item DTO, and use Lombok getters and setters to transfer data to the front end.

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.

Create an item repository interface by extending Spring Data JPA's JPA repository, gaining pre-made methods like save, find all, and find by id to manage item entities.

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

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 a get detail api endpoint by implementing a get request with a path variable id, returning a single item from the api at /api/item/{id}.

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.

Explore creating a delete endpoint with path variable and request param in Spring Boot, compare delete mapping versus get, and return not found status after deletion.

Explain why delete operations should return a 204 no content or 200 status, avoiding 400, so the frontend triggers the success callback; demonstrated with Postman deleting an 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.

Create a dedicated service layer with an item service interface and its implementation, defining methods for add, all items, detail, update, patch, and delete in a clean, annotation-free Java setup.

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.

Integrate item repository into the service layer, autowire it, convert the item dto to an entity with copy properties, save to the database, and return the dto with the id.

Implement repository.findAll to fetch all item entities, convert them to item DTOs, and return the list, using a single item DTO instance outside the loop to avoid memory leaks.

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.

Update only the title field in a database record using a repository pattern, demonstrating partial updates via DTO or direct string parameter in controller and service.

Learn how to delete data from the database using a repository by id, with support for find by id, count, and exists, and return void.

Implement end to end search by title in a full stack app, adding a controller endpoint, a service method, and a custom repository query to return items by title.

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.

Set up Postman variables and environments to test a get detail API, configure base_url, save requests, and debug optional data handling to ensure items are found.

Test the search API by querying items by title, verify case sensitivity, and resolve issues with quotes; confirm results when using titles like Spring Boot or Java.

Test get endpoints, perform a full update on item 102 to Java updated, then apply a partial update to the title and delete item 103, verifying the remaining items.

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.

create a reusable item converter to transform entities to dtos. Extract repeated mapping logic into a converter component and inject it in the service layer to reduce code duplication.

Explore testing complete functionality by building and verifying create, get all, partial update, full update, search, delete, and detail retrieval of a Spring Boot API using Postman.

Open phpMyAdmin from the control panel, access the MySQL server, and create a database for your application (Pretum). The next video shows how to connect your app to this database.

Configure Spring Boot profiles by creating application-dev.properties and local properties to switch between dev and local database configurations, then verify the items table and primary key sequence.

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.

Shows testing all APIs with a MySQL database using Postman to create, read, update, delete, and search, while using Spring Boot and Spring Data JPA to connect without queries.

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.

Generate a new Angular app with routing using ng new and the no standalone flag to enable modules, then select CSS, skip server-side rendering, and open in VS Code.

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.

Explore angular's folder structure, including src, angular.json, main.ts, index.html, and dist; understand modules, components, and single-page app routing that dynamically loads components.

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.

Generate environment files with Angular ng generate environments, configure development and production values, and set the api url to localhost:8080 for backend integration.

Configure the main.ts file by importing axios and the environment, and set axios.baseURL to environment.apiUrl. Use an axios request interceptor to apply headers for every call.

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.

Create a centralized service to handle API calls to the backend RESTful service, avoiding duplicated code across components. Generate the item service with ng generate service item.

Learn how TypeScript enforces type safety in Angular by using interfaces. Generate a new interface named item to model API data with ng generate interface.

build a typed item interface from the rest api by adding fields like underscore id, title, description, created at, and updated at; send only title and description when creating.

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.

Create a separate item module and its routing, generate the module with ng generate, and wire it into the app module to enable item routing.

Declare overview, create, detail, and edit components in the item module, import the common module, the item routing module, and the forms modules, and enable reactive forms for routing configuration.

Learn angular routing for a multi-module item module, with a routing module registered in the app module, and redirects to item overview, details, create, and edit components.

Register a custom module into the app module by importing the item module and removing duplicated component registrations, then organize and register category modules for modular segregation.

Update the app component, declare a container div, and test angular routing by navigating from item overview to item details to verify the full routing flow.

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.

Style the items overview component with Bootstrap by creating a container div, card structure, header links using routerLink for single-page navigation, and a bordered table body in Angular.

Loop the items array in Angular, displaying each item's title and description via interpolation, and enable detail, edit, and delete actions using the item id from the backend api.

Delete item by id with a sweet alert confirmation, warning icon, and cancel option; then refresh list by get all items and handle errors with a 1500 ms auto-dismiss alert.

Implement create item in angular by wiring TypeScript to send title and description via the item service, with an isSubmitting flag, sweet alert on success, and error handling.

Develop create item markup and styling with a Bootstrap card layout, including a container, a header link to all items, and a form bound to ngModel for title and description.

Create an item named testing, submit, and verify the item is created. Delete the item, then create another to confirm the create‑and‑delete workflow.

Implement edit item functionality in Angular by creating an item field, using route params to fetch item details with a detail service, and debugging with logs and network checks.

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.

Implement the update item feature in an Angular17 component by reusing create logic, calling the service's update item method, handling response data, and displaying item updated successfully.

Learn to implement the edit item HTML by reusing the create item markup, updating title and description, and ensuring the id is set for updates; include debugging steps.

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.

Build the item detail html with Bootstrap cards to display title, description, created at, and updated at, binding data from the backend api and supporting create, update, and delete flows.