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/arslanbisharat/catalogue-of-statistics
For this project I hacked the DC Games database and got some data from the main heroes and villains - you can't be a real hero 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 its heroes. It's an example of the characters filtered by filiation.
You can click on 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 on 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 by 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
- Netlify
- Mobile version with React Native
- Possibility to pin your favorite Heroes/Villains
- Add more data about the characters
- Use JSX syntax correctly
- Pass info to components using props with validation
- Use React components lifecycle methods
- Use DOM events, listeners, in components
- Use lifting to pass state from children to parent components
- Use client-side routes
- Design the structure of a component for a website
- Test React code
- Use Redux store to keep state
- Explains data flow in Redux
- Connects Redux to React app (includes map state and dispatch to props)
- Explains when Redux is useful in your SPA and what value it provides you
- Explain React and virtual DOM concepts
- Passion for software development.
- Ability to translate business requirements into software solutions.
- Ability to multitask and effectively manage time and prioritization.
- Strong English written communication
- Strong English verbal communication
- Deploy apps (Heroku, Netlify)
- Use linters (code standards)
- Maintain professional Github Repos
🤝 Contributions, issues, and feature requests are welcome! Start by:
1. Forking the project
2. Cloning the project to your local machine
3. cd into the project directory
4. Run git checkout -b your-branch-name
5. Make your contributions
6. Push your branch up to your forked repository
7. Open a Pull Request with a detailed description to the development branch of the original project for a review
Arslan Bisharat
- Github: @githubhandle
- Twitter: @twitterhandle
- Linkedin: linkedin
I have no business rights to the characters used in this catalog. This is only for learning purposes. All characters belong to DC Comics.
I would like to thanks Raphael Cordeiro for the contents used in this project.
This project is MIT licensed.