Skip to content
Fetching character data with axios and rendering it with React
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
package-lock.json
package.json
yarn.lock

README.md

Description of the assignment:

Create an overview of all the characters of the TV show Rick & Morty that shows the following details:

  • Image
  • Name
  • Status
  • Species
  • Last location
  • Last dimension
  • Last episode (number and name)

You can use the following API: https://rickandmortyapi.com/

Bonus points (optional):

  • README.md => YES
  • Scalability => Not entirely
  • Click on elements / text for info on episodes, dimensions, etc. => YES

Run Project

$ git clone git@github.com:Marfru/ricky-morty.git
$ cd ricky-morty
$ npm i
$ npm start

Packages used

Package Url
normalize.css https://www.npmjs.com/package/normalize.css
react-social-icons https://www.npmjs.com/package/react-social-icons
axios https://www.npmjs.com/package/axios
react-router-dom https://www.npmjs.com/package/react-router-dom
sass-loader https://www.npmjs.com/package/sass-loader

Approach

What the user would see once entered the application, would be an ordered list of characters from Rick and Morty. It only loads the 20 first characters.

I have added a Load More button at the end to load the next page, which will load the next 20 characters.

Each character is a list (ul li), and inside each character block I render the name, status, species, last known location and the last episode where they appeared, which is a clickable button that will take you to a new page where it will render the information of that episode (Title, Air Date, Season and Episode).

The plan for the episode details was to make it a modal.

At the left side of the screen, there's a fixed menu, which takes you to the main screen (Characters), but also to Locations page (information about locations) and Episodes screen (information about all episodes).

I have used Router and Links from react-router-dom to determine these pages. Locations and Episodes aren't styled.

Helper:

  • Fetcher.js => Using axios, I fetched the data from the API using endpoints, to be able to render on single components data from /characters, /locations or /episodes. Also to load the next 20 characters (character/?page=2).

Components:

  • Main.jsx => This is the main template. Here I render the header and all the rest. It includes the Route paths and links to the pages as well.
  • Characters.jsx => Rendering the the characters and it's information such as:
{character.image}
{character.name}
{character.status}
{character.species}
{character.location.name}

In the last episode, I added the component < ListEpisodes > which will take you to a new screen where the data from that single episode will load.

Also the "Load More" button component is stated here, which will render the next page of characters.

  • loadPages.jsx => The famous 'Load More' used on the Characters.jsx component.
  • Episode.jsx => Information of single episodes (Last episodes of characters)
  • Episodes.jsx => This renders all the episodes. Didnt add the pages though. (Load More). Fetched data thanks to the imported helper (axios).
  • Locations.jsx => This renders the locations, fetched data thanks to the helper.

Common Components:

  • Social.jsx => basically just renders social media icons using the NPM package from react-social-icons.
  • Header.jsx => The menu and Links are located in here. Also the "logo" and the non-working (just a placeholder) search bar.
  • Modal.jsx => Ready to use but not implemented.

Styling & SaSS

  • Located in the /Stylesheets/ folder, not very organized though. All the .scss files are imported in the import.scss, which later is imported in the index.js.

  • Also a small .scss file which contains variables (_vars.scss).

But in general, the syling needs a lot more work.

Design

Lack of time, but I did what I could. The main page is pretty user-friendly in my opinion.

Responsiveness

Not worked on this much, just a bit but I added some media queries.

You can’t perform that action at this time.