As for Music Battle Game, we where required to design and develop a Single Page Application (SPA); this time though, we were free to select
any API from a free marketplace online.
The API I have choosen from RapidAPI website is about a topic really close to my private life: Japanese Animation and Comics.
AniList indeed has published a free API where you can find a collection of low and high level information about any japanese series ever produced, arranged by year of production, popularity, etc.
The amount of information is unbelivebly huge – here an example of data you can find in their API.
#1 – Free access to public data
The advantage of using this particular API resides on its free access, which allows everybody to use their data without any mandatory sign in (translated in coding terms, it means access tokens are not required in order to get AniList public data; really cool and handy!).
#2 – GraphQL
GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.From GraphQL website
GraphQL is quick: querying only a certain type of data is really beneficial in term of response, which is more immediate and predictable than making a full request to the database.
Apps using GraphQL are fast and stable because they control the data they get, not the server.From GraphQL website
The main difference about this project from my previous one is the technology implied. In fact, as part of the deveolpment of our skills it was required to code the app using ReactJS.
What is React?
What does “library” mean?
#1 – Components
“Components” are the pillars of React: these are pieces of code composed by a declaration of properties, functions to define actions the system must take, and a final render part where the use of JSX create a powerful tool which allows an easy-to-manage way to handle the UI.
Remember that the one below is just an example of typical style conding for components, but, thanks to their flexibility, there are many other ways to structure them.
#2 – Recycle of components | Import/Export
You write code once, you use it whenever and wherever you need it.
React has been thought to divide code in different pages and reuse it wherever you need it inside the application.
As a result, it is now possible to write short pages of code, export the components and import those in another page. Also…
React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.From React documentation
#3 – This.state usage
The scope usage in React is definetely handy. You can define your var, const, or function where you need it in your code page and through a structured flux of data, transfer and use it in another part of the component.
That is useful, for instance, when you want to change the value of an element, but just in a specific situation without changing its intial value. And you can easily do that calling variables and functions with the keywords “this.” or “this.state.” before their names; the system will “import” their values, then you can manipulate the elements to your preference.
After browsing a while on the API documentation I came up with two ideas for my future app:
#1 –Animation and Comics Encyclopedia
As from the title, this app implies a main screen which displays a list of data accessible by any user.
OBJECTIVE: Make japanese animation and comics info easily accessible by anyone.
USERS GOAL: Have an online platform as a benchmark where to deeply search info about their favorite anime, or discover new possible favourites!
#2 – Japanese Boot Camp – with Anime and Manga
Roughly, a game which implies guessing the japanese title of the anime or manga from its reference image displayed in the main screen.
OBJECTIVE: Mixing the passion about anime and manga culture with a fun training about how to write in japanese.
USERS GOAL: Increase japanese language skills by exercising on writing down the names of their favourite series!
Between the two, the second idea was definetely the winner.
A complete guide about japanese anime and manga is indeed a good idea that can give value to a certain community of people, but AniList itself (i.e. the service which provides the API) has got a fully working website that does exactly the same thing (and also more).
So, what kind of value could provide to my users reproducing something already existing?
Sure, I could have tried to make the app more user friendly than the AniList one focusing more on the UX design, but the objective of the class is learning how to code; so I would have lost the purpose of it.