blob: 3abbb590a46af96e01d1b0ff683fac7923173782 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
<div align="center">
<a href="https://moopa.live">
<img src="https://user-images.githubusercontent.com/97084324/234460363-216b29d3-acba-4c29-a321-780de84c9ab0.png" alt="logo" width="180"/>
</a>
</div>
<h1 align="center">
<a href="https://moopa.live">Moopa Anime Streaming Website</a>
</h1>
<p align="center">
<a href="https://github.com/DevanAbinaya/Ani-Moopa/blob/main/LICENSE.md">
<img src="https://img.shields.io/github/license/DevanAbinaya/Ani-Moopa" alt="license"/>
</a>
<a href="https://github.com/DevanAbinaya/Ani-Moopa/fork">
<img src="https://img.shields.io/github/forks/DevanAbinaya/Ani-Moopa?style=social" alt="fork"/>
</a>
<a href="https://github.com/DevanAbinaya/Ani-Moopa">
<img src="https://img.shields.io/github/stars/DevanAbinaya/Ani-Moopa?style=social" alt="stars"/>
</a>
</p>
<p align="center">
<img src="https://github.com/Ani-Moopa/Moopa/assets/97084324/c17d5d6a-36a2-4d08-957d-ad4683dcdf0d" alt="main">
</p>
<details>
<summary>More Screenshots</summary>
<h3 align="center">Home page after you login</h3>
<img src="https://github.com/Ani-Moopa/Moopa/assets/97084324/4eab1606-adc3-43e6-8c62-712354732083"/>
<h3 align="center">Profile Page</h3>
<img src="https://user-images.githubusercontent.com/97084324/234556937-76ec236c-a077-4af5-a910-0cb85e900e38.gif"/>
<h3 align="center">Info page for PC/Mobile</h3>
<p align="center">
<img src="https://github.com/Ani-Moopa/Moopa/assets/97084324/7126ca71-26dc-4a02-819d-9e84c938d5c6"/>
</p>
<h3 align="center">Watch Page</h3>
<p align="center">Normal Mode</p>
<img src="https://github.com/Ani-Moopa/Moopa/assets/97084324/03b2c9c7-eb25-4f2c-8f26-a9ae817bfbaa"/>
<br/>
<p align="center">Theater Mode</p>
<img src="https://github.com/Ani-Moopa/Moopa/assets/97084324/767a0335-f6a3-4969-b415-3c45d07cce64"/>
<h3 align="center">Manga Reader</h3>
<img src="https://github.com/DevanAbinaya/Ani-Moopa/assets/97084324/ccd2ee11-4ee3-411c-b634-d48c84f1a9e2"/>
</details>
> **Warning:** If you are not familiar with JavaScript or any other programming language related to this project, please learn it first before attempting to work on this project. **I won't be able to help anyone who doesn't know how to do basic stuff.**
## Introduction
<p><a href="https://moopa.live">Moopa</a> is an anime streaming website made possible by the <a href="https://github.com/consumet">Consumet API</a>, built with <a href="https://github.com/vercel/next.js/">Next.js</a> and <a href="https://github.com/tailwindlabs/tailwindcss">Tailwind</a>, featuring a sleek and modern design. It offers Anilist integration to help you keep track of your favorite anime series. Moopa is entirely free and does not display any ads, making it a great option for those who want an uninterrupted viewing experience.</p>
## Features
- General
- Free ad-supported streaming service
- Dub Anime support
- User-friendly interface
- Auto sync with AniList
- Add Anime/Manga to your AniList
- Scene Searching powered by [trace.moe](https://trace.moe)
- PWA supported
- Mobile responsive
- Fast page load
- Watch Page
- Player
- Autoplay next episode
- Skip op/ed button
- Theater mode
- Comment section
- Profile page to see your watch list
## To Do List
- [x] Add PWA support
- [x] Connect to consumet API to fetch episodes data
- [x] Implement skip op/ed button on supported anime
- [x] Create README file
- [x] Integrate Anilist API for anime tracking
- [x] Ability to auto track anime after watching >= 90% through the video
- [x] Create a user profile page to see lists of anime watched
- [x] Ability to edit list inside detail page
- [x] Working on Manga pages
## Bug Report
If you encounter any issues or bug on the site please head to [issues](https://github.com/DevanAbinaya/Ani-Moopa/issues) and create a bug report there.
## For Local Development
> If you want to self-host this app, please note that it is only allowed for personal use. Commercial use is not permitted, and including ads on your self-hosted site may result in actions such as site takedown.
1. Clone this repository using :
```bash
git clone https://github.com/DevanAbinaya/Ani-Moopa.git
```
2. Install package using npm :
```bash
npm install
```
3. Create `.env` file in the root folder and put this inside the file :
```bash
## 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="This is what I use for proxying video https://github.com/chaycee/M3U8Proxy. Don't put / at the end of the url."
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."
DISQUS_SHORTNAME='put your disqus shortname here (optional)'
## Prisma
DATABASE_URL="Your postgresql connection url"
## Redis
# If you don't want to use redis, just comment the REDIS_URL (press ctrl + / on windows or cmd + / on mac)
REDIS_URL="rediss://username:password@host:port"
```
4. Add this endpoint as Redirect Url on AniList Developer :
```bash
https://your-website-domain/api/auth/callback/AniListProvider
```
5. Generate Prisma :
```bash
npx prisma migrate dev
npx prisma generate
### NOTE
# If you get a vercel build error related to prisma that says prisma detected but no initialized just change the following line in package.json line number 8
"build": "next build" to > "build": "npx prisma migrate deploy && npx prisma generate && next build"
```
6. Start local server :
```bash
npm run dev
```
## Credits
- [Consumet API](https://github.com/consumet/api.consumet.org) for anime sources
- [AniList API](https://github.com/AniList/ApiV2-GraphQL-Docs) for anime details source
- [Anify API](https://anify.tv/discord) for manga sources
- [miru](https://github.com/ThaUnknown/miru/) for inspiring me making this site
## License
This project is licensed under the GNU General Public License v3.0 - see the [LICENSE.md](LICENSE.md) file for details.
> This means that if you choose to use or host this site for your own purposes, you are also required to release the source code of any modifications or improvements you make to this project. This open-source ethos is central to the project's philosophy.
## Contact
Thank You for passing by!!
If you have any questions or feedback, please reach out to us at [[email protected]](mailto:[email protected]?subject=[Moopa]%20-%20Your%20Subject), or you can join our [discord sever](https://discord.gg/4xTGhr85BG).
<br>
or you can DM me on Discord `Factiven#9110`.
[](https://discord.gg/v5fjSdKwr2)
## Support This Project
✨ [Star this project](https://github.com/DevanAbinaya/Ani-Moopa)
[](https://ko-fi.com/E1E6F9XZ3)
<a href="https://trakteer.id/factiven" target="_blank"><img id="wse-buttons-preview" src="https://cdn.trakteer.id/images/embed/trbtn-red-5.png" height="36" style="border: 0px; height: 36px;" alt="Trakteer Saya"></a>
|