My Anime List
Keep track of your anime watch list.
Context
The purpose of this project was to develop an interactive list-based interface that uses interface components, and ties the components to an internal data state. Furthermore, we had to implement some sort of sorting and filtering functionality. And so, I decided to create an interface that would allow users to look through various anime and add them to a watch list where they can see how many total episodes they would have to watch to get through their entire list. They can sort by the score rating of the anime in both ascending and descending order. They can also filter by the form of anime as well as the age rating of the anime.
The Interface
Design
These are some of the things I was cognizant of when designing the interface.
Usability Principles Considered
Clarity - I use words that the average person can understand such as watch list, rating, and type.
User Control and Freedom - I added a reset button where the user can get rid of any changes that they made and go back to how they first saw the website.
Consistency and Predictability - I made sure that the terminology that I use is consistent such as add to watch list and remove from watchlist.
I have 4 total components: Header, AnimeList, AnimeCard, and WatchList. App calls Header and AnimeList. AnimeList calls AnimeCard and WatchList.
State and Data
How Data is Passed Down Through Components
AnimeList calls the API and gets all the information about various anime. The information gets passed down to AnimeCard and gets mapped onto a card. Those cards are returned to AnimeList and gets mapped on to a Grid List to be displayed. AnimeList also passes to WatchList the various anime that the user decides to add to their watchlist. WatchList then maps each of those anime titles to their episode and returns it to the AnimeList for it to be displayed and for it to calculate the total number of episodes to be watched.\
How the User Triggers State Changes
I have around 10-11 different states. The user triggers them by clicking on various filters such as the type or rating filters. The user alsos triggers stage changes by clicking on anime to add to and remove from their watch list. Some states are used to keep track of other states.
Conclusion
Creating this anime watch list interface taught me a lot. I had to learn how to use APIs to get data from another source so that I could display information on my website. I also learned what states are and how states change based on user interaction. Furthermore, I now know how to implement filtering and sorting features which will definitely be helpful for a variety of websites, but especially ecommerce sites. If I were to continue this project I would probably have to learn about data bases so that I can implement authentication and store user information to their account. An important lesson that I learned was that when you truly understand something, like state changes for example, implementing it becomes a lot easier.