This project was generated with Angular CLI version 16.2.1.
- Run
npm installto install al needed dependencies. - Run
npm run prepareto install Husky. - Run
npm run startfor a dev server. Navigate tohttp://localhost:4200/. The application will automatically reload if you change any of the source files.
You can find this app also online at it's own gh-page. For the deploy to GitHub Pages I followed the Deploy to GitHub Pages from the Angular.io docs. The configuration can be found at gh-pages.yaml.
This will kick off a series of linters. This you can use during development because this makes use of the --fix and --write flags.
This will also kick off a series of linters. This can be used during deployment. This does not use --fix and --write flags.
Instead, this only checks stuff.
This runs jest --verbose. And basically runs al unit tests and shows the coverage.
Currently the coverage is around the 95% on All files.
The architecture is based on the concepts from Domain Driven Design (DDD). The core concept of this approach is to use a hexagonal architecture. The core of the application is the domain in which the business logic is applied. The data is mapped through ports and adapters to the domain model. This makes a clear separation of concerns.
The app has a couple of components which are used to display the UI. The StudyListComponent is the component
which gets the Studies from his own StudyService and makes use of the StudyCardComponent to show
the individual studies. It also has a button which can be used to toggle the polling timer. In the
StudyCardComponent I make use of semantic HTML and the StatusComponent to convert the status to a readable text. I also make use
of a MarkdownPipe to format the study.briefSummary.
The StudyListComponent has its own StudyService. This way it is possible to have multiple StudyListComponents.
Is the client that is responsible to handle the communication with the API. This also has a converter that internalizes the API model into the domain model. The API models are generated by OpenAPI Generator. The abstraction makes the business logic loosely coupled from the interface.
This service is the core of the application and handles the business logic. It is responsible to keep the number of Studies to a given count.
It also has the polling timer.
I removed the default testing suite Karma and replaced it with Jest. I have chosen for Jest because it is more lightweight.
I made use of different linters in this project. prettier is used to format the code itself.
stylelint, stylelint-config-standard-scss, stylelint-order are responsible to format all written scss.
For example, it orders all css properties alphabetical. commitlint is added to make sure all the commit messages are written properly.
You can override this by starting your commit message with a !. All these linters are tied together by
eslint and lint-staged.
I made use of husky which is a tool that makes the use of git hooks easy.
It makes sure that pre-commit lint-staged is run. It also makes sure commitlint is run on the commit message itself.
With openapi-generator-cli I generated the API Models. I have chosen to only use the models and copy them all
into the project. So at every update of the API spec only the models needed to be copied again. An alternative is to remove the generated models
from the repository and let them generate at build time.
- Place the timer button into the
NavBarComponent. This implies some extra work and you loose the ability to reuse theStudyListComponentwith different settings. - Generated classes not in the repo.