anisun

A web app for exploring anime with extensions support

The initial goal of this project was to replicate a Tachiyomi-like experience for watching anime on a website.

<p align="center"> <strong>English</strong> | <a href="https://github.com/notwindstone/anisun/blob/main/docs/README_russian.md">Русский</a> </p>

</div>

Screenshots

<details> <summary>Expand</summary> <div align="center"> <img src="screenshots/anime-tatar-library.webp" width="49%" alt="Library page screenshot (desktop, dark theme)"> <img src="screenshots/anime-tatar-extensions.webp" width="49%" alt="Extensions page screenshot (desktop, dark theme)"> <img src="screenshots/anime-tatar-account.webp" width="49%" alt="Account page screenshot (desktop, dark theme)"> <img src="screenshots/extensions/extension-anime-tatar-svelte.webp" width="49%" alt="Anime page screenshot with Example Svelte plugin (desktop, dark theme)"> <img src="screenshots/extensions/extension-anime-tatar-vue.webp" width="49%" alt="Anime page screenshot with Example Vue plugin (desktop, dark theme)"> <img src="screenshots/extensions/extension-anime-tatar-anime-trailers.webp" width="49%" alt="Anime page screenshot with Anime Trailers plugin (desktop, dark theme)"> <img src="screenshots/extensions/extension-anime-tatar-nso-theme.webp" width="49%" alt="Account page screenshot with NSO theme plugin (desktop, light theme)"> </div> </details>

Features

Extensions in JS (visit docs.anime.tatar for more info)
Anilist integration (and Shikimori in the future)
Searching anime by filters
Watching history
Localization
Theme customization

Performance

Even though this website is written in React, I think I still managed to achieve adequate performance. I tried to make it as smooth as possible while dealing with the monstrous re-rendering nature of React. It should work perfectly on not powerful mobile phones too, both in Firefox and Chromium-based browsers.

PageSpeed Insights

<details> <summary>Expand</summary> <div align="center">

psi-home

psi-library

psi-extensions

psi-account

</div> </details>

Web page size

<details> <summary>Expand</summary> <div align="center">

web-page-size

</div> </details>

Self-Hosting

Vercel

<details> <summary>Expand steps</summary>

Click the button

Navigate to Project -> Settings -> Environment Variables and then add values to the following keys:

NODE_ENV = production
(Optional) HOST_URL = https://your-domain-here.vercel.app - change to your domain that you are going to use in the Shikimori/Anilist integrations
(Optional) SHIKIMORI_CLIENT_ID = yourOwnOAuth2ClientID - only if you want to enable integration with Shikimori
(Optional) SHIKIMORI_SECRET_KEY = yourOwnOAuth2SecretKey - only if you want to enable integration with Shikimori
(Optional) ANILIST_CLIENT_ID = yourOwnOAuth2ClientID - only if you want to enable integration with Anilist
(Optional) ANILIST_SECRET_KEY = yourOwnOAuth2SecretKey - only if you want to enable integration with Anilist

Note: LRU cache might not work as expected, because serverless environments tend to spin down on low load.

</details>

Local

<details> <summary>Expand steps</summary>

If you don't want to use a vercel/netlify/other serverless environment.

Preparations

You need to install:

Node.js
A package manager for node.js (e.g. bun)
Git

After successful installation clone this repository by running:

git clone https://github.com/notwindstone/anisun

Now you can install all project dependencies with bun i

Before you build/start this project, create a .env.local file, follow the .env.example example file and fill in those environmental variables:

NODE_ENV = production - for development builds change to development
(Optional) HOST_URL = https://your-ip-or-domain-here - change to your domain that you are going to use in the Shikimori/Anilist integrations
(Optional) SHIKIMORI_CLIENT_ID = yourOwnOAuth2ClientID - only if you want to enable integration with Shikimori
(Optional) SHIKIMORI_SECRET_KEY = yourOwnOAuth2SecretKey - only if you want to enable integration with Shikimori
(Optional) ANILIST_CLIENT_ID = yourOwnOAuth2ClientID - only if you want to enable integration with Anilist
(Optional) ANILIST_SECRET_KEY = yourOwnOAuth2SecretKey - only if you want to enable integration with Anilist

Development

You can run this app in development mode using bun dev

It will be much slower than the production build, because development mode is intended to use only for development. It builds everything on-demand and supports Hot Module Replacement (HMR).

Termux

To run this project in development mode, use bun run dev:termux

Production

Build this app by running bun run build

Now you can start it by bun run start

If you want to expose your website instance to others, then it is not production-ready yet. You need to install a reverse-proxy like Caddy first.

After you have installed Caddy, you need to rename Caddyfile.example in the root of repository to Caddyfile and change example.com in the file to your domain (anime.tatar in my case). Then just restart it by running caddy stop and caddy start in the terminal.

Be sure you are running caddy start in the repository directory, otherwise Caddy will not use your configuration file.

With Caddy you can also use a Cloudflare proxied DNS for DDoS protection, you just need to set SSL/TLS encryption mode to Full (Strict) and point A-record to your host machine IP.

</details>

Contributing

Contributions are welcome! Check CONTRIBUTING.md

Contact

Telegram - @windst1
Discord - @notwindstone (I may respond slower)

Star History

License

Disclaimer

The developer of this application does not have any affiliation with the content providers available, and this application hosts zero content.

Acknowledgments

zvshka for his help with the project
cos for his help with the UI
Anilist API
Shikimori API

Afterword

Thanks to this project I realized how stupid it was to constantly write useMemo, useCallback, useTransition, etc. to fix slowness on mobile phones (Firefox and old phone specific). I have dropped React completely and transitioned to Vue and Svelte now :3

Anisun

Install / Use

README