Important

The application is currently being refactored. Link to the branch: https://github.com/windstone-aristotle-yellow/animeth/tree/refactor

Animeth

A web app for watching anime built with Next.js and Mantine UI

English | Русский

📱 Screenshots

Note

Work in progress. More screenshots will be available soon.

⚙️ Tech Stack

• Next.js with TypeScript

• Mantine UI and PostCSS for UI

• Drizzle ORM and Neon Serverless DB for database

• Tanstack Query and axios for fetching data from APIs

• Slider for anime cards based on Embla Carousel and Mantine UI Carousel

• Clerk Auth for auth

• Video player for Anilibria API based on Vidstack.js and HLS.js

• KodikWrapper for fetching data from Kodik using Shikimori ID

• Notifications system based on Mantine UI Notifications

• Date formatting with Day.js

• CSS-modules

⭐ Features

• Watch anime with subtitles or dubbing (only on Russian language)

• Download anime using torrent or directly from website

• Account authentication

• Heavily nested comment system like on reddit

• Dark and light themes

Note

Work in progress...

✅ To-Do List

• Add the option to .env to use a database based on value

• Add option to download anime using torrent or directly from website

• Localize website with Internationalization (i18n) Routing

• Add subtitles from SovetRomantica API

• Add permission groups (administrator, member) to users

⬇️ Self-Hosting

Local

Preparations

Expand steps

Cloning the repository

1. Clone this repository by running git clone https://github.com/windstone-aristotle-yellow/animeth

2. Rename the .env.example file in the root directory to .env.local

Configuring Clerk auth

1. Sign up for a Clerk account at https://clerk.com

2. Go to the Clerk dashboard and create an application

3. Go to API Keys in your sidebar and copy Publishable key (Example: pk_test_qwertyuiop1234567890)

4. Paste your Publishable key to NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY in the .env.local file

5. Go to API Keys in your sidebar and copy Secret keys (Example: sk_test_qwertyuiop1234567890)

6. Paste your Publishable key to CLERK_SECRET_KEY in the .env.local file

Database configuration with: 1. Neon Serverless DB

You can use Neon Serverless DB as a database. If you are going to use local PostgreSQL database, then skip this configuration

1. Sign up to Neon DB at https://neon.tech/ to access serverless Postgres by creating a project

2. Go to the Neon dashboard and copy Connection string (Example: postgres://postgres:adminadmin@0.0.0.0:5432/db?sslmode=require)

3. Paste your Connection string to NEON_DATABASE_URL in the .env.local file

(Didn't test yet) Database configuration with: 2. Local PostgreSQL

You can use local PostgreSQL as a database. If you are going to use Neon Serverless database, then skip this configuration

1. (Temporary) Go to the src/db/drizzle.ts path and remove // symbols to comment out the Neon Serverless DB configuration code

2. (Temporary) Now uncomment out the PostgreSQL DB configuration code

3. Go to the .env.local file and paste your connection string to POSTGRESQL_DATABASE_URL

Final steps

1. (Optional) If you want to watch anime in Kodik Player too, then obtain a token from http://kodik.cc/ (you need to contact them via email) Otherwise, only players based on the Anilibria API will work

2. Run npm install to install the required dependencies

3. Done! Your web app is ready to start

Important

This is what the .env.local file should look like with Neon Serverless DB configuration

NEON_DATABASE_URL='postgres://postgres:adminadmin@0.0.0.0:5432/db'
POSTGRESQL_DATABASE_URL='CHANGE_IT_postgres://postgres:adminadmin@0.0.0.0:5432/db'
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_qwertyuiop1234567890
CLERK_SECRET_KEY=sk_test_qwertyuiop1234567890
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
KODIK_TOKEN='qwertyuiop1234567890'

Important

This is what the .env.local file should look like with PostgreSQL DB configuration

NEON_DATABASE_URL='CHANGE_IT_postgres://postgres:adminadmin@0.0.0.0:5432/db'
POSTGRESQL_DATABASE_URL='postgres://postgres:adminadmin@0.0.0.0:5432/db'
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_qwertyuiop1234567890
CLERK_SECRET_KEY=sk_test_qwertyuiop1234567890
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
KODIK_TOKEN='qwertyuiop1234567890'

Development

If you want to run the application in development mode

npm run dev

Production

Tip

Run the application in production mode if you don't know which to choose

If you want to run the application in production mode

npm run build

npm run start

Website URL

Open http://localhost:3000 with your browser to see the result.

Vercel

Note

Work in progress...

Expand steps

Check out Next.js deployment documentation for now

💬 Contact

Directly

• Telegram - @windst1

• Discord - @notwindstone

Through our Telegram chat or Discord server

• Telegram - Клуб фанатов партии любителей пива

• Discord - Сага о сервере

❤️ Credits

• zvshka for his help with project

• Shikimori, Anilibria and Kodik for their wonderful APIs, without which Animeth could not work

• Sora and Sync for Reddit. Some of the UI designs are borrowed from them

• Node-shikimori wrapper. Some of the codes are borrowed from them

📜 License

🌐 Cool resources

• Refactoring Hell

• Conventional Commits

• Realtime Colors