Anime Flow

Anime Flow
Sept - Oct 2020
HTML5 CSS3 SASS JS JSON Gulp.js

As I am becoming more of an anime nerdd, I wanted to create something for the anime community. My awesome friend stumbled upon this impressive anime flowchart that asks a series of questions to the user, which guides them to what anime they should watch next. It's pretty spectacular actually, but sometimes it's a pain to pull up this very vertical image and squint at the text. So of course I decided to create a web version of this.

Initially I planned to use an offline anime database to get the anime info once the user finds an anime. I deployed this project on Netlify, but sadly it does not support PHP, which would have retrieved the offline database.

Luckily, I had also found Jikan, which offers an API to request anime info, and Netlify supports API calls. This is used to retrieve the anime information based on which anime title the user has selected. Also, this project is shown in Jikan's showcase page!

This is my first time using Gulp.js and wow, it's amazing! Since I use SASS, I need to compile the code into CSS every time I wanted to push. I had a 'watch' script that compiled it everytime there was a file save, so this was the perfect excuse to try out Gulp. Initially I installed Grunt, but most of the plug-ins were out of date, and Gulp's integration with PostCSS made it a much better experience. Gulp currently compiles and prefixes the style, minifies JS and CSS, and updates HTML files and assets, making the build process a breeze.

The project is ongoing to add more features and better UX!