This project is a side-by-side comparison page for two characters from the popular TV show, Rick and Morty. The page allows users to search for characters, add/remove them to the comparison, and view details such as their picture, name, and an additional character attribute.
The data for the characters is pulled from the Rick and Morty API (https://rickandmortyapi.com/).
The project was built using JavaScript, a front-end framework (React), and the Rick and Morty API documentation.
You can view the live project at https://fbpuq1.csb.app/
Please let me know if there is anything else that you need or any further questions you have. 050-588-4960 dolev146@gmail.com
I selected React as my preferred framework for developing the website due to my familiarity with it and its reputation for being fast and efficient. To optimize the website's performance, I frequently employed the technique of "Hoisting the State" and implemented a modular design by creating a reusable component for character comparison. Despite encountering an issue with naming conventions early on, I was able to quickly resolve it and ensure consistency throughout the development process.
The Rick and Morty API is a REST(ish) and GraphQL API based on the television show Rick and Morty. You will have access to about hundreds of characters, images, locations and episodes. The Rick and Morty API is filled with canonical information as seen on the TV show.
I used this two end points.
GET /api/character
GET /api/character/?name=${name}
Parameter | Type | Description |
---|---|---|
name |
string |
Required. name of character to fetch |
- Live Website
- in order to inspect the code, in the bottom right corner press the button 'Show Sandbox'.
Client: React, fetchAPI, Rick&MortyAPI