hfzespinoz4/MS2-Project

Marvel Search Tool

This project is oriented to all Marvel Universe fans, it allow Marvel Fans to know more information about their favorite characters, comics, events and series. This site is developed as Milestone Two Project within the Full Stack Web Developer Program at Code Institute. All the information in this project is fetched from Marvel API

Follow this link to Marvel Search Tool

UX

Design

The site has been designed following Mobile First philosophy and is Google inspired design that allow user to get focused in search results information. Also Marvel Search Tool:

• Has a responsive navigation menu that allow users to go across all site even if you´re on mobile device or PC.
• Has a title in the center of the screen that let you know wich search tool you are using in that moment.
• Helps you to identify wich page are you looking thanks to a bold font in navigation menu.
• Use a dark theme that allows users to get focused in what they are looking for.

Structure

Marvel Search Tools is structured in the following pages:

• Characters Page: This is the first page that users will see when visit Marvel Search Tool, allows user to search a character information:

  • As user you will be able to search information from your desired character.
  • As user you will be notified of how many results were found in Marvel API acording to the search term.
  • As user you will see a list of search results and you will be able to identify you character by a little avatar.
  • As user you will know your marvel character´s ID, full-name and description.
  • As user you will see in how many comics does your character appears.
  • As user you will see in how many series does your character appears.
  • As user you will see in how many stories does your character is envolved.
  • As user you will see in how many events does your character participate.

• Comics Page: This page allow user to search a comic information

  • As user you will be able to search information from your desires character.
  • As user you will be notified of how many results were found in Marvel API acording to the search term.
  • As user you will see a list of search results and you will be able to identify you comics by it cover.
  • As user you will know your comic´s Title, ID, ISSN, ISBN, Total Pages, Description, Creation date and On-Sale Date.
  • As user you will know to what series does your comics belongs.

• Series Page:

  • As user you can search information for a comic series.
  • As user you will be notified of how many results were found in Marvel API acording to the search term.
  • As user you will see a list of search results and you will be able to identify by an avatar.
  • As user you will know a series ID, description, start year and end year.

• Event Page:

  • As user you can search information for an event.
  • As user you will be notified of how many results were found in Marvel API acording to the search term.
  • As user you will see a list of search results and you will be able to identify each one by an avatar.
  • As user you will know a events ID, description, start year and end year.

• Contact Page:

  • As user you can send me an email requesting information or giving feedback.
  • As user you will be notified if your email is successfully delivered.
  • As user you will receive a copy of the email that you send.

Features

Existing Features

Features Left

• Allows user to do unlimited search per day, actually free Marvel API allows only 3,000 request per day
• Allows fullscreen slider view for all comics.
• Allows content translation
• Allows user to get Marvel´s Cinematographic Universe information

Used Technologies

Marvel Search Tools was developed using the following technologies:

• [Marvel API] (https://developer.marvel.com/)
  • As source of all Marvel characters, comics, series and events information.
• HTML5
  • As markup language for web design.
• CSS3
  • As style sheet laguage, used for describing the website style and presentation.
• Bootstrap 4
  • For quicky design and customize as responsive mobile-first website.
• JavaScript
  • For give functionallity and make it user-interactive.
• [jQuery] (https://jquery.com/)
  • As javascript library for html document manipulation and event handling.
• EmailJS
  • Allows to send email directly from contact page.
• GIT
  • As version control system.
• [GitHub] (https://github.com)
  • For hosting repository
• GitHub Pages
  • For hosting and deploying the website.

Also use the following tools:

• Visual Studio Code
  • As Integrated Development Environment (IDE).

Testing

Deployment

Credits

This Project is inspired on:

• [Google Search Page] (https://www.google.com/)

Media and Information:

All images, logos and information are property of Marvel Comics or related company.

Acknowledgment

I would like to acknowledge to the following persons:

• God, my father. He give me the inspiration and the ability to do this.
• Diego, my little son. He is my motivation and my strength.
• Irlanda, my wife. She took care of everything so I could focus on the project.
• Precious Ijege, my mentor. He guide me through this project.