Libraryui
This project is a sample front end for libraryservice
NOTE: This project will not work without the backend service as of now.
Sample Screenshots are available in the screenshots folder in the current directory.
Assumptions, known issues and scope of improvement are mentioned at the end of this README.
Tech Stack
- Angular 13 (Features introduced with Angular 13 might not have been used)
- Angular Material Components
- IntelliJ IDE for development and debugging
- Arch Linux
- NodeJS
v16.13.0 - npm
8.1.3 - Angular CLI version 13.0.3.
Environment Setup
- Install node v16 (LTS version) for the platform of your choice
- Install the latest version of npm for the platform of your choice
- Install angular cli for your platform using instructions here
- Open the project root in a terminal(CMD for the windows folks) and run npm install
Development server
Run ng serve for a dev server. Navigate to http://localhost:4200/.
Build
Run ng build or npm run buildto build the project. The build artifacts will be stored in the dist/ directory.
NOTE: It is assumed that the libraryservice is running on localhost:8080 if not then please change the apiURL
in environment.prod.ts
Running unit tests
Run ng test to execute the unit tests via Karma.
Running end-to-end tests
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a
package that implements end-to-end testing capabilities.
NOTE: Only the default tests exist, additional unit tests have not been written for the UI
Features
Available
- View the list of books in the library (borrow_screen_list_view.png)
- View the list of books issued to the logged-in user (my_books_view.png)
- Issue a book from the borrow list by clicking on the borrow button (borrow_screen_successful_borrow.png)
- The borrow button is disabled if the number of available copies is 0 (borrow_screen_disabled_borrow_button.png)
- Error shown when user tries to borrow more than one copy of a book ( error_while_trying_to_borrow_more_than_one_copy.png)
- Pagination on the list of books in library
Future
- Add better error dialog box
- Display current username on the screen
- Filter, sort books
- Admin functionality to manage all books/user
- Better error display on login screen
- User should not be logged out on refresh
- Display message when book is returned successfully
- Graceful exception handling for the http requests.
Assumptions, known issues and scope of improvement
- The application will have a backend running when it is started and accessed.
- The application will be run on a local server itself
- The two screens which have been added separately as of now could have been just a single screen but to segregate the books issued to the user and available in the library, they have been kept separate.
- The login screen will not show error in case of any invalid user id.
- The login screen takes input as numbers and has no password this needs to be improved upon and must be replaced with OAuth.
- The borrow.component.ts and my-books.component.ts have certain common code which could have been moved into a common component and then these could have extended that component. Similarly for the View for those components.
- Possibly, the config could have been in a separate config.json file which then could have been imported into the app.component.ts or as a service available throughout the application. This has not been done since the current application is assumed to be run on local.
- The data sources in the tables could have been made compatible with async pipe instead
- Refreshing the application takes you back to the login screen
- The UI is not designed keeping responsive design in mind, so it may not perform well when viewed on smaller screens
- Currently, the exceptions thrown by HTTP services are completely ignored, which could lead to the loader being displayed indefinitely or the user not being able to log in but not know why. This needs to be handled gracefully