Comparing World Of Rick And Morty

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/

Note

Please let me know if there is anything else that you need or any further questions you have. 050-588-4960 dolev146@gmail.com

Table of contents

Delopment Proccess

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.

API Reference

https://rickandmortyapi.com/

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 all character

  GET /api/character

Get character

  GET /api/character/?name=${name}
Parameter Type Description
name string Required. name of character to fetch

Authors

Demo

  • Live Website
  • in order to inspect the code, in the bottom right corner press the button 'Show Sandbox'.

Screenshots

image image image

Tech Stack

Client: React, fetchAPI, Rick&MortyAPI