Skip to content

My first project on Next.js 14: an anime streaming website/PWA based on Shikimori, AniLibria, Kodik, SovetRomantica and Animetize APIs with the Mantine UI kit.

License

Notifications You must be signed in to change notification settings

notwindstone/anisun

Repository files navigation

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

I'm currently refactoring this app. You can check the progress here: v5 branch

English | Русский

GitHub Repo stars Discord Server

📱 Screenshots

More screenshots

Expand

⚙️ Tech Stack

⭐ Features

  • Watch anime with subs or dubs (in English or Russian)

  • Download anime using a torrent or directly from the website (.m3u8)

  • Account authentication

  • Heavily nested comment system like on reddit

  • Dark and light themes

  • Anime search with filters

  • Custom navigation bar using a Next.js router for faster navigation between routes

...and a lot more!

✅ To-Do List

  • Website internationalization with next-intl

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

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

  • Add subtitles from the SovetRomanticaVideo API

  • Complete the page with an anime search and filters

  • Finish comments

  • Complete the page with popular anime

⬇️ Self-Hosting

Local

Preparations

Expand steps

Cloning the repository

  1. Clone this repository by running git clone https://github.com/notwindstone/anisun

  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

  4. Make sure the DATABASE_TYPE line in the .env.local file is set to NEON

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. Go to the .env.local file and paste your connection string to POSTGRESQL_DATABASE_URL

  2. Change DATABASE_TYPE to POSTGRESQL in the .env.local file

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. Create a comments table in the database using the command npx drizzle-kit push:pg

  4. Done! Your web app is ready to start

Important

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

DATABASE_TYPE='NEON'
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=/
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/
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

DATABASE_TYPE='POSTGRESQL'
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=/
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/
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

Expand steps

Click the button

Vercel

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

  1. DATABASE_TYPE - NEON

  2. NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL - /

  3. NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL - /

  4. NEXT_PUBLIC_CLERK_SIGN_UP_URL - /

  5. NEXT_PUBLIC_CLERK_SIGN_IN_URL - /

  6. CLERK_SECRET_KEY - your own Secret key from https://clerk.com

  7. NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY - your own Publishable key from https://clerk.com

  8. NEON_DATABASE_URL - your own Connection string from https://neon.tech/

  9. (Optional) KODIK_TOKEN - your own from http://kodik.cc/ (you need to contact them via email). This is needed only if you want to watch anime in Kodik Player too. Otherwise, only players based on the Anilibria API will work

Termux

Expand steps
  1. Install any PRoot Linux distro using an Andronix, for example

  2. Install Node.js, NPM, and Git

  3. Follow the next steps from the local installation paragraph

💬 Contact

Directly

Through our Discord server

🤝 Contributing

Contributions are welcome!

Note

To-Do: Hosted Weblate

⭐️ Star History

Star History Chart

❤️ Credits

📜 License

GitHub

🌐 Cool resources

Releases

No releases published

Packages

No packages published

Languages