The project is an interactive platform that allows Marvel fans to explore and discover detailed information about their favorite characters, events, series, producers, and comics. Users can individually explore each item and uncover their connections with other elements. With an intuitive and informative interface, it offers an engaging and convenient experience to learn more about the vast Marvel universe.
The data is provided through an API in which marvel makes available - Marvel Api, except the home page.
Marvel provides 3000 free data requests per day. If this limit is exceeded, an error will be displayed on the screen, and unfortunately, you will have to wait a day to access the data again.
Project developed as the main focus of improving my knowledge
Take a look at the project. I would be happy if you could share your feedback and experience. Click here .
- React
- Styled-components
- react-router-dom
- SplideJs
- JavaScript
- CSS
As a fan of the Marvel universe, I found a way to combine my interest in frontend development with my admiration for the world of heroes.
The project consists of searching for characters, comic books, events, series, and creators. It allows users to delve into specific details about each of them and explore the connections between them.
In the characters, comics, series and products sections, each time the page is loaded, a list will be displayed in random order
Prerequisites: Head over to developer Marvel and sign up/in to get your API keys. Install the module using yarn or npm and initialize an API client using the public and private API keys for your account.
It will be necessary to generate a hash with the Marvel API keys to make the calls. There is an explanation in the Marvel Portal documentation. Suggested website that generates MD5 hash:
https://www.md5hashgenerator.com/
After creating your marvel account and having your keys, you need to create a .env file in root with the variables below. You can use .env.example from the project
REACT_APP_TIMESTAMP = randomTimeStamp;
REACT_APP_API_KEY = yourAPIPublicKey;
REACT_APP_HASH = yourHash;- Clone the repository
- Install yarn
- Update .env file with your keys
- run in terminal yarn
- run in terminal yarn start
Take a look at my portfolio.
©️ Developed with 💜 by Rafael Gomes