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.
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 laterNews Feed
: Keep up with the latest news of animes, mangas and the industry.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
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
Fork
(recommended) or Clone
this repository git clone https://github.com/ErickLimaS/anime-website.git
npm install
on your CMD to get all dependenciesnpm 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.
Search Page
(or you can make some changes and use some API to fetch the data)./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
npm run dev
to initialize the websitenpm run dev
With Firebase Authentication, theres 4 methods of Login/Signup:
It is used to store on User Document things like:
With Firebase Database, we have 3 Collections:
Stores only Users Documents after a successfull signup.
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.
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.