Index
Welcome to -Your Anime Database-, an Anime info based web app made up using React for the client and a Ruby on Rails API.
This is an app where you can store and check data about your favourite series, their actors and characters, and even create a 'Favourite' list for either the animes and characters.
With its design and search engine, it makes incredibly easy looking up for what you're looking for. It comes with a register and login system, where you can create your own user, modify your profile and, by becoming and admin, administrate all the info in the database.
Anime's popularity has grown so much in recent times, and the demand for fast answers its even bigger.
Therefore, is logical to think of the possible usage of a fast and user firendly web app where you can store all this information that everyone is talking about at this moment.
This is a personal project (The technologies used where demanded by Usabi)
So, the idea of the project is to create a place to store and easily find information about animes, actors and characters, giving the tools to make it as comfortable as possible.
Next, I will describe how the database is made, the entities and relathionships that exist and all the atributes.
For this app, I created four entities: Anime, Actor, Character and User.
They all have a unique id, base of an auto-incrising integer assigned by the database.
The rest of the attributes are mostly strings, except from the following:
-
Anime:
- Premiered: Integer
- Episodes: Integer
- Poster: Image
- Thumb: Image
-
Actor:
- Age: Integer
- Img: Image
-
Character:
- Age: Integer
- Img: Image
-
User:
- Age: Integer
- Profile_picture: Image
- Profile_image: Image
For the first three entities, you don't have too much restrictions. You just need a title or a name to create an entry.
For the rest attributes you just have to put the correct data and there you go.
For the User you have to sign up with a valid email, and the password has to have at list six characters. You also need to provide a user_name.
As seen before, there are four relathionships between the four entities.
They are the following:
- Anime-Actor: One Anime has many Actors / One Actor belongs to one Anime
- Anime-Character: One Anime has many Characters / One Character belongs to one Anime
- User-Anime: One User has many Animes / One Anime has many Users (this is used for the 'Favourite' list)
- User-Character: One User has many Characters / One Character has many Users (this is used for the 'Favourite' list)
Here we can see that we have two One to many and two Many to many relathionships.
As you would now, we then have to add one more attribute to Actor and Character. The id of the Anime they belong to.
We also then have to create two more tables. One for each Many to many relathionship.
We add these:
- User-Anime: With the User Id and the Anime Id
- User-Character: With the User Id and the Character Id
To see the postgre database generation code, head to animes/db/schema.rb
- Platform
- The project will be a web app
- Main purpose
- Store, manage and check data about anime series.
- Store, manage and check data about an anime's actors.
- Store, manage and check data about an anime's characters.
- Interfaces needed
- Home Page (App presentation)
- About Us (App functionalities explanation for the users)
- Anime Browser (Displaies all or a Search result)
- Anime Info Page (Includes a list of actors for that anime)
- One Anime Characters List Page (You access it inside the Anime Info Page)
- Actor Info Page (Information about one actor)
- Character Info Page (Information about one character)
- Add New Anime Page (Accessed from the Anime Browser)
- Update Existing Anime Page (Accessed from the Anime Info Page)
- Add New Actor Page (Accessed from the Anime Info Page)
- Update Existing Actor Page (Accessed from the Actor Info Page)
- Add New Character Page (Accessed from the One Anime Characters List Page)
- Update Existing Character Page (Accessed from the Character Info Page)
- Users
- There will also be a Sign Up Page, Sign In Page and a User Personal Page
- Each User can have one of two roles: Normal User or Admin User
- Every User will have a 'Favourite Animes' Page and a 'Favourite Characters' Page. Once you are logged in, a button (Add Fav) will appear in the Anime / Character Info Page. Unless you already have that Anime / Character added to your favourites. On that case a 'Del Fav' button will replaced the prior mencioned.
- Only the 'Admin Users' will be able to either Create, Update or Delete the Animes / Actors / Characters data.
We could say that this project is divided in three parts:
- Frontend / Web Client: Made using React
- Backend / API: Made using Rails
- Database: Made with PostgreSQL
When using the app, you interact directly with the Web Client.
This provides a good looking, easy way to manage and check the information from the database in a way that everyone can understand.
However, there is still one step in between the Web Client and the database. And that is the API.
The API acts like an interpreter between the other two parts of the project.
It communicates with the database in a certain way it understands (SQL sentences) and also transforms all what have to do with the tables and the relathionships between them into objects to make it easier for the Web Client to understand.
To run this app you can use whatever computer you have and having the necessary tools installed.
Then you can access the Web Client with your same computer or using even your phone.
Now, you can see some screenshots of the project mockups and prototype:
- Home
- About Us
- Browse Info
- Anime
- Characters
- Login
- Register
- User Page
- Posts Pages
- Update Pages
Is all about simplicity. Its visual design and elements were made with the idea of making it easy.
Easy to read, easy to interact... easy to use.
The navigation is easy to learn and remember for the user.
The information shown is displayed in a way that it's easy to found what you are looking for in a short period of time.
The visual design as a whole is minimalistic.
The app goes on with four main colors:
- White (#fff)
- Light Grey (#eee)
- Medium Grey (#353535)
- Dark Grey (#1c1c1c)
I really like to use these kind of soft colors, which I think to be elegant and not disturbing in any way to the eyes of the user.
The app also makes use of red some times (for the logo and error messages).
Talking about errors, these have been kwnown to not happen in the normal execution of the program.
However, and as seen before, these are correctly controlled and notified to the user whenever they happen and don't produce any internal error that isn't shown on the screen.
The project also notifies the user in other cases, like when some information is incorrect during a sign up, or when you log out, for example.
The project also has a loading feature so the user can always know what's happening.
For this project I used Abel (A Google Font).
This is a modern interpretation of sans serif.
It was originally used for newspaper headlines and posters. Its angled terminals and spiked stems give it enough style to be unique at display sizes, while its mono-weight still works well at smaller text sizes.
The user also has a customizable page where they can check their personal info, and the famous 'Favourite' lists.
They are consistent. As you could have seen in the prototype, there are certain paterns thaht repeat themselves.
This makes it easier for the user to navigate and use the app, as well as making the learning process faster.
Every text (Apart from the anime's plot and the About Us Page) is small, short, easy to read.
If there was a lot of text, the user could get tired more easily, so we can make the experience more comfortable by using small texts.
As an app about TV series, you can spect to see a lot of posters and images.
However, these images don't overcharge the page, are easily distinguishable and, most times, are your way in to the information stored in the database.
Again, using the minimalistic design of the app, we can display all these different images and still looks nice and elegant.
Again, all these things were made with simplicity in mind. Looking for an esay and fast way to do everything while keeping good aesthetic.
Next, I will address the guides necessary to install and get the project running:
To get this app running you'll need to install NodeJS, Yarn, Ruby 2.6.8 with Rails 6.1 and PostgreSQL (I use PostgreSQL 14).
Here you have some links:
- NodeJS Download
- Ruby Download
- Ruby on Rails Installation Tutorial
- PostgreSQL Download
After installing NodeJS, run the following command to install Yarn:
npm install -g yarn
Once you have everything downloaded and installed you'll need to run a few things in the command prompt.
I recommend using the Git Bash. It's comfortable and shouldn't give you any problem.
- Git Download
The Backend is created with Ruby on Rails and uses PostgreSQL for the database.
Ruby is an interpreted, high-level programming language designed with an emphasis on programming productivity and simplicity.
Rails is a model-view-controller framework for Ruby. It is used to create server-side web applications.
PostgreSQL is one of the biggest relational database management systems. It emphasizes extensibility and SQL compliance.
In the animes folder you need to run bundle install.
If the bash doesn't recognize bundle, try running gem install bundler first.
Then, head to config and delete credentials.yml.enc.
Now, run the command EDITOR=nano rails credentials:edit and add the next code:
devise:
jwt_secret_key: <rails secret>
Where it says rails secret you have to put the secret code that the API will use in the encryptation of user credentials.
You can generate that secret code of your own by running that same command in the bash:
rails secret
To save and close the file, press Ctrl+X, Y and then Enter.
Also, you will have to create a file called application.yml inside the config folder.
To do so run the command bundle exec figaro install.
In that file, you will have to write the following:
development:
host_postgres: your_host
port_postgres: "your_port"
username_postgres: your_user
password_postgres: your_password
This is done this way for security reasons, keeping all your PostgreSQL information in private.
Lastly, run rails db:setup and it will generate the entire database for you. It will be empty, though.
If you want to insert some test data into the database (Not necessary) I recomend using Postman.
To do almost every request to the database, you need to have an auth token. So, you'll have to sign up and sign in first.
Check the following document to see some useful screenshots:
This is a React frontend.
React is a JavaScript library for building user interfaces based on UI components.
The frontend preparation is easy. You just have to access animes-frontend and run npm install.
You don't need to have any data already in the database you will be able to do every action since the beginning from here.
Both Rails and React uses port 3000. However, this is not a problem.
Run the backend with rails s.
It is possible that running rails s throughs you an error the first time. The terminal will require you to run yarn install --check-files. Do so and then you should be able to run the server as normally.
Then, run React using npm start. It will ask to auto-select another port. Press Y and the app should start.
When you first enter the app (If you didn't insert any data) you will see an empty page.
To start filling it up, you will first need to create an account and give yourself the Admin role.
From this point, you can start creating and updating the information that you want to add to your database as well as navigating in all this easy to use application.
It's really that simple. You go to the Anime browser and feel that something is missing. Go ahead an press the Add Anime button.
The same goes to the Actors and Characters.
If the database already has some data, you may as well start as a normal user, and take advantage of the benefits of having an account by adding some animes to your favourites with that big Add Fav.
Maybe do the same with some characters.
You also may want to just enter an search some information. You don't even need to sign up for that.
Everything is there for the user. Nothing is hidden or out of view.
Just enjoy yourself.
In this part, I'm going to compare the three technologies that I use with other ones similar to them and / or with the same purpose.
Probably, the most logical comparison here for React is Angular.
React, as we already know, is a JavaScript library for user interfaces creation.
Angular is a JavaScript framework for web and mobile development based on TypeScript.
Both are used for similar purposes. Both are perfectly valid for web and mobile development, although both have some "limitations" in this last field.
React needs Cordova to work on mobile phones, and also there is an aditional library called React Native.
Angular also has an aditional framework (NativeScript), and great part of the job is made by Ionic.
Talking about complements, Angular easily wins that.
It is a complete framework, and it normally doesn't need any aditional libraries.
On the other hand, from React can be harder to comunicate with your API, yo most probably end up using axios. For the routing, you'll need something like React Router. And the list continues.
All this process however, is easy to learn. No hard functions, no templates. It has what it has and you get on with it. It's "simple" (Big quotation marks there).
Angular has a lot of things. To learn everything about Angular is challenging. But, it is well organized. So, it is easy to look for some component or whatever while developing an app.
React is also beaten in this aspect, as you can put your files however you want and, if you are not careful, that can end up being quite of a mess.
Having all in consideration, I prefer React.
I found it really fun to use and with a lot of potencial.
Ruby on Rails is complicated. It is easy to use but really hard to learn.
As we used it to create an API with an ORM, we could compare it with Spring Boot.
There are some similarities between how these kind of tools operate when creating API.
You will always need to establish the database information, controllers, models...
The main thing here is that you have to create those in Spring Boot.
But, with Rails you just have to run a command and it'll do the rest for you.
Create a model, create a controller, create the migration for the database... everything.
Speaking of which, Rails also creates the database for you. The Schema is in one of the Ruby files and you don't even have to export and import the database or do manual changes. You just run a command.
If I had to think about negative points for Rails, I'll found a bunch of them. But, the most important being this a comparison are these:
- It's hard to learn
- It's slower
Rails is hard to learn. It gives you everything done, which is great. But, if you want to change or custom something, you just don' know how.
Also, Ruby (As we said before) is an interpreted language, and not a fast one.
Spring is based on Java, a compiled language. This means that it takes a few seconds to start but, when it does, it is super fast.
Rails just isn't.
Don't get me wrong, is fast. A human can nowadays barely tell the diference between these things. But it is inevitable that, being interpreted, is going to be a bit slower.
PostgreSQL is mostly like MySQL, which I found really easy to use.
Though you won't need to use it very much if you are using Rails as I did.
I could not tell any significant difference between Postgre and MySQL. They have some syntax differences, but they work almost equaly.
I would recommend both if they case was given.
My idea was to divide everything in more specific tasks.
I also followed some rules:
- From general to detail
- This means that first I do a working CRUD and then I validate the forms, do the searcher engine, pagination...
- What I already know first
- Instead of thinking of what I don't know how to do, I just started on what I did know and leave the rest for when it was time.
- Make it work, then refine it
- Do your code, make it work. Efficiency comes later.
Following these rules, I was able to carry all this project and make it to where we are now, which is this point, actually:
It's been fun to work on this project.
Luckily, I could do it almost completely free, so I did it how I felt and about a topic I like.
I hadn't used any of the technologies before so, I had some really hard moments trying to do something seemingly imposible, just to end up achiving it in the end.
I've learnt a lot doing this project and I'm already looking forward on the next one. So yeah, that's it.