A web application to render a list of characters from the Rick and Morty API.
The application is running at https://natak0.github.io/rick-and-morty-redux/
The application consists of 2 views. A list of characters and a detailed page for the selected character.
The list of characters has pagination and a search input to search characters by name. It also has a simple donut chart for genders made with D3.js. I used a donut chart because I think this type of chart is perfect to represent limited amount of categories (maximum 4 for this dataset). The chart renders the data for the current page only. It updates every time the page is changed or the data is filtered by name.
The search input is placed in the navigation bar and it uses redux ('search slice') to update the list view page.
The endpoints are defined with the createApi method (from Redux Toolkit Query) to query the API.
The responses from the API are cached for 24 hours using RTK query.
The character view displays the character's image, name, and other details.
The project was created in CRA using plain JavaScript and CSS in Visual Studio Code using node v16.15.0 (npm v8.5.5).
A Prettier plugin for VScode was used to format the code.
To run the project in the development mode, run [npm install] and then [npm start] in the terminal within the project folder.
I used CSS to style the page. For the naming, I follow BEM (Blocks, Elements and Modifiers) methodology. I also added the styles for mobile view.
I also use rem units for fonts and media queries to improve the accessibility.
- Cross-browser testing
Tested in the latest Chrome and Firefox browsers and for the responsive view.
- Unit testing
Unfortunately I did not have enough time to implement tests, but I think adding them would have been ideal since they improve the code quality, make codebase maintenance easier, and improves development speed. I would use React Testing Library for this case.