“Japanese Boot Camp” App: Technologies & First Ideas


Second trimester of the school, second Javascript project.
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.

Screen shoot from Rapid API for Anilist. Get the API here.


#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?
React is a library of Javascript, born to ease the UI building.

What does “library” mean?

JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies.

From Wikipedia


#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.

Example of React compoment from ReactJS tutorial
#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.

First Ideas

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.

The second idea definetely implies more interaction, which is a good challange for my javascript skills and for the users themselves.

This article is the first of a series of three.
Do you want to know more about the design process and technical development of this application?

2 thoughts on ““Japanese Boot Camp” App: Technologies & First Ideas

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.