Code Challenge - Daniel Simionescu

[danielsimionescu07]

Implementation

Features

• responsive cards

• loading spinner
• placeholder image
• Snackbar for http errors

Used @ngrx/store and @ngrx/router-store:

• I wanted to have a centralized application's state;
• it makes it easier to manage and maintain in the long run;
• easily access the current route and its parameters from any part of the application and react on it's change;
• it separates the domain logic from the ui components, resulting in cleaner, more maintainable code;

Used @angular/material for showing errors with the help of the Snackbar.

Testing

Used @hirez_io/observer-spy and jasmine-auto-spies

• makes it easier to test observables by providing a straightforward way to subscribe to them and inspect emitted values;
• it simplifies the process of validating observable behaviors in tests;

For the last row edge case:

• I implemented a solution that dynamically calculates the number of cards in the last row and adds empty placeholder cards as needed;
• placeholder cards ensures that the flexbox calculation distributes space evenly, preserving the intended design;
• flexbox layout retains the correct proportions, even when the number of items in the last row is fewer than the number of columns;