Skip to content

🖥 CRUD Angular + Spring demonstrating Has-Many relationship, including tests for the back-end and front-end

License

Notifications You must be signed in to change notification settings

loiane/crud-angular-spring

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

REST API with Spring Boot and Angular

Build

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.

💻 Tecnologies

  • 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)

⌨️ Editor / IDE

  • Visual Studio Code
  • Java Extensions link
  • Angular Extensions link

Some functionalities available in the API

  • ✅ 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/)

Not implemented (maybe in a future version)

  • Security (Authorization and Authentication)
  • Caching
  • Data Compression
  • Throttling e Rate-limiting
  • Profiling the app
  • Test Containers
  • Docker Build

Some functionalities available in the front end

  • ✅ 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

Screenshots

Main Page with Pagination

Main Page

Form with One to Many (Course-Lessons)

Form Page

View Page with YouTube Player

View Page

❗️Executing the code locally

Executing the back-end

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.

Executing the front-end

You need to have Node.js / NPM installed locally.

  1. Install all the required dependencies:
npm install
  1. 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).

Upgrading Angular

ng update

Then

ng update @angular/cli @angular/core @angular/cdk @angular/material @angular/youtube-player --force