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:

AniProject on Vercel

or

AniProject on Render

If the Vercel one is blocked by payment, try this one (it takes up to 2 minutes to deploy and load due to cold boot).

[!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
• Quick Deploy
• Under Development
• Tecnologies Used
• How Can i Run It
• How Firebase Database is Organized
• Authentication
• Collections and Documents
  • Users
  • Comments
  • Notifications
• Previews/Screenshots

:sparkles: Features

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

:rocket: Quick Deploy

[!IMPORTANT]
You NEED to make some configurations to use the project properly. Give a look on the How Can i Run It Section then use the info you got there on Vercel or any other platform Enviroment Variables Section.

On Vercel:

:pushpin: Under Development (unordered)

• [ ] Bug Fixes
• [ ] Hide Next Episode Images Until You Watch It (avoid spoilers)
• [ ] AniList Threads
• [ ] New Media Sources
• [ ] New Video Player Features
• [ ] Profile Page
• [ ] Edit Media Progress Info
• [ ] Select Layout Theme
• [ ] Schedule Page/Section

:heavy_check_mark: Tecnologies Used

Front-end:

• Next.js (v14.2.13)
• TypeScript
• Axios
• Redux
• Firebase
• GraphQL
• Framer Motion
• Swiper
• Anilist API

Back-End:

• Redis
• Node
• Express
• Axios
• Firebase: Firestore Database
• Consumet API
• Aniwatch API

:computer: How Can I Run It?

1. Fork (recommended) or Clone this repository

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

1. This project has 2 folders: frontend and backend!

[!IMPORTANT] You will need to read the 2 README Files inside these folder for better understanding!

Frontend Readme

Backend Readme

1. Assuming you read the files and setted everything up...

Now run npm run dev on frontend and nodemon server.js on backend to initialize the website

npm run dev

nodemon server.js

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

The website runs on http://localhost:3000 as default

:books: How Firebase Database 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)
• [DEPRECATED]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.

[DEPRECATED]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.

:camera: Preview/Screenshots

Home

Anime/Manga Page

Watch Episode Page

Read Page

Search/Filter Page

Watchlist Page

News Home Page

News Article Page

Inspiration

• Template
• Media Page