collinsboss18 / react-catalog Goto Github PK

This project is a React based catalog built as the capstone project for the Microverse React module coursework. It is meant to emulate the Bat Computer's resource cataloging stats of both Heros and Villians.

The project is a react catalog app designed to display resources fetched from an API. It fetches a list of Superheroes and Supervillians that can be filtered by name and displays data upon click selection.

• Lists Heroes and Villians from throughout the MultiVerse
• Easy searching by typing into the search bar.
• Return to catalog display by clicking a bat symbol or typing into the input bar.
• Dynamic URL creation displays the name of the selection as an extension of the webpage url
• Image border displays Blue for Heroes
• Image border displays Red for Villians

• Enhanced search filters
• Increased catalog inventory

• Atom
• Ubuntu
• Node.js / npm
• React / React-DOM / Redux / React-Router
• React-Create-App
• JavaScript ES6 / HTML / CSS

• To look for a character, simply scroll down or begin a search
• Searches do not begin with the first letter of a character's name, for example typing 'star' would return both Firestar and Star-Lord
• Clicking on a character card will display the stats of that character
• Clicking the bat symbol will return your search to the full directory of characters
• Typing into the search bar will continue a search of the full directory, even from the character stats display page

Try it out here

To get this project up and running locally, you must have node and npm installed on your computer.

To get this project set up on your local machine, follow these simple steps:

Step 1
Navigate to the local folder where you want the repository to be cloned and run git clone https://github.com/defoebrand/react-catalog.git.

Step 2
Next, run cd react-catalog.

Step 3
Run npm start to begin the server.

Step 4
Navigate to http://localhost:3000/ in a browser of your choice to see the application running

This project uses React Testing Library and Jest-Dom for testing.

To run tests open a terminal inside the project's root directory and enter npm test

👤 Brandon Defoe

• Portfolio: defoebrand
• Github: @defoebrand
• LinkedIn: @defoebrand
• Gmail: mailto:[email protected]

Our favorite contributions are those that help us improve the project, so please leave an issue or a feature request if you have any suggestions!

Feel free to check the issues page to either create an issue or help us out by fixing an existing one.

If you've read this far....give us a ⭐️!

• Microverse
• Marc-Antoine Roy on Behance
• Batman™ is property of DC
• Superhero-api as provided by akabab

This project is licensed by Microverse