This application is a single page application for show dragons list by API, for that application, I made a fake login screen with route validations, one screen for list all dragons, one screen for show dragon detail, one screen for edit data of dragons, one not found page and one button for insert one pull of six dragons automatically.
#How this application works?
- When the application is started, the login is shown, click in the button login to start the journey.
- When the list is shown, it is possible to click in one button to remove dragon and in another button for edit dragon, it is possible to click in the image of the dragon to show dragon detail on another screen.
- When a list of dragons is empty, the add button is shown and so is possible to add a bulk of dragons with the same data, only to be an easy way to show the possibilities for this application
#Technologies used
Default angular environment with other packages.
- Angular 8
- Bootstrap
- Fontawesome
- Rxjs
- ngx-toastr
- Angular Routes
- Jasmine
- EsLint
- Webpack
- Jasmine
- Karma
How do I run it? Having Node.js and NPM installed, just type npm run start and then go to http://localhost:4200
How do I test it? You can run npm run test for running unit testing with a code coverage report as output located in the root folder.
What more could have been done?
1 - Screen for add dragons 2 - Increasing of tests 3 - Implement of end to end tests 4 - Implement event sourcing pattern for communication by contexts 5 - Improve in UX 6 - Implement loaders and error handler messages 7 - Docker for build application-agnostic of environment 8 - Use sensible information in environment variables 9 - Implementing a true validation for login 10 -Implement a store with ngrx for controlling the state of the application