CRUD Angular + Spring demonstrating Has-Many relationship, with tests.
This API is to showcase, especially for beginners, what a basic CRUD API that's close to being Production-ready looks like.
- Java 21
- Spring Boot 3 (Spring 6)
- Maven
- JPA + Hibernate
- MySQL
- JUnit 5 + Mockito (back-end tests)
- Angular v18
- Angular Material
- Karma + Jasmine (front-end tests)
- ✅ Java model class with validation
- ✅ JPA repository
- ✅ JPA Pagination
- ✅ MySQL database (you can use any database of your preference)
- ✅ Controller, Service, and Repository layers
- ✅ Has-Many relationships (Course-Lessons)
- ✅ Java 17 Records as DTO (Data Transfer Object)
- ✅ Hibernate / Jakarta Validation
- ✅ Unit tests for all layers (repository, service, controller)
- ✅ Test coverage for tests
- ✅ Spring Docs - Swagger (https://springdoc.org/v2/)
- Security (Authorization and Authentication)
- Caching
- Data Compression
- Throttling e Rate-limiting
- Profiling the app
- Test Containers
- Docker Build
- ✅ Angular Standalone components (Angular v16+)
- ✅ Angular Material components
- ✅ List of all courses with pagination
- ✅ Form to update/create courses with lessons (has-many - FormArray)
- ✅ View only screen
- ✅ TypedForms (Angular v14+)
- ✅ Presentational x Smart Components
- 🚧 Unit and Integration tests for components, services, pipes, guards
Main Page with Pagination
Form with One to Many (Course-Lessons)
View Page with YouTube Player
You need to have Java and Maven installed and configured locally.
Open the crud-spring project in your favorite IDE as a Maven project and execute it as Spring Boot application.
You need to have Node.js / NPM installed locally.
- Install all the required dependencies:
npm install
- Execute the project:
npm run start
This command will run the Angular project with a proxy to the Java server, without requiring CORS.
Open your browser and access http://localhost:4200 (Angular default port).
ng update
Then
ng update @angular/cli @angular/core @angular/cdk @angular/material @angular/youtube-player --force