[Last relevant update: 31/10/21]❗
This project was built for the React challenge of Alkemy Labs. The app is responsive and his login data, as well the team assembled, persists in the local storage.
The following libraries are used:
- React to create the web application user interface
- Redux Toolkit to manage the global state of the application
- React Router to facilitate navigation
- Formik to build forms
- Axios to make HTTP petitions
- Bootstrap 5 for the front-end of the app
- React Icons to display some icons.
The following API is used:
- Clone or download the source code from Github
- Run
npm installin the terminal to install the required dependencies - Run
npm startto open a local host in the browser and run the React app - In the Login page, the only credentials for a correct log in are: for email
[email protected]and for the passwordreact.
As long as the user tries to enter any route without being authenticated (logged in), would be redirected to the Login page where he can enter his credentials. If the wrong inputs are entered, a warning message will popup.
When the user has successfully logged in, the app will redirect him to the Home page. Here at the top will see the specialty of the team of heroes selected, it average of weight and height, as well the sum of all their powerstats.
Below that chart, the user will see the info cards of the heros selected. Clicking on the "Detail" button will bring to the screen more info.
At the Seach page, apart of a search bar, when there are results of search (request to the SuperHero API), the hero cards will be displayed. The button may or may not be disabled and it will inform the user about the status: "Add" if the hero is available; "On Team" if the user already selected that hero; "Axis Filled" if there is already three heroes of the same allegiance in the team; and "Teamm Complete" if the team is composed of 6 heroes and have 3 heros of each posible allegiance.
If the user tries to go to any page that doesn't exist in the app, it will be redirected to a "Error 404: Page Not Foud" alert from where can go to the Home page or Search page.
- In the Home page, when having more than one team member, its easy to see that not all hero cards have the same height. It varies depending of image size and name lenght.