Skip to content

aleameliach/rick-morty-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

banner

🚀👽🧬Rick & Morty Character Finder🧬👽🚀

🔬Project description🔬

Welcoming all Rick & Morty fans to this project that renders character's info from Rick and Morty's API. You can filter these characters by two criteria: by name and by species. And if you click on any character, you can access an individual page for each of them that shows more details like their species, number of episodes they're in, status, etc.

Languages & Technologies

https://github-readme-stats.vercel.app/api?username=marocena26&show_icons=true&theme=transparent https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white

🥒 Components

This project is divided by components:

  • App.js: main component that controls all the others and the main logic of the app.
  • CharacterDetail.js: renders the individual page for each character with all their details.
  • CharacterCard.js: renders the basic information for one character.
  • CharactersList.js: renders the characters on the main page.
  • FilterByName.js: renders the input where the user can search via filter for a character.
  • FilterBySpecies.js: renders the checkboxes that the user can click filter by species.
  • Filters.js: component that renders all the filters in the page.
  • Header.js: renders the header image and title.

🌐 Services

To make our app functional, we need two services:

  • Api.js: contains the function that calls the API and returns the data from the server.
  • localStorage.js: contains functions necessary to manage the local storage in a easier way.

Available Scripts

In the project directory, you can run:

npm start

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

The page will reload when you make changes.
You may also see any lint errors in the console.

npm run githubpages

Builds the app for production to the docs folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

💚 Thank you!

I hope you enjoyed this proyect as much as I enjoyed coding it. Any feedback will be highly appreciated.

About

Rick & Morty Character Finder

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published