Expand
-
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
-
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!
-
Website internationalization with next-intl
-
Add the option to the
.envfile 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
Expand steps
Cloning the repository
-
Clone this repository by running
git clone https://github.com/notwindstone/anisun -
Rename the
.env.examplefile in the root directory to.env.local
Configuring Clerk auth
-
Sign up for a Clerk account at https://clerk.com
-
Go to the Clerk dashboard and create an application
-
Go to API Keys in your sidebar and copy Publishable key (Example:
pk_test_qwertyuiop1234567890) -
Paste your Publishable key to
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYin the.env.localfile -
Go to API Keys in your sidebar and copy Secret keys (Example:
sk_test_qwertyuiop1234567890) -
Paste your Publishable key to
CLERK_SECRET_KEYin the.env.localfile
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
-
Sign up to Neon DB at https://neon.tech/ to access serverless Postgres by creating a project
-
Go to the Neon dashboard and copy Connection string (Example:
postgres://postgres:[email protected]:5432/db?sslmode=require) -
Paste your Connection string to
NEON_DATABASE_URLin the.env.localfile -
Make sure the
DATABASE_TYPEline in the.env.localfile is set toNEON
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
-
Go to the
.env.localfile and paste your connection string toPOSTGRESQL_DATABASE_URL -
Change
DATABASE_TYPEtoPOSTGRESQLin the.env.localfile
Final steps
-
(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
-
Run
npm installto install the required dependencies -
Create a comments table in the database using the command
npx drizzle-kit push:pg -
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:[email protected]:5432/db'
POSTGRESQL_DATABASE_URL='CHANGE_IT_postgres://postgres:[email protected]: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:[email protected]:5432/db'
POSTGRESQL_DATABASE_URL='postgres://postgres:[email protected]: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'
If you want to run the application in development mode
npm run devTip
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 buildnpm run startOpen http://localhost:3000 with your browser to see the result.
Expand steps
Click the button
Navigate to Project -> Settings -> Environment Variables and then add values to the following keys:
-
DATABASE_TYPE-NEON -
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL-/ -
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL-/ -
NEXT_PUBLIC_CLERK_SIGN_UP_URL-/ -
NEXT_PUBLIC_CLERK_SIGN_IN_URL-/ -
CLERK_SECRET_KEY- your own Secret key from https://clerk.com -
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY- your own Publishable key from https://clerk.com -
NEON_DATABASE_URL- your own Connection string from https://neon.tech/ -
(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
Expand steps
-
Install any PRoot Linux distro using an Andronix, for example
-
Install Node.js, NPM, and Git
-
Follow the next steps from the local installation paragraph
Contributions are welcome!
Note
To-Do: Hosted Weblate
-
zvshka for his help with the project
-
cos (discord account) for his help with the UI
-
Shikimori, Anilibria, Kodik and SovetRomantica for their wonderful APIs, without which Anisun 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent