This is Microverse's final project in React/Redux's course.
In this project, I build a catalog of DC Comic's main characters using React and Redux.
This project's goal was to build a browsable list of items that you can filter and access to the details of one item. The list should be accessed from an API, so I choose the Superhero API and filtered it to store only the DC Comic's characters.
The project's assignment can be seen here.
Link to a live version here.
Repository: https://github.com/phalado/React-Redux-Capstone
For this project I hacked Batman's computer and got some data from the main heroes and villains - you can't be the Batman if you are not prepared for each hero or villain. For my bad luck, after the Tower of Babel the bat made it difficult to get data, so I wasn't able to get the character's powers and weaknesses, but I was able to get their name, identity, filiations, a photo and some stats that I converted to a power chart using React SVG Radar Chart.
To hide from the world's greatest detective I had to use a fake server to store the data. When you open the catalog the React APP downloads the data from the server using an API and stores it in the Redux store.
The first page showed is just an introductory page.
When you click the button will be rendered the Justice League of America's filtered page, showing it's heroes. It's an example of the characters filtered by filiation.
You can click in the hero to see its data. Interesting pointing that, if you click in a filiation in blue the will be rendered that team's members.
Finally, you can click in the button in the header to see the possible filters, being possible to filter by alignment - good, bad or neutral - by several teams of heroes or villains or, if you prefer, click in the name of any character to see its data.
You can open the catalog online clicking here or locally following these steps:
- Click on the green button "Clone or Download"
- Click on Download ZIP
- Extract the project
- In your terminal, navigate to the game's folder
- Run npm install
- Run npm start
A tab will be opened in the browser.
To create this project I used:
- JavaScript
- A bit of HTML and CSS
- Eslint
- React
- Redux
- PropTypes
- Superhero API
- React SVG Radar Chart
- Github
- Heroku
- Mobile version with React Native
- Possibility to pin your favourite Heroes/Villains
- Add more data about the characters
Author: Raphael Cordeiro
Follow me on Twitter, visit my Github portfolio, my Linkedin or my personal portfolio.
I have no business rights about the characters used in this catalog. This is only for learning purposes. All characters belong to DC Comics.