Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ravikantsingh12/superhero-hunter-app

Superhero Hunter is a web application that allows users to explore information about various superheroes from the Marvel Universe. Users can search for superheroes, view their details, and add them to their favorites list.
https://github.com/ravikantsingh12/superhero-hunter-app

api bootstrap coding-ninjas css front-end html javascript marvel-api skill-test superhero-hunter

Last synced: about 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/ravikantsingh12/superhero-hunter-app
Owner: ravikantsingh12
Created: 2024-03-15T11:00:22.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-07-26T17:10:56.000Z (5 months ago)
Last Synced: 2024-07-27T13:14:47.345Z (5 months ago)
Topics: api, bootstrap, coding-ninjas, css, front-end, html, javascript, marvel-api, skill-test, superhero-hunter
Language: JavaScript
Homepage: https://ravikantsingh12.github.io/Superhero-Hunter-App/
Size: 3.26 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Superhero Hunter App

Website is live at: https://ravikantsingh12.github.io/Superhero-Hunter-App/

## Overview

## Features

1. **Homepage:**
- Navigation bar with options to go to the homepage, view favorite superheroes, and search for superheroes.
- Search functionality to search for superheroes by name.
- Display of superhero cards containing their name, image, and options to view details or add/remove them from favorites.

2. **Superhero Details Page:**
- Displays detailed information about a selected superhero.
- Shows the superhero's name, ID, number of stories, comics, events, series, and description.
- Allows users to navigate back to the homepage.

3. **Favorites Page:**
- Displays a list of favorite superheroes.
- Allows users to remove superheroes from their favorites list.
- Shows a message if no superheroes have been added to favorites yet.

## Technologies Used

- **HTML:** Used for structuring the web pages and creating the user interface.
- **CSS:** Used for styling the web pages and making them visually appealing.
- **JavaScript:** Used for adding interactivity to the web pages, fetching data from the Marvel API, and managing favorites.
- **Bootstrap:** Used for responsive design and styling components.
- **Marvel API:** Used for retrieving information about superheroes.

## Project Screenshots

1. **Homepage:**
![Homepage](screenshots/homePage.PNG)

2. **Homepage:** When no superhero found in the result with the name searched
![Homepage](screenshots/notFound.PNG)

3. **Superhero Details Page:**
![Superhero Details](screenshots/superheroDetails.PNG)

4. **Favorites Page:**
![Favorites](screenshots/favSuperheroes.PNG)

5. **Favorites Page:** When no superhero added to the favorite
![Favorites](screenshots/emptyFavList.PNG)

## Usage

1. **Homepage:**
- Upon loading the homepage, users can browse through the list of superheroes.
- Use the search bar to find specific superheroes by name.
- Click on "View Details" to see more information about a superhero.
- Add or remove superheroes from favorites by clicking the corresponding button.

2. **Superhero Details Page:**
- View detailed information about a selected superhero, including their name, ID, stories, comics, series, and description.
- Click on "Go to Homepage" to return to the homepage.

3. **Favorites Page:**
- Displays a list of favorite superheroes added by the user.
- Click on "Remove from favorites" to remove a superhero from the favorites list.

## Credits

- Marvel API: Used for retrieving superhero data.
- Bootstrap: Used for responsive design and styling components.
- Font Awesome: Used for icons.

## Author

Ravikant Singh - [email protected]