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.
English | Русский
Expand
- 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
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.
Expand
Expand
Expand steps
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.
Expand steps
If you don't want to use a vercel/netlify/other serverless environment.
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/anisunNow 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 todevelopment -
(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
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).
To run this project in development mode, use bun run dev:termux
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.
Contributions are welcome! Check CONTRIBUTING.md
- Telegram - @windst1
- Discord - @notwindstone (I may respond slower)
The developer of this application does not have any affiliation with the content providers available, and this application hosts zero content.
- zvshka for his help with the project
cosfor his help with the UI- Anilist API
- Shikimori API
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