AniProject

Project of animes and mangas website, utilizing the AniList, Consumet and Aniwatch API, which has info of animes and mangas released, data of the cast of that media, and many other things.

You can access this website on Vercel or Render (really slow).

Caution

Please note that this project is strictly non-commercial. It is not permitted to generate revenue or include advertisements using this project. Violating this policy may result in legal actions by the respective owners of these intellectual properties.

Navigation

• Features
• Under Development
• Tecnologies Used
• How Can i Run It
• How Fireabase is Organized
  • Authentication
  • Collections and Documents
    • Users
    • Comments
    • Notifications
• Previews/Screenshots

🔨 Features

• Search: Get a list of all animes and mangas you want using filters.
• Watch: Watch any available episode Dubbed or Subbed.
• Read: Read any manga chapter available.
• Comment: Write what you thougth of that episode or just tell something that every should know about.
• Log In: You can log in with Google, Anilist or Anonymously (with some restrictions).
• Anilist Integration: Use your Anilist account, carry over your settings, animes and mangas.
• Keep Watching: Continue the episode from where you stop last time.
• Be Notified: When a New Episode is Released, you get a notification on the website.
• Mark your favourite animes e mangas: Save them as Completed, Dropped, Planning, and more.
• Mark the episodes you watched: And keep watching from there later
• News Feed: Keep up with the latest news of animes, mangas and the industry.

📌 Under Development (unordered)

• Bug Fixes
• AniList Reviews/Comments
• AniList Threads
• New Media Sources
• New Video Player Features
• Profile Page
• Edit Media Progress Info
• Select Layout Theme
• Schedule Page/Section

✔️ Tecnologies Used

Front-end:

• Next.js
• TypeScript
• Axios
• Redux
• Firebase
• GraphQL
• Framer Motion
• Swiper
• Anilist API
• Consumet API
• Aniwatch API

Back-End:

• Firebase: Firestore Database
• Next.js (API) Route Handler

💻 How Can I Run It?

1. Fork (recommended) or Clone this repository

  git clone https://github.com/ErickLimaS/anime-website.git

2. Run npm install on your CMD to get all dependencies

npm install

3. Now you will need to create a .env.local file on the project root folder, and follow the instructions bellow.

   • You'll need the data from Consumet and Aniwatch API to get things to work, so go to these repos and host your own instance:

     • Consumet API
     • Aniwatch API

   • Anilist Login (OAuth):

     • You need to first login on your account on Anilist.
     • Then go to Developer Page on the Settings and click "Create New Client".
     • Now you need to add the name of your forked project/website and the URL to redirect when user accept the login, then hit "Save".
     • Store the Client ID and Secret on your ".env.local".
     • TIP: Create 2 of these, one for the dev env and other to production.

   • Firebase (to use Google, Email and Anonymous Login and the Firestore Database):

     • Create a project for this fork/clone you did on Firebase.
     • All the Firebase info needed on .env.local can be found when you create a new project.
     • IMPORTANT: Make Sure to ALLOW your Hosted Website Domain on Firebase Authentication!
     • IMPORTANT: You'll need to change the Rules on Firestore Database. There is 2 options depending of what login methods you will use:
       • With ALL Login Methods available:

            rules_version = '2';
            
            service cloud.firestore {
              match /databases/{database}/documents {
         
                match /{document=**} {
                  // will allow any write and read operation. No conditions due to Anilist OAuth Login.
                  allow read, write: if true;
                }
         
              }
            }

       • With ONLY Firebase Login Methods (no Anilist Login):

           rules_version = '2';
                  
           service cloud.firestore {
             match /databases/{database}/documents {
           
               match /users/{document=**} {
                 // allows only requests if a userUID is available.
                 allow read, write: request.auth.uid != null;
               }
         
               match /comments/{document=**} {
                 // allows only write request if a userUID is available. 
                 allow read: if true;
                 allow write: request.auth.uid != null;
               }
         
               match /notifications/{document=**} {
                 // allows only write request if a userUID is available. 
                 allow read: if true;
                 allow write: request.auth.uid != null;
               }
             
               match /{document=**} {
                 // will allow any other write and read operation. No conditions. 
                 allow read, write: if true;
               }
         
             }
           }

   • OPTIONAL: This project uses a JSON file (47 mb) filled with Animes and Mangas data as a offline Database. This repository already has this file, but it might be outdated, so you decide if you want to ignore this step.

     • Go to anime-offline-database and download the JSON file that will be used on only Search Page (or you can make some changes and use some API to fetch the data).
     • With the file downloaded, put it in the /app/api/animes-database directory, replacing the previous one.

With all that done, you will need to fill the .env.local like the example bellow:

// Consumet API
NEXT_PUBLIC_CONSUMET_API_URL=https://your-hosted-consumet-api-url.com
// Aniwatch API
NEXT_PUBLIC_ANIWATCH_API_URL=https://your-hosted-aniwatch-api-url.
// Anilist OAuth Settings
NEXT_PUBLIC_ANILIST_CLIENT_ID=your-anilist-client-id
ANILIST_CLIENT_SECRET=your-anilist-secret
// Next.js Route Handler - Make sure to add the pathname "/api/animes-database" bellow
NEXT_PUBLIC_NEXT_ROUTE_HANDLER_API=https://url-to-where-your-website-is-hosted.com/api/animes-database
// Bellow is the url to use ONLY on Dev Enviroment. You WILL NEED TO CHANGE IT when on hosted mode to the respective url. Look for something like Enviroment Variables to do it.
NEXT_PUBLIC_WEBSITE_ORIGIN_URL=http://localhost:3000
// Firebase Settings
NEXT_PUBLIC_FIREBASE_API_KEY=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_PROJECT_ID=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_APP_ID=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=firebase-setting-related-to-this-field
NEXT_PUBLIC_FIREBASE_DATABASE_URL=firebase-setting-related-to-this-field

4. Now run npm run dev to initialize the website

npm run dev

5. That's it! It should be running.

📂 How Firebase is Organized

Authentication

With Firebase Authentication, theres 4 methods of Login/Signup:

• Email
• Google
• Anilist
• Anonymous
• GitHub

It is used to store on User Document things like:

• User Profile Photo
• Username
• Preferences (media source, adult content, subtitles and more)
• Comments
• Notifications
• Bookmarked Medias
• Currently Watching Medias
• Episodes Watched
• Chapters Read

Collections and Documents

With Firebase Database, we have 3 Collections:

Users

Stores only Users Documents after a successfull signup.

Comments

Stores comments made on episodes or on its main page.

Its separated based on Anilist API Media IDs Documents, and after that, a Collection that holds all comments to this media and other related to a episode where that comment was made.

It strongly depends on Users Collection, due to each comment needs its user (owner). Each comment has a referer to its owner and stores its interactions, with Likes and Dislikes.

When a Comment is made, it saves sort of a log on User Document, with infos like interactions with other comment or written on a episode.

Notifications

The Notifications Collections stores a document for each Media ID related to Anilist API every time a user assigned himself to be notified about a new episode release.

Each document has a Collection that holds every user assigned to receive a notification.

In this document, has info of all episodes already notified to any user and the next to be notified, cover art, if is complete, status and last update date.

• User Document Relation: After a successfull notification is deliveried to user, it stores the last episode info on User Document, so it can be notified again and the next one is released.

📷 Preview/Screenshots

Home

Anime/Manga Page

Watch Episode Page

Read Page

Search/Filter Page

Watchlist Page

News Home Page

News Article Page