AiShowcase

A take-home task. You can view it live at https://mandarini.github.io/ai-showcase/.

Info

I used the latest version of Angular and TypeScript to build this project.

Details (as generated by the Angular CLI)

Version info

This project was generated with Angular CLI version 9.0.6.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Comments about the result

Time

I spent around 4 hours building it, distibuted in 3 days. The reason I spent more time than requested, is because I had the time to spare, so I chose to work a bit on state management, on breaking up the components, and experimenting with the different API methods and routes.

Features I wanted to show off

• The search functionality: In the comparison page I use search-as-you-type, but my search also has a debouncer to balance the requests between typing. I used the ReactiveForms module and rxjs to achieve that.
• The state management: I used a BehaviorSubject ngrx-like implementation, where all API requests are managed by the "store" service. Then, the corresponding states (Loading, LoadedSuccessfully, LoadError) are dispatched via a BehaviorSubject-turned-Observable to the corresponding Observables in the components, along with the resulting values - again as Observables. This makes sure that I can use Observables and the async pipe subscriptions in the templates. Furthermore, I can have access and manage the API errors or actions gracefully in the templates with messages, through the state messages.
• Comparison visualisation: I thought that a simple and quite effective way of comparing two numbers is to just show them in bars, and color the larger ("better") one green and the smaller ("worse") one red. I noticed that the scores where on a scale from 0-100, so I figured I will just have two stacked divs, and the top one will get a width of the score in percentage.

The simplicity of the Look and Feel

I spent most of my time in the above 3 features, so I decided to keep the UI to the bare minimum, only using proper HTML elements to represent the different parts of the user interface.

Things I would fix / change / would have done differently

• I would work more on the general user interface and the general look and feel. Smaller letters here and there, narrower "windows" for better readability.
• I would write some unit tests to make sure my API returns the right values. My error handling will make sure the UI is not affected gravely, but unit tests should definitely be in place to save the application from unforeseen bugs.
• I would make the compare page "refreshable", by adding the two comparable agents in the URL
• I would add a "Compare with..." button on each individual agent page, which would take the user to the compare page, with the first agent information prefilled.
• I would probably code split the comparison page, if I should be thinking about how to keep the application scalable. I can imagine more features being added there, and if it would become too complicated maybe it would be better to lazy load it.