The app is meant to become a sort of a “wiki” or reference for “heroes” from the show ‘One Punch Man’. The app allows you to contribute in populating, as well as, correcting and removing information on these “heroes”.

The project’s target market: This website/app is intended to become a sort of reference or guide to characters, specifically, “heroes” from the show One Punch Man and is hence intended for an audience that likes the show One Punch Man and would like to know about the characters.

What my target audience wants to achieve: The target audience is people who really enjoy the show One Punch Man and they would like to contribute to a stylised collection of hero “cards”, which contain information about heroes from the show.

The Font: The choice to go with the ‘Bangers’ font from Google fonts was deliberate. The idea was to bring a comic book aesthetic to the presentation of the website. I felt that the ‘Bangers’ font struck a good balance between legibility and the style I was going for well enough to make it look fun, yet, functionally effective at the same time.

Wireframes Wireframing was done using Adobe XD. Here is a link to the wireframes: wireframes

Add a hero - Allows people to populate the app with information about new heroes.

Edit a hero - Allows people to contribute by editing/correcting information about heroes in the app.

Delete a hero - Allows people to delete irrelevant content.

Look up information on characters - People can look up information on heroes from One Punch Man.

Guide - There is a guide available on the website with instructions on how the app can be used.

• Ability to add profile pictures to the hero cards.
• Trivia section in the cards.

This project makes use of the following technologies:

• Html
• CSS
• Bootstrap for CSS and Javascript built on jQuery
• JavaScript (jQuery)
• Python
• Flask
• Chrome developer tools
• w3c markdown and css validator
• Font Awesome Icon Library v4.7
• GitHub / Git versioning
• MongoDB
• Heroku

• Responsiveness has been tested using Google Chrome developer tools.
• CSS has been tested and validated using the w3C CSS validator
• HTML has been tested and validated using the w3C HTML/Markdown validator
• Flask/python and app functionality has been tested manually using the IDE (Visual Studio Code) as well as Google Chrome’s developer tools.
• MongoDB’s connection and functionality has been tested and checked manually through the app, MongoDB.Atlas, as well as through the IDE.

Here is a link to the deployed live site: https://herodbci.herokuapp.com/

The site has been hosted on Heroku.