Avaloq
Project Task
Assignment
During the assignment you will build an application which manages bookmarks.
- Scaffold the application with Angular 8, using the following libraries: NGRX for managing the state, Angular material for the user interface.
- Define the store for the application. Each bookmark should have the following properties: Name, URL, Group (work / leisure/ personal / ...)
- Create the user interface for displaying the bookmarks groupped by the "group" property.
- Enhance the existing application by adding the following new features: Add new bookmarks using a form, Delete bookmarks by clicking in the list
Setup Basic Part 1
The project assumes you have the latest node and npm installed, alongside angular CLI installed. If not please follow the instructions found below:
Setup Basic Part 2
From this point on it is assumed NPM is being used.
Install project dependencies using the below command:
npm i
Start project frontend using the below command:
ng serve -o
Start project backend simple json server using the command below:
npm run server
Screenshots
Bookmark Manager, home screen. Bookmarks are group by their respective group.
Book Manager, add screen.
Improvements & Points of Discussions
- If this was a production project, I would write tests and try to maintain a near 100% code coverage. Here is an example of a personal project that has 100% test coverage written in react/redux MyNextRoll
- React vs Angular
- Forms - Use form validation, use angular form module to generate forms.
Sources
As this was my first time using angular, I had to use several sources, these are listed below:
Simple Angular app using ngrx 8+ store and effects factory methods