Rick and Morty Search Engine

🔎 Search any character from the Rick and Morty series 🔎

Explore the docs · View Demo · Report Bug · Request Feature

Table of Contents

• About The Project
  • Screenshots
  • Built With
  • Features
• How to Install
• Challenges
• Contact
• Acknowledgments

About the project

📸 Screenshots

👾 Built with

• ReactJs 18.x
• Bootstrap 5.x
• Bootstrap Icons 1.10.x
• Rick and Morty API

🎯 Features

• Version 1.1.0
  • enhancement: add function to search bar
  • enhancement: add function to filter bar
• Version 1.0.1
  • enhancement: add visual effects to navegation
  • enhancement: add visual effect when the cards are loading
• Version 1.0.0
  • bugfix: changes on the fetch api code
  • bugfix: remove the view more details button
  • enhancement: improved perfomance
• Version 0.1.1
  • feature: create a top navbar to filter characters
  • feature: create a footer navbar to navegate on pages
  • enhancement: add dinamic cards list
  • feature: create a button to view more details of a specific character
• Version 0.1.0
  • feature: create a conection with rick and morty api
  • feature: create a static card component
  • feature: create a static list of cards components
  • enhancement: add bootstrap styles
  • enhancement: add dinamic data from the api fetch

💻 How to install?

For this project you will use NodeJs and NPM

  
   $ git clone https://github.com/Cristian-Sosa/rick-and-morty-api.git // Clone the repo
   
   $ cd rick-and-morty-api
   
   $ npm install // Install the dependencies
  
  

In the 'src' are all the files you may want to see

  
   + src
     + components
     + pages
     - App.jsx
     - main.jsx
  
  

If you want locally run the server. You may use

  
    $ npm run dev
  
  

If you want to see a locally deploy preview. You may use

  
    $ npm run build
    $ npm run preview
  
  

Enjoy the project!

✨ A challenges snap peek

🔎 Search by name function

This is a snap of the code. We will focus in a search by name function.

The component have a simple form with an input and a submit button, when we send the form one event captures the input value and a useState function is used to assign it to the name variable. As soon as this variable is re-asigned, an useEffect function make a fetch to the API and re-load the page with the new characters

The hooks were a challenge for me, I never used before and were a new concept to learn. However, I liked to learn it and it's something that I always going to use

The hooks were a challenge for me, I never used before and were a new concept to learn. However, I liked to learn it and it's something that I always going to use

🤝🏽 Contact

I'm Cristian Sosa - instagram - gustavosocris@gmail.com

Project Link: https://github.com/Cristian-Sosa/rick-and-morty-api

💎 Acknowledgments

I could haven't do this without help of:

• React docs
• MDN
• w3schools
• Rick and Morty API
• You 🙌🏽 thanks for see the project