Rick and Morty WebSite!🚀

The objective of this project is to create a web search engine, where through a call to the Rick and Morty API. We can visualize a list of characters and we can also filter by character name, specie (human or alien) and select the character we click on a new route. In addition, through localStorage we can save our data in the browser.

Note: This project is done using class components. You could find it with functional components in this repo.

Final Project - REACT ⚛️

The object is to create a webpage that lets the user display and filter characters from the TV series Rick and Morty.

- Requirements

• Use React
• Have at least one component for each of the following:
  • Filters with a minimum of search by name (text input) CharacterList which displays a CharacterCard for each character
  • CharacterCard showing character's name, photo, and species
  • CharacterDetail showing character's foto, name, species, origin, number of episodes, and living/dead status
• Use React Router to build navigation between components
• Error components for no results or character not found circumstances
• Use icons/emojis to display character data
• Order characters alphabetically
• Good responsive design, especially for small devices
• Use a grid system to display characters
• CSS to make it stylish

Learnings 💡

• Array methods
• .map,.filter,.sort
• Syntax extension to JavaScript
• Handling Events
• LocalStorage
• State and Lifecycle
• React Router
• Lifting State Up
• Components and Props

Tools 💻

• React
• JavaScript
• Saas
• React Router
• API-'https://rickandmortyapi.com/api/character'
• Visual Studio Code

How to run this project? 👇

• You need to have Node.js installed

• Clone or download the repository in your computer.

To install local dependencies, type:

npm install

Also, you need to install React Route and SASS:

npm install --save react-router-dom

npm install node-sass

In the project directory, type:

npm start

This runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

Creator👋

This tiny project was created by Elena Ramírez Reinoso

How to reach me:

GitHub: @erreinoso

Email: eramirezreinoso@gmail.com

Twitter: @_ElenaRReinoso

LinkedIn: @eramirezreinoso

---