bampakoa / angular-heroes Goto Github PK

Description

When the user enters a search term that does not correspond to any character according to the Marvel API (e.g. "foobar"), the application does not provide any information to the user.

Τhis can lead to a bad user experience when the user has entered a search term with no results and then puts again another term with no results. The user does not know if the application reacted with the second search term.

Proposed Solution

The user should be informed when his/her search term does not match any result (e.g. notification message).

Write unit tests

Upgrade the repository to the latest Angular 12 version.

Current Behavior

On search request failure/error, the app does not respond when the user searches a new term.

Expected Behavior

After a failed request, when a user changes the search term, the app should re-try a new request at Marvel Comics API.

Steps to Reproduce

• Enforce the search request to fail by performing one of the following steps:
  • Change browser's network throttling to "Offline"
  • If you are in a dev environment, try to replace the Marvel API key with an invalid
• Enter a random term at search input (e.g. "thanos")
• The request fails and the app displays an error
• Try to change the search term after the aforementioned error (e.g. from "thanos" to "thor")
• The app does not re-try a new request, it stays at the same stage (even if you enable the network again)

Use http client to access answers for the quiz

Deprecate the use of @angular/flex-layout library and use native flexbox styling according to this blog post from the Angular team.

According to this video, importing all Angular Material modules using a single module such as app-material.module.ts is considered an anti-pattern. It also affects the size of the final bundle of the application.

We need to import each Angular Material module separately into the feature module that is used.

Show each question separately in a wizard-like style

Current Behavior

The images contained in the current repository are in high resolution resulting in a very large size. Thus, the initial load time of the app to be very slow.

Expected Behavior

The images can be compressed to reduce their size without losing their quality.

Steps to Reproduce

• Both images are contained in the assets folder and those that are used in the README.md file, have a huge size.
• For example, the current size of the background.png image is 3.4 MB, while the compressed version of the same image is 859 KB. The size is reduced by 75% without losing quality!

Upgrade Angular, Angular CLI and Angular Material