This is a little SPA made in 30 hours deadline with react typescript, using Material UI and Marvel API, as the challenge of the React learning path on plural sight.
The goal of this challenge were to made an functional single page application of marvel, demonstrating the proficiency of using react.
Using the MARVEL REST API, develop a SPA (single page app) web application using the latest available version of REACT, taking into account the following requirements:
-
The main page should display the list of Marvel characters in default order.
-
The list of characters should be paginated in such a way that only 10 characters are displayed per page in double column format, and users can navigate through different pages.
-
The list of characters can be sorted by name and registration date. For this purpose, implement a Select at the top of the list.
-
A search field must be implemented to filter the list by character name.
-
Each character in the list will be displayed as a card with the character's photo, name, description, and a list of a maximum of 4 associated comics.
-
Clicking on the name of a comic will open a modal that displays the comic's photo, title, and description.
-
The modal should allow the user to add or remove the comic from the favorites list, which will be displayed in the right section of the main page using comic photos.
-
Comics on the favorites list will be displayed with an icon in the upper right corner of the photo that allows users to remove the comic from the favorites list.
-
Each character card in the list will have a button that allows users to navigate to the character detail. The detail page is left without design specifications, so it must be implemented according to the developer's taste and creativity.
-
At least one additional feature to those indicated in the requirements must be implemented. This implementation is left to the developer's choice, but it must use one of the features offered by React.
