How I made a kickass Anime application
An introduction to Monimo
Why Monimo 🦉
Why do I like Netflix? I don’t like Netflix. I love Netflix. I hope that one day, I’ll be working for Netflix. Its one of the best made applications ever. Probably not noticed by the average Joe, but I think we as web developers can agree that its the pinnacle of user experience on the web. The consistency, animations, speed and all around accessibility is second to none in the industry.
Its one of the reasons people are moving/moved🤔 away from torrenting their favorite shows. A deal-breaker for these individuals in most streaming services is the small library selection offered. But as we can see, Netflix still managed to turn the crowd around, and I think user experience played/plays a major role in that.
In developing countries, this is hardly the case. And bear with me here, its not only because of the prices.
But anyway, I’m going to start off with the price argument. Regional pricing system should’ve started kicking in by now. It is unfair to charge people from Moldova, where the average salary is 250$, the same price you charge people from US, where the average salary is at least three times that.
Now lets say Netflix can’t afford that, and Moldova leaves everybody in awe when they turn around their economy and are now making just as much as US. Average salary now is the same. What now ?
Well, Moldavians still can’t enjoy the library US citizens can. To be exact, they can only watch less than 35% of the selection that is available to people from the US.
And that is just the worst. Its discrimination. Its makes people angry. It made me angry. While in US, I subscribed to Netflix for the sole reason of binge watching The Office every other day. I like The Office okay. Sue me. No, don’t sue me. That’s the opposite of the point I’m trying to make. Anyway, when back in Europe, I couldn’t because Netflix had no regional rights to that TV show.
So what are we going to do about it ?
Personally, I decided to make an app, which would give me a similar experience to what Netflix has, while still using different web link providers (not necessarily ethical) to stream my favorite shows. And when I say shows I mean Anime shows. Anime being sort of an animation style that origins in Japan. And its awesome.
How Monimo
Glad you asked! Well I started making a PWA which would be deployed in a hosting service and then used by fans all around the globe.
I started making some designs and just brainstorming. Here is the first idea I came up with.
Well as you can see, I wasn’t really interested in making the best and most feature-filled application there. I wanted a good experience. As you can see by the doggo quote on the initial design, its a very refreshing application. I wanted it to work on three levels:
1) Simplicity
2) Warmth
3) Accessibility
I do these kinds of things just for the heck of it. And some are fortunate enough to survive past my laziness phases. Monimo is one of those.
I started to write the code for the frontend almost immediately. The app had 3 nested views: Home, Anime-Details and Player. Finished it all in 3 hours or so.
Second step was the most important one. Making it functional. You know, finding good API-s is just impossible, especially for non-ethical needs. But I did. Actually it wasn’t all that hard. That’s what she said.
I stumbled upon MasterAni.me by accident actually. An episode I was expecting aired on a late sunday afternoon and I thought hey this web application looks super quick, almost like a SPA. Then I checked the network tab, and there it was, the link to their API ! Such a happy moment.
From there, I built a nodejs scrapper, which used headless browser to make requests, as direct requests to the API were getting refused because of different origins. It worked. Super slow, but it worked !
I was scraping iframe links, and displaying them in my site. But there I had no power. And it was such a shame. There were tons of ads there, and some videos were failing to play. Such a mess. I wanted the user not to see any ads. I wanted to have control over video tags. Resume playing from where user left off. Play next episode automatically. Play current episode automatically. Skip intro. Just like our beloved Netflix does. And no matter how hard I tried, I just could’nt go around CORS on iframes.
Then an idea came to mind ! Browsers respect CORS just because they want to, and if we wanted, we could explicitly tell them not to. So how can I do that on a client’s machine. Make my own browser and tell them to navigate to my site ? No dummy. That’s not efficient or viable at all. But there’s a cool kid in the block nowdays, its called Electron. Its basically Chrome with a layer on top of it providing access to some System API-s. I just needed the first part.
So I set to make an Electron app. And turn its webSecurity flag off. That means its not safe to browse, but we are not going to hold anything important in our app. So we are good to go. Actually we aren’t going to hold *ANYTHING* in our app.
I was super busy the days this idea came to mind, so that’s where a good friend of mine @shselaci3 came in (He’s available for work yall). He incorporated Electron, and made sure it was working on both systems. We then worked together on implementing different Player features. And some were left for later, but I think we did a great job so far.
And here we are right now. We got a working electron application which will keep track of your favorite animes, resume playing where you left off, skip to the next episode so you can waste your time in a more qualitative fashion. All for free. No ads. For the community!
You can download it here:
https://monimoapp.netlify.com/
And source code is available here:
https://github.com/altinselimi/monimo
DISCLAIMER: Monimo does not store any videos or such copyrighted files. It is a free application provided as-is. All the links used for displaying the videos are scraped from websites such as: KissAnime, Gogoanime, 9Anime and Masterani.me. Creators and maintainers hold no responsibility for whatever may happen in your machine. Make sure you are downloading the application through our github releases links.
