• Stars
    star
    106
  • Rank 325,871 (Top 7 %)
  • Language
    Java
  • License
    Apache License 2.0
  • Created about 7 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

This is an example application to show howto use Spring Boot 3, Angular 18, Kafka with Streams and Mongodb with the reactive features of Spring in a clean architecture and a Helm chart for the Kubernetes setup. Structurizr is used for C4 diagrams.

This is an example application to show howto use Spring Boot, Angular and Mongodb with the reactive Webflux features of Spring.

CodeQL

Author: Sven Loesekann

Technologies: Angular, Angular-Cli, Angular-Material, Typescript, Spring Boot, Spring Webflux, Spring Security, MongoDB, Maven, Docker, ArchUnit, Kafka, Kafka-Streams, Spring Actuator with Prometheus interface

Articles

What is the goal?

The goal is to be reactive from top to bottom. To do that the project uses Angular in the frontend and Spring Boot with Reactive Web as server. Mongodb is the database connected with the reactive MongoDB driver. That enables a reactive chain from the browser to the DB. The security is done with Jwt Tokens and the logged out tokens are invalidated. The project uses an in memory MongoDB to be just cloned build and ready to run. It serves as an example for clean architecture. The architecture is checked with ArchUnit in a test. The health and performance of the application can be monitored with Spring Actuator with Prometheus interface. With the 'kafka' and 'prod' profiles the Kafka support can be used for Jwt token revokation(Minikube setups(development/system) available).

What is it?

The application runs a scheduled task reads the exchange rates of cryptocurrencies and stores them in the Mongodb. The UI uses the rest service to read the rates and displays them on a table. The table updates itself regularly and shows out of date data in blue. A detail page shows the data of the currency and a chart of the rates of the current day, 7 days, 30 days, 90 days. If the user logs in the user can see the relevant part of the orderbooks for an order. The orderbooks route is implemented as a lazy loading feature module. The route guard checks for the Jwt token and the logout invalidates the Jwt token.

C4 Architecture Diagrams

The project has a System Context Diagram, a Container Diagram and a Component Diagram. The Diagrams have been created with Structurizr. The file runStructurizr.sh contains the commands to use Structurizr and the directory structurizr contains the dsl file.

Data Import and Preparation

The application has two scheduled jobs. The first is the ScheduledTask class. It reads the rates of the crypto currencies once a minute with different initial delays. That job provides one mongodb collection per exchange. The collections can have different documents with currency pairs like Usd to BitCoin or Eur to Ether or one document with all currency pairs, depends on what the exchanges provide. These collections provide the data for the current day chart and the current quote. To display the 7 day, 30 day, 90 day charts, hourly or daily quotes are required. Once a day the PrepareData class runs jobs to calculate the hourly and daily quotes. The jobs run between 0 and 4 o’clock. If no values are available the for the timeframe(hour, day) a value of zero is shown. For the 7 day chart the hourly data is used and for the 30 and 90 day charts the daily data is used. The Schedulers class provides a an elastic bounded scheduler with enough threads for each client(connection issues) of the ScheduledTask class for the quote imports. The aggregation jobs are run asynchronous(as @Async method) on application startup(@EventListener(ApplicationReadyEvent.class)) and the scheduled runs (@Scheduled(cron=...)) to do the calculation outside of the reactor event loop. The aggregation jobs are started only once(@SchedulerLock) in intervals with @Scheduled to separate them and to reduce the database load.

Minikube setup

The application can now be run in a Minikube cluster with a Helm chart. The setup has a persistent volume to store the files of mongodb. A setup of mongodb with the volume and a setup for the application. It can be found in the minikube directory as a Helm chart. It uses the resource limit support of Jdk 16+ to limit memory. Kubernetes limits the cpu use and uses the startupprobes and livenessprobes that Spring Actuator provides. A Helm chart for the Kafka development setup in Minikube can be found in the directory 'minikube/kafka'. A Helm chart for the deployment of Kafka/Zookeeper/AngularAndSpring/MongoDb system setup can be found in the directory 'minikube/angularandspringwithkafka'. Further documentation can be found in the Blog articles.

Monitoring

The Spring Actuator interface with Prometheus interface can be used as it is described in this article:

Monitoring Spring Boot with Prometheus and Grafana

To test the setup the application has to be started and the Docker Images for Prometheus and Grafana have to be started and configured. The scripts 'runGraphana.sh' and 'runPrometheus.sh' can be used as a starting point. The Spring Actuator configuration shows primarily the http performance and the Gc pauses. More metrics can be enabled in the application.properties file.

Jvm Memory management

The memory state and other values of the Jvm can be watched with the jstat tool that is included in the jdk. To watch the memory of a running Jvm this command can be used:

jstat -gcutil -h 10 insert_process_id 1000

Setup

MongoDB 4.4.x or newer.

Eclipse IDE for Enterprise Java and Web Developers newest version.

Java 21 or newer

Maven 3.9.5 or newer

Nodejs 18.13.x or newer

Npm 8.19.x or newer

Angular Cli 17 or newer.

More Repositories

1

Angular2AndJavaEE

This project should provide a starting point for people interested in using Angular 18 in a Java / Jakarta EE environment.
Java
96
star
2

AngularPwaMessenger

This is an encrypted Angular 18 PWA messenger application with an AI friend that can work offline and has a reactive Spring Boot 3 backend with a MongoDB to store the messages in a clean architecture. With a Kubernetes setup. Structurizr is used for C4 diagrams.
TypeScript
34
star
3

MovieManager

This project shows howto use Angular 18 and Spring Boot 3 and Jpa with a Maven build in clean architecture. For development/production the H2/Postgresql databases are used. The databases are managed with Liquibase. Structurizr is used for the diagrams.
Java
27
star
4

AngularPortfolioMgr

This is an project to show the use of Angular 18, Spring Boot 3, H2/Postgresql with Jpa, Liquibase, Kafka and Gradle and a Helm chart for a Kubernetes deployment. The frontend uses D3 for charts. For dynamic queries the frontend uses Drag'n Drop and the Backend Jpa Criteria api and the frontend displays the results in Table/Tree Angular components.
Java
19
star
5

AIDocumentLibraryChat

A project to show howto use SpringAI with OpenAI to chat with the documents in a library. Documents are stored in a normal/vector database. The AI is used to create embeddings from documents that are stored in the vector database. The vector database is used to query for the nearest document. That document is used by the AI to generate the answer.
Java
16
star
6

AngularAndSpringWithMaps

This project shows howto use Angular 18 and Bing Maps and Spring Boot 3 and Jpa with a Gradle build in clean architecture. For the communication between the frontend and the backend GraphQl is used. For development/production the H2/Postgresql databases are used. The databases are managed with Liquibase. GraalVM native image is supported.
Java
12
star
7

ngx-simple-charts

Angular 18+ library for D3 based line, bar, donut and date/timeline charts with multiple entry points. A configurable service for token handling is provided.
TypeScript
5
star
8

ReactAndGo

A project with React in the frontend and Go/Gin/Gorm in the backend, MQTT Messaging, Cron Jobs and a Postgresql Db. Db schema updates are done with Gorms Migrator. Security is done with Golang-Jwt. Structurizr is used for C4 diagrams.
Go
3
star
9

DataScience

Jupyter Notebook
1
star
10

AngularWithIonic

This project shows howto use Angular with the Ionic Framework to build a mobile App.
TypeScript
1
star