Project of animes and mangas website, utilizing the AniList API which has info of animes and mangas released, data of the cast of that media, and many other things.
You can access it here.
-
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. -
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 -
Be notified when a new episode/chapter is released
Front-end (on netlify.com):
ReactNext.jsTypeScriptAxiosFirebaseGraphQLFramer MotionSwiperAnilist APIConsumet APIAniwatch API
Back-End:
FirebaseNext.js API routes
Its simple!
Clonethis repository
git clone https://github.com/ErickLimaS/anime-website.git- Run
npm installon your CMD to get all dependencies
npm install- Now you need to create a
.env.localfile inside thedirectorywith the url to where your Consumet API server is setted and configs for your Firebase.- Check the repository of Consumet API and host your own server.
- Do the same with Aniwatch API.
- Go to this repository and get a JSON file filled with Animes info to use.
- This repository already has this json file, but it might be outdated. So get a new file there and put it under the
/app/api/anime-infodirectory. - On Firebase, get your configs to use the Authentication and Firestore Database. Your file should look like example:
NEXT_PUBLIC_CONSUMET_API_URL=https://your-hosted-consumet-api-url.com
NEXT_PUBLIC_ANIWATCH_API_URL=https://your-hosted-aniwatch-api-url.com
NEXT_PUBLIC_INSIDE_API_URL=https://url-to-where-your-website-is-hosted.com/api/anime-info
NEXT_PUBLIC_FIREBASE_API_KEY=[YOUR-FIREBASE-SETTINGS]
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=[YOUR-FIREBASE-SETTINGS]
NEXT_PUBLIC_FIREBASE_PROJECT_ID=[YOUR-FIREBASE-SETTINGS]
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=[YOUR-FIREBASE-SETTINGS]
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER=[YOUR-FIREBASE-SETTINGS]
NEXT_PUBLIC_FIREBASE_APP_ID=[YOUR-FIREBASE-SETTINGS]
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=[YOUR-FIREBASE-SETTINGS]
NEXT_PUBLIC_FIREBASE_DATABASE_URL=[YOUR-FIREBASE-SETTINGS]- Now run
npm run devto initialize the website
npm run dev- That's it! It should be running.
