akctba / battle-hero

Choose your favorite hero

Battle-Hero Project

Project to test ZeroServer.js framework.
Webapp that proposes to host a battle between Marvel Heroes, fighting each two ramdomly. Whoever wins stays to face the next character. The winner is updated in real time with the highest number of wins. The battle is endless.

Features

• Feches data from Marvel API, the 20 most popular.
• Two heroes each time.
• Real time result.
• List of heroes fetched is listed on the top menu.
• Can be installed on smartphones as PWA

Objectives

Exercise the React Redux feature.

Libraries and Technologies used

• ReactJS
• Material Design
• React-Materialize
• Redux
• React-Router
• Data provided by Marvel. © 2020 MARVEL API

Requirements

• NodeJS, v12.12.0 or higher
• Web browser
• Internet connection 🤪

Setup and How to use the application

1. Download the repository files (project) or clone this project using the 'git clone' command.
2. Create .env file with the Marvel keys, REACT_APP_MARVEL_PUBLIC_KEY and REACT_APP_MARVEL_PRIVATE_KEY.
3. on the root folder run the command npm start.
4. Open http://localhost:3000 to view it in the browser.

React App

This project was bootstrapped with Create React App.

battle-hero's Issues

Menu is not displaying options on small screen

Fix header to show options "About" and "Heroes" on smartphones.

Hero card with fixed size

Some images and hero names are making the card change its sizes.

• Make the image size be always the same
• Make the hero name have a fixed space

Footer

Add a footer with:

• Author
• github link
• API info

Animate Hero card

Insert animation on the HeroCard when one hero loses a fight.
Chose one that fits better, like:

• Explode
• Twist
• Fade

Collapse results

Collapse results on smaller screens, to show only the first 2 or 3 positions, with the option to expand results.

Double hero

Sometimes the app displays the same hero in both cards.

• change the algorithm to do not display the same hero twice (can't fight against themselves)