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).

Navigation

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

🔨 Features

📌 Under Development

Add Reply to Comments

✔️ Tecnologies Used

Front-end (on netlify.com):

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

Back-End:

Firebase
Next.js API Routes

💻 How Can I Run It?

Fork (recommended) or Clone this repository

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

Run npm install on your CMD to get all dependencies

npm install

Now you will need to create a .env.local file on the project root folder with the url to where your Consumet and Aniwatch is setted and the settings to your Firebase Account.
- Go to these repos and host your own instance:
  - Consumet API
  - Aniwatch API
- 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/anime-info directory, replacing the previous one.
- On Firebase, get your configs to use the Authentication and Firestore Database.
  - All the Firebase info needed bellow can be found when you create a new project.
  - IMPORTANT: Make Sure to ALLOW your Hosted Website Domain on Firebase Authentication!

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

NEXT_PUBLIC_CONSUMET_API_URL=https://your-hosted-consumet-api-url.com
NEXT_PUBLIC_ANIWATCH_API_URL=https://your-hosted-aniwatch-api-url.com
// Make sure to add the pathname "/api/animes-database" bellow
NEXT_PUBLIC_NEXT_INTERNAL_API_URL=https://url-to-where-your-website-is-hosted.com/api/animes-database
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

Now run npm run dev to initialize the website

npm run dev

That's it! It should be running.

📂 How Firebase is Organized

Authentication

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

Email
Google
GitHub
Anonymous

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.