B.
Back to projects

Animehi Stream

AnimeHi is an anime streaming service that uses the consumet API with anilist integration. No ads and no vpn required.

6 min read
By Benjo Quilario
Next.js
Anilist
TypeScript
React
Watch
Scrape

LiveUrl: https://animehi.live.

GitHub: https://github.com/benjoquilario/animehi-stream Repository

Note: The repository is not available yet, but it will be soon. The link provided is for the first version of the project and the foundation of this, which is still similar, and I will update it soon.

AnimeHi-Home

I do not suggest using this service to watch anime illegally. This project is for educational purposes only and should not be used to infringe on any copyrights.

It's incredible how much knowledge and experience I gained from working on this project.

Building a scraping service like AnimeHi was challenging, and I continue to face several issues that still need to be resolved, such as:

The Problem

  1. CORS Issues: Dealing with CORS is not an easy task, especially when scraping content from different domains. Images and streams are usually block by CORS.
  2. Finding a Anime Scraping Website: For the incoming depracation of CONSUMET API. I need to scrape the website myself.
  3. API Limitations: Anilist have rate limits and restrictions on how much data can be fetched, which can hinder the scraping process.
  4. Choosing a Hosting Provider: Finding a hosting service that can handle the required traffic and provide sufficient resources for scraping is challenging. My first choice was Vercel, but Vercel's infra is expensive for bandwidth. Additionally, Vercel's terms of service (Section 5.15) prohibit the use of their platform for scraping activities.
  5. VPS: The next option is to use a VPS, which offers more flexibility and resources. However, managing a VPS means you are responsible for server administration, including implementing security measures, configuring SSL certificates, and handling other essential setups.
  6. CI/CD: Setting up a CI/CD pipeline for this project is also a challenge, unlike Vercel, where you can easily deploy your project with a single click, using a VPS requires more manual setup and configuration.
  7. Constant Maintenance: Scraping another websites require constant maintenance to ensure that the content is up-to-date and the scraping methods are still working. Websites change their structure frequently, which can break the scraping logic.

The Solution

  1. Proxy Server: I used a proxy server to bypass CORS issues, allowing the service to fetch images and streams without restrictions. There are open source M3U8 proxies available in github which can help to bypass CORS erros.
  2. Scraping: I implemented a scraping solution using Cheerio to extract anime data from various websites.
  • I used the Anilist GraphQL API to fetch anime data, which provides a rich set of information about each anime title.
  • I used Kuroiru to scrape the website, which has 28k tracking anime website
  • I used https://arm.haglund.dev/docs for mapping the website using anilistId.
  • I used aniwatch-api to get the video sources from hianime.to
  1. Caching: Implemented caching mechanisms to store frequently accessed data, reducing the load on the Anilist API and improving response times. Redis and Session Storage are used to cache the data.
  2. Hosting: I chose DigitalOcean Droplet to host the service, I'm using a 4GB RAM and 2 CPU cores, which is sufficient for the scraping tasks. I also used Docker to containerize the application, making it easier to deploy and manage.
  • Special thanks to Github Student Developer Pack for providing free $200 credits to use DigitalOcean Droplet.
  • If you are a student, you can apply for the GitHub Student Developer Pack to get free credits and access to various developer tools.
  1. CI/CD: I set up a CI/CD pipeline using GitHub Actions to automate the deployment process. This allows me to push changes to the repository and have them automatically deployed

Pipeline Flow

Developer Push → GitHub Actions → Build Docker Image → Push to GHCR → Deploy to Droplet → Health Check → Success!

Features

  • Anilist Integration: Fetches anime data from Anilist, providing detailed information about each anime.
  • No Ads: Enjoy an uninterrupted viewing experience without any advertisements.
  • Watch History: Keep track of your watched episodes and continue watching from where you left off (Anilist login required).
  • User-Friendly Interface: Intuitive navigation and clean design for easy browsing and watching.
  • Dark Mode: Switch between light and dark themes for a personalized viewing experience.
  • Bookmarking: Save your favorite anime for quick access later (Anilist login required).
  • Comments and Reviews: Engage with the community by leaving comments and reviews on anime titles.
  • Replies and Discussions: Participate in discussions about your favorite anime, sharing thoughts and opinions with other users.
  • Advanced Search Filters: Filter anime by genre, release year, and other criteria to find exactly what you're looking for.
  • Schedule List: Get notified about new episodes and updates for your favorite anime, ensuring you never miss an episode.

Technologies Used

  • Next.js
  • TypeScript
  • React
  • Consumet API
  • Anilist API
  • Tailwind CSS
  • Cheerio
  • Docker
  • Redis
  • PostgreSQL
  • DigitalOcean Droplet
AnimeHi-Info AnimeHi-Watch

Future Enhancements

  • Watch Together: Implement a feature that allows users to watch anime together in real-time, enhancing the community experience.

  • User Profiles: Allow users to create profiles, customize their experience, and track their anime watching history.

  • Notifications: Implement a notification system to alert users about new episodes, comments, and replies on their favorite anime.

  • Mobile App: Develop a mobile application for iOS and Android to provide a native experience for users on the go.

  • Social Sharing: Enable users to share their favorite anime on social media platforms, increasing visibility and engagement.

  • Advanced Analytics: Implement analytics to track user behavior, popular anime titles, and engagement metrics, helping to improve the platform over time.

  • User Feedback: Create a feedback system to gather user suggestions and improve the platform based on community input.

AnimeHi-Profile

I know that I'm being a redundant here, but I want to emphasize that AnimeHi is a personal project and is not affiliated with any official anime streaming services. It is intended for educational purposes and to demonstrate the capabilities of Next.js, TypeScript, and React in building modern web applications.

I will probably shut down the service after I have spent the $200 credits.