Code Monkey home page Code Monkey logo

ericklimas / anime-website Goto Github PK

View Code? Open in Web Editor NEW
89.0 1.0 27.0 18.27 MB

AniProject: Watch Animes, Read Mangas and make Comments on this website made with Next.js, TypeScript, Firebase, Anilist, Consumet and Aniwatch API. AD FREE.

Home Page: https://aniproject-dev.vercel.app/

License: Other

TypeScript 74.90% CSS 23.84% JavaScript 1.25%
typescript firebase anime anime-streaming anilist anime-website animes nextjs anime-api aniwatch

anime-website's Introduction

AniProject

AniProject Website Logo

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

  • 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
  1. Run npm install on your CMD to get all dependencies
npm install
  1. 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:
    • About Anilist 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.
    • 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!
    • 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
NEXT_PUBLIC_CONSUMET_API_URL=https://your-hosted-consumet-api-url.com
// Aniwatch
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 dev enviroment. You'll need to change it when on hosted mode to the respective url
NEXT_PUBLIC_WEBSITE_ORIGIN_URL=http://localhost:3000
// Firebase
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
  1. Now run npm run dev to initialize the website
npm run dev
  1. 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

Home page 1 Home page 2 Home page 3 Home page 4 Home page 5 Home page 6

Anime/Manga Page

Anime/Manga Page 1 Anime/Manga Page 2 Anime/Manga Page 3 Anime/Manga Page 4

Watch Episode Page

Watch Episode Page 1 Watch Episode Page 2

Read Page

Read Chapter Page 1

Search/Filter Page

Search/Filter Page 1

Watchlist Page

Watchlist Page 1

News Home Page

News Home Page 1 News Home Page 2 News Home Page 3

News Article Page

News Article Page 1

anime-website's People

Contributors

ericklimas avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

anime-website's Issues

[Bugs] Wrong thumbnails and episode names

This happens to anime with two or more seasons, where season 1 shows normal thumbnails and episode names but if you open season 2 of the same anime, it displays thumbnails and episode names of the first season.
Example "The Eminence in shadow" season 1 has abt 20 episodes which displays normal thumbs and names but if you open 2nd season which has 12 episodes. It shows first 12 episodes of the first season both thumbnails and episode names in all servers except crunchyroll only..
I hope this can be fixed

Episodes don't play

None of the episodes i try to watch plays. It just shows the same error. Both sub and dub
20240612_211608

Language and dub

