The purpose of this project is to build a website where you lookup Super Heroes/Villain information. While browsing the internet, I could only find Super Heroes/Villain websites that were limited to a single comic book universe, DC-only, Marvel-only, etc. This website combines Super Heroes/Villains data from Marvel, DC and more!. The goal of this website is to make it to the number 1 site for all Super Heroes/Villains information.
This is a project was bootstrapped with Create React App.
Here is the URL for the page: https://master--shiny-muffin-437497.netlify.app/
HOME
This page contains a list of all Super Heroes/Villains. Please scroll thru the Carousel.
Click on the image for more information about the character.
Click on the "Add to Favorites" button to add to your personal list of favorite characters
View Characters by categories (Comic Universe: Marvel, DC, Other, more to come)
SEARCH
You can search for a specific character on this page.
You can select a character from the search preview or hit ENTER/SEARCH to see all results of your search
FAVORITES
This page your personal list of favorite characters.
You can delete any characters you no longer want in your favorites
Character Details
Click on the character to view details such as: Code Name, Full Name, POWER STATS (Combat, Durability, Intelligence, Power, Speed, Strength) Biography, and more
This website gathers data from 2 separate APIs.
https://www.superheroapi.com/
-- This allows us to search by Character Name and ID and other stats, But doesn't provides a full list of characters all at once. This is suitable for searching. 2 types of Fetch calls are being made to this API -- for SEARCH page & CHARACTER page.
https://akabab.github.io/superhero-api/api
-- This provides a full list of characters all at once. This is suitable for the Home Page. 1 Fetch call is being made to this API -- for HOME page.
There are 6 components and 5 pages
The Favorites page stores the favorite characters in Local Storage of the browser
A Carousel Slider has been added to the Home Page
The Home page has 3 categories that lists the characters by Comic Universes - Marvel , DC, Other more categories to come
A Search preview has been added to the Search Page
Internal features have also been updated, more CSS, custom hook for fetch calls, etc
The Home page randomnly displays different characters on each page load for each universe -- ShuffleSliceArray function created
Add more CSS styling
Add More Categories/Filters to the Home Page
Add a Footer
Improve Navigation Menu
Add a random back ground for each page
Upgrade the use of Local Storage to Redux/Context
Add error message when you search for a hero that can't be found