Shield-ID

Description

An interactive web app that dynamically delivers key information about Marvel superheroes to the user

Motivation

The Marvel Cinematic Universe (MCU) is one of the most popular, highest grossing cinema and TV franchises. But this expansive universe, filled with hundreds of characters based on decades of comic books, can be difficult for the uninitiated to enter. This app seeks to solve that problem by offering users a quick, easy way to access character overviews. It is styled in the manner of a S.H.I.E.L.D. dossier, since S.H.I.E.L.D. is Marvel’s government agency established to oversee superheroes and identify villains and threats.

User Story

• AS a user
• GIVEN that I want to quick access information about characters in the MCU
• WHEN I navigate to the website
• THEN I am presented with an interface styled in the manner of a classified government document.
• WHEN I type a character’s name into the search bar
• THEN I am presented with a thumbnail of that character and a profile including their name, aliases, bio, occupation, stats, and their first appearance in the comic books. I am also presented with “action shots” comprised of GIFs from the films.
• WHEN I have searched a character
• THEN my search results are saved as buttons that I can click to re-search for that character.
• WHEN I navigate away from and then return to the page
• THEN the page is already populated with results from my most recent previous search.

Acceptance Criteria

• Application uses at least two server-side APIs
• Application uses client-side storage to store persistent data.
• Application doesn't use JS alerts, prompts, or confirms (uses modals instead).
• Application uses a CSS framework other than Bootstrap.
• Application is interactive (accepts and responds to user input)

Technologies

• Superhero API (https://superheroapi.com)
• Giphy API (https://developers.giphy.com)
• Pure.CSS (https://purecss.io)

Contributors

• Ashley Tate (endlessashley)
• Ted Alexander (Ted-Alexander)
• Hamza Khalid (hkhalid2)

CORS-anywhere authorization

PLEASE CLICK THIS LINK BEFORE VISITING DEPLOYMENT https://cors-anywhere.herokuapp.com/corsdemo

Deployment Link

https://endlessashley.github.io/Shield-ID/

Demo