Looking for the previous version? Check the v4 branch
An extension-based web app for exploring anime. Written in next.js with speed in mind
English | Русский
Expand
- They are not using iframes
- Can be written in any JS framework
- Can implement their own pages
- Users don't have any extensions by default
Visit docs.anime.tatar for more info.
- Using as few libraries as possible
- React Suspense for the seamless UI streaming
- Data caching both on the server (using LRU cache & Next.js internal cache) and client
- Optimized React Contexts
- Instant user config load while SSR
- Preferring CSS over JS styles
- Memoizing only those components that truly need it
- Using Server Actions instead of API routes when possible
- Image optimization (built-in sharp & specified properties) and caching for the home page
- Sidebar & mobile navbar routes prefetching
...and a lot of other optimizations
Expand
Expand
- Extensions (need to implement extensions browser)
- Seamless Anilist, Shikimori and MAL integration (only auth part is done)
- Localization
- Theme customization
- Next.js 15 with TypeScript
- TailwindCSS for the UI
- An async state management using Tanstack Query
- Mantine Hooks for general usage on the frontend
- Quick LRU for the in-memory cache
- OAuth2 authorization using arctic.js
- Extensions using Remote Components
Expand steps
Click the button
Navigate to Project -> Settings -> Environment Variables and then add values to the following keys:
-
NODE_ENV=production -
HOST_URL=https://your-domain-here.vercel.app -
(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 -
(Optional)
MAL_CLIENT_ID=yourOwnOAuth2ClientID- only if you want to enable integration with MyAnimeList -
(Optional)
MAL_SECRET_KEY=yourOwnOAuth2SecretKey- only if you want to enable integration with MyAnimeList
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
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
But 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
- zvshka for his help with the project
cosfor his help with the UI- Anilist API
- MyAnimeList API
- Shikimori API
Important
The developer of this application does not have any affiliation with the content providers available, and this application hosts zero content.
ask about using this logo (waiting for response)
https://x.com/ahiru_tokotoko/status/1568517301737242625
- Shikimori, MAL and AniList integrations