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).
-
Search
: Get a list of all animes and mangas you want using filters. -
Watch
: Watch any available episode. -
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, GitHub or Anonymously (with some restrictions). -
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. -
Bookmark your favourite animes e mangas
: Save for later your animes and mangas. -
Bookmark the episodes you watched
: And keep watching from there later -
News Feed
: Keep up with the latest news of animes, mangas and the industry.
-
Add Reply to Comments
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
Fork
(recommended) orClone
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 theproject 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:
- 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 this repository 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.
- Go to this repository and download the JSON file that will be used on only
- 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/anime-info" bellow
NEXT_PUBLIC_NEXT_INTERNAL_API_URL=https://url-to-where-your-website-is-hosted.com/api/anime-info
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.