Thanks for the updates, i need to report some bugs

  1. The homepage still hasn't changed language it's still in romanji and also the most popular animes still can't be selected. If you click them nothing happens
  2. Gogoanime dub version alert. (Each new episode causes the alert to display, you can make an option to never show this again, this will help both to notify someone that it maybe another anime but also make the next episode play simultaneously.
  3. Aniplay dub link is still broken, the next episode plays subbed even if you played the previous episode in dub.
  4. If the anime is in keep watching can't be deleted and also if episodes are many and cover the whole screen size cannot be scrolled to see all of them instead it stucks only to the screen size (this is on pc)

Displaying bugs

Animes from popular animes to watch now can't be selected.
Also, Is there a way you can make the anime names display in english and not in romanji.
And thirdly can you link the website with anilist so as it can auto save data and load data

[bug] movies

I don't really know if it's a bug or what but in movies there's no option to play it on sub/dub.
If you play a movie it starts playing in sub directly and in video player there's no any option to change to dub version

Manga & Manhwa servers

It's a suggestion, you can add some manga servers these will provide option to choose where to read manga due to different art styles.
For me i really like comick.io if you can add that it'll be good also there's manganato and mangadex..

[bug] Video player

The video player needs some modifications.
It doesn't display anime name or episode name when you pause the anime
Also when you finish an episode and wait for the next episode to play, the next episode starts where the previous episode ended like the end of the episode and not the beginning and it's start to play in sub even if the first episode you watched in dub.
Also a suggestion to the video player, i suggest you add the anime name like that colored name when you open anime info and episode number or name to display on the video player when the video is paused.

Gogoanime next episode

When an episode ends, and the next episode button appear, it doesn't go to the next episode instead it shows error. (This bug can be seen when only watching episodes in dub)
I've attached images to see
20240602_181654

some sugestions

  1. An option to download anime
  2. A schedule section or separate page for it
  3. option to change Theme ( i mean to other colors not just "light / dark")
  4. A watch Together feature (It would just take time ik but ik u will get it done)

Auto mark bug

Good thing the auto mark works but sadly it marks even the episodes i haven't seen yet. It just mark all the episodes which are there.

Auto mark watched episodes

It's a job well done for creating my list and fetching data from anilist that's a huge step bro congrats.
This suggested feature i somehow saw it in other websites. When you fetch data from anilist. All fetched episodes if are watched/marked as completed also appear marked as watched on the website. Can you fix that feature so for all fetched episodes to appear marked if the episode is already viewed.

[Bug]: "bug on Home Page".

hey @ErickLimaS i have encountered a bug n thought to let u know.
On the Homepage after Logging in the Latest Releases and the Show Me Something New & Best Rated Mangas it shows nothing [empty].
can u look into it and fix the bug. iam attaching the screenshot of the same.

Latest realeses
image

All time favorites & Show Something New
image

Best rated MAnga
image

can u check these and fix them.
it happens both on the main site & my hosted site also.

Episodes missing and other bugs

Some anime do not have all episodes for example my hero academia
Also for animes with multiple seasons like my hero academia, jujutsu kaisen where there sequel season are written as 2nd season or my hero academia 2. They don't display the clearlogo instead they display the romanji name and it makes them count as another anime and are not related. This is not for only those two but others too with similar criteria
20240608_110935
20240608_111013
20240608_111220
20240608_111252
20240608_111645
20240608_111745
20240608_111810

Can you make them display the same clearlogo and be like the same anime
See attachments.

Multiple errors and issues

I think this is a bug. Like for example, when trying to watch an anime, the player is blank until you refresh the page, then it shows up, same with the initial gogoanime play button to load on the anime description page. Im not sure why

Add to my list problem

The add to my list has some issues, it delays when you add a new anime on it.
Another thing there's no my list option when you open profile it only shows, favorites, latest episodes, settings and log out, there's no my list option where i can view the planned episodes, watching or completed. That's data fetched from Anilist.
And those automatically set as complete or watching should automatically mark all the episodes as watched.

[bug] Language

After changing the language and logged in still the language on the website remains unchanged even after multiple reloads. The English language takes effect only on similar animes you may like (after you select one anime to watch) but all areas it's still romanji even on search.
And also the animes on most popular cannot be still selected I've tried multiple times but i can't select them.
And also keep watching now cannot be deleted, the episodes still remain there even after delete.
IMG-20240605-WA0001

Language change

Is there a way you can make the anime names display in english and not in romanji

video not playing

hello @ErickLimaS the video is not playing on my deployed site it say something about api and something went wrong iam also adding the screenshot of the issue could you help me rectify the issue.
i have hosted the api`s and added the links in the env file.
image
the anime loading and manga showing is working fine but playing them is not working and the episode loading time is also to much.

Homepage & Video player suggestion.

1.For Homepage, i recommended this but i forgot to send the picture.The homepage should display the trending anime for the moment as a spotlight for some seconds 10 to 15, showing 1 anime to the other maybe the top ten trending anime plus a navigation button for mannual scrolling. See the example from attachment.
Picsart_24-06-13_02-01-51-791

2.Second for video player, gogoanime should also have an option to skip intros and credits and next episode option (Should automatic play next episode). Because gogoanime has a tendency of playing the next episode at the middle or near end and not from the start. Also the intro and credits marks should be seen at the videoa bar to indicate the intro and extro for mannual skipping. See attachment
Screenshot_20240613-021359_Firefox

  1. Total anime,manga and days watched on the my lists section. When you open my list as a default, it needs to show those and also a banner that is found on anilist can be seen when you open my list section.See attachment for example.
    Picsart_24-06-13_08-59-48-960

  2. Modifications on add to my list, make it more into multiple options, not only to add on add as but more contents like, score, progress, date to start watching and finished watching which sync automatically with anilist and a comment note. I suggest the window popup should the same as that when you select an anime on trending, or show me something new but rather it should have those options and a save changes option. See attachment for an example.
    Screenshot_20240613-131840_Firefox

[suggestion] Anilist sync and MAL sync

Everything seems to go smooth for the moment with the website, so the only main thing left is anilist direct sync when you watch anime plus if you can make a way to fetch all anilist data, so as all the anime watched, planned to watch, watching, dropped and paused can be viewed on the website. In anilist is called my list, those i mentioned are some of contents on my list.
Even if for now it can't add direct to anilist after watching an episode but at least create those my list so more lists can be added.
And for sync without anilist integration there's MAL sync it's an extension that syncs data direct to anilist for websites without anilist integration, you can contact them so they can add your website.

[bug] Language

I don't know why, the language was displaying English earlier but now everything changed to romanji again on Homepage

Notifications bug

Once you updated the anilist sync, the notification only showed notification count once, but since then it hasn't shown any notification

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.