Summary
The goal of this page is to practice using Web APIs to request and use data from
another server/third-party source. For this particular assignment, I am using the
Amiibo API, a public API used primarily for education purposes. Using this resource,
I created my own wiki page that returns the amiibos that the user searched for. This
website allows amiibos to be searched using multiple filters, and displayed in a conventional
search engine format.
Key Features
- Fetch API: used to retrieve data from the Amiibo API.
- Multiple Search Filters & Controls: Search by Character Name, Search by Game Series, & Search by Amiibo Type
- Hit Enter to Search: Pressing the enter key while providing input in the searchbar will also do a search.
- Page Navigation: Search Results stored in multiple pages. Conventional page navigation available.
- Search Query Storage: Stores user search filters/query in the browser's local storage, will automatically
load up when page is reopened, if it's in the same browser.
Design Sketches
Image Sources
- Amiibo Logo - Colored: https://static.wikia.nocookie.net/diablo/images/8/87/Amiibo_Portal.png/revision/latest?cb=20180914120522
- Amiibo Logo - White: https://www.nicepng.com/png/full/336-3360667_amiibo-logo-white-amiibo-logo.png
- Search Bar Magnifying Glass: https://www.pngall.com/wp-content/uploads/8/Magnifying-Glass-Search-PNG-Free-Download.png
- Page Navigation Arrow: https://icon-library.com/images/next-page-icon/next-page-icon-12.jpg
Final Notes/Verdict
Considering the functionality my web page has, I'd say I've used the Amiibo API well and exploited its resources for a suitable purpose. There's not too much complexity to my page, and it's fairly straightforward for the user. In addition, I've handled all potential errors well, so the user experience won't be disrupted too much. More importantly, I've added a few unique things to my project, like a fixed header, page functionality and several search filters exclusive to the Amiibo API. I haven't yet figured out how to have the browser size influence the current amount of search results displayed at once, without having to do a manual search again. Plus, I want to see if I can have the user do a search when they press the enter key in the search bar, like a standard search engine. These are stretch goals, so I'll see if I can somehow fit that in before the project deadline. All in all, I believe that my efforts and features prove that my custom Amiibo Wiki Page should receive an A grade.