- Eduardo Cristóbal
- Linkedin: https://www.linkedin.com/in/ecristobale
- GitHub: https://github.com/ecristobale
- Email: Eduardo Cristóbal - email
The goal of this project is to provide a starter kit for a fullstack web application using latest versions: Spring Boot 3 and Angular 17+ . There are some subprojects:
- Main project: users fullstack application
- Other Angular applications:
- a cart Angular 17 webapp with angular routes and redux.
- a redux (NgRx) Angular 17 basic webapp.
- a cart Angular 17 webapp with angular routes.
- a cart Angular 17 webapp (old version). With modal.
- an invoice Angular 17 webapp. Actions such as adding and deleting elements.
- a tutorial Angular 17 webapp with the basics elements: angular-tutorial.
USERS FULLSTACK APPLICATION (SPRING BOOT 3, ANGULAR 19)
Frontend: ANGULAR 19 (17+) - Frontend: ANGULAR 19 (17+) (WITH REDUX)
Project generated with Angular CLI version 19.1.8. Project that uses:
- Components: passing data between components and subcomponents via @Output() and @Input() annotations.
- Angular routes: passing data between components via angular routes:
<a [routerLink]="['/mypath']" [state]="{objectData1, objectData2}"and retrieving this data from the destiny component with Router:this.router.getCurrentNavigation()?.extras.state!['objectData1']and also with ActivatedRoute for request params:path/:myId. - Services: from which they emit an event by using EventEmmiters and data could be passed by subscribing to these events.
- HttpClient: for connecting to api, expecting an observable Object.
- Pagination: with a subcomponent and by using Bootstrap version 5.3 and Angular Routes to transfer page, totalPages and some metainfo retrieved from backend api.
- Working with dates (Timestamp) using Angular Material with DatePicker.
- Angular guards for managing roles and access to views.
- Angular interceptors for adding security token to api requests.
- Customized Alert messages with SweetAlert2 library.
- Html class styles with Bootstrap version 5.3.
- Used new @If and @else instead of angular directives ngIf and ngFor.
- Used redux (ngrx) store for managing actions that implies changes on the app state. Used redux store actions, reducer and effects. Implemented on this angular project
Run ng serve for a dev server. Navigate to http://localhost:4200/.
Backend: SPRING BOOT 3
Spring boot starter. Project that uses:
- Normal Spring Boot components: (Rest)Controller, Service, Repository, Entity mapped to DB tables and columns.
- Validations for entity with Hibernate Validations.
- Pagination with Pageable object.
- Spring Security JWT (JSON Web Token)
- H2 in memory DB: with schema.sql and data.sql for configuration.
- Api links and OK and error responses tested with Postman (collection file added to the project).
Users view:
Login:
Login Error (Authentication failure):
Users view - ROLE_ADMIN:
Users view - ROLE_USER:
Forbidden 403 Denied source access - ROLE_USER:
Create user form:
User created alert:
Form update user:
Remove user confirm alert:
Angular 19 Code 1:
Angular 19 Code 2:
Angular 19 Code 3 (redux):
Spring Boot 3 Code:
Postman collection:
ANGULAR-CART (angular routes, NgRx)
Project generated with Angular CLI version 17.3.12. Project that uses angular NgRx for managing app actions by using store and effects. Alert messages with SweetAlert2 library. Styles with Bootstrap version 5.3.
Run ng serve for a dev server. Navigate to http://localhost:4200/.
ANGULAR-NGRX (Redux)
Project generated with Angular CLI version 17.3.12. Redux project that is configured to manage counter actions (increment, decrease, reset) by using store actions with props and reducer.
Run ng serve for a dev server. Navigate to http://localhost:4200/.
NgRx code:
ANGULAR-CART (angular routes)
Project generated with Angular CLI version 17.3.12. Project that uses angular routes for using its basic components such as [routerLink], [state] for passing elements, to display path elements. It is also created a service for emit and subscribe info for passing data across the components. It is also used sessionStorage for maintaining the elements in the Shopping Cart. Alert messages with SweetAlert2 library. Styles with Bootstrap version 5.3.
Run ng serve for a dev server. Navigate to http://localhost:4200/.
Catalog component:
Alert element added to Shopping Cart:
Alert displayed when trying to delete an item from Shopping Cart:
Alert element removed from Shopping Cart:
Shopping Cart component:
Code about angular routes and subscribing to an event:
ANGULAR-CART (OLD)
Project generated with Angular CLI version 17.3.12. The project is structured in one component that has some subcomponents, some of them has another subcomponents. It can be saw how the data is passed across the components in either directions. Actions such as adding and deleting elements filling a Shopping Cart that can be displayed as a hidden div or as a modal by clicking on the navbar. Values of Shopping Cart remains stored by saving them on sessionStorage. Styles with Bootstrap version 5.3.
Run ng serve for a dev server. Navigate to http://localhost:4200/.
Components created:
Cart app:
Shopping Cart displayed in Modal:
Shopping Cart hidden in Div:
Project generated with Angular CLI version 17.3.12. Contains one entity formed by some others, each one of this in one component. In this project it can be see how data is passed among the components. Actions such as adding and deleting elements of a dynamic list as well as form validation with customized messages. Styles with Bootstrap version 5.3.
Run ng serve for a dev server. Navigate to http://localhost:4200/.
Small and simple project generated with Angular CLI version 17.3.12. Contains basic elements such as components, services, methods like OnInit and Constructor and actions such as passing data between parent component and his child. Alternative and new way with @for, @if and @else instead of *ngIf, ng-template and *ngFor. Styles with Bootstrap version 5.3.
Run ng serve for a dev server. Navigate to http://localhost:4200/.
