Moopa is an anime streaming website made possible by Consumet API build with NextJs and Tailwind with a sleek and modern design that offers Anilist integration to help you keep track of your favorite anime series. Moopa is entirely free and does not feature any ads, making it a great option for you who want an uninterrupted viewing experience.
- Free ad-supported streaming service
- Anime tracking through Anilist API
- Skip OP/ED buttons
- Dub Anime support
- User-friendly interface
- Mobile-responsive design
- PWA supported
- Add PWA support
- Connect to consumet API to fetch episodes data
- Implement skip op/ed button on supported anime
- Create README file
- Integrate Anilist API for anime tracking
- Ability to auto track anime after watching >= 90% through the video
- Create a user profile page to see lists of anime watched
- Ability to edit list inside detail page
- Working on Manga pages
If you encounter any issues or bug on the site please head to issues and create a bug report there.
- Clone this repository using :
git clone https://github.com/DevanAbinaya/Ani-Moopa.git
- Install package using npm :
npm install
- Create
.env
file in the root folder and put this inside the file :
## AniList
CLIENT_ID="get the id from here https://anilist.co/settings/developer"
CLIENT_SECRET="get the secret from here https://anilist.co/settings/developer"
GRAPHQL_ENDPOINT="https://graphql.anilist.co"
## NextAuth
NEXTAUTH_SECRET='run this cmd in your bash terminal (openssl rand -base64 32) with no bracket, and paste it here'
NEXTAUTH_URL="for development use http://localhost:3000/ and for production use your domain url"
## NextJS
PROXY_URI="I recommend you to use this cors-anywhere as a proxy https://github.com/Rob--W/cors-anywhere follow the instruction on how to use it there. Skip this if you only use gogoanime as a source"
API_URI="host your own API from this repo https://github.com/consumet/api.consumet.org. Don't put / at the end of the url."
API_KEY="this API key is used for schedules and manga page. get the key from https://anify.tv/discord"
DISQUS_SHORTNAME='put your disqus shortname here. (optional)'
- Add this endpoint as Redirect Url on AniList Developer :
https://your-website-url/api/auth/callback/AniListProvider
- Start local server :
npm run dev
If you want to host this web app yourself, please try to make significant changes to give it a unique look. The main reason I'm sharing this project as open source is to help others find some guidance, not to encourage copying and pasting. If you end up using this code for your own project, I'd love to see what you come up with! Feel free to share it with me, as I'm excited to see the creative things you can build using this code. :)
- Consumet API for anime sources
- AniList API for anime details source
- Anify API for manga sources
- miru for inspiring me making this site
This project is licensed under the MIT License - see the LICENSE.md file for details.
Thank You for passing by!!
If you have any questions or feedback, please reach out to us at [email protected], or you can join our discord sever.
or you can DM me on Discord Factiven#9110
/CritenDust#3704
. (just contact me on one of these account)