├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── _redirects ├── assets │ ├── 404.png │ └── logo.svg ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── components ├── Home │ ├── AnimeCards.js │ ├── Carousel.js │ └── WatchingEpisodes.js ├── Navigation │ ├── Nav.js │ └── Search.js ├── VideoPlayer │ └── VideoPlayer.js ├── WatchAnime │ └── ServersList.js └── skeletons │ ├── AnimeCardsSkeleton.js │ ├── AnimeDetailsSkeleton.js │ ├── CarouselSkeleton.js │ ├── SearchResultsSkeleton.js │ └── WatchAnimeSkeleton.js ├── hooks ├── searchQueryStrings.js └── useWindowDimensions.js ├── index.js ├── pages ├── AnimeDetails.js ├── FavouriteAnime.js ├── Home.js ├── MalAnimeDetails.js ├── PopularAnime.js ├── PopularMovies.js ├── SearchResults.js ├── Top100Anime.js ├── TrendingAnime.js ├── WatchAnime.js └── WatchAnimeV2.js └── styles └── globalStyles.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Miyou Banner](https://user-images.githubusercontent.com/61660793/202897934-8656a581-a55a-47d7-9658-ee9e4f2295dc.png) 2 | 3 | # Welcome to Miyou Github Repository 4 | 5 | ![Miyou Mockup Photo Here](https://user-images.githubusercontent.com/61660793/202531185-92331444-9216-4dd2-8616-2772a9d65f1d.jpg) 6 | 7 | ## Miyou is an online anime streaming site built using React.js. [Visit Here](https://www.miyou.me/). 8 | 9 | ### Next.js implementation of this web-app can be found [here.](https://github.com/reyangurjar/Miyou.me) Hosted [URL](https://miyou-topaz.vercel.app/) 10 | 11 | ### `npm i` (Install the dependencies) 12 | 13 | ### `npm start` (Run locally) 14 | 15 | ### Set up your .env file 16 | 17 | First add a .env file in your root directory. Then add
18 | `REACT_APP_BACKEND_URL='https://miyou-api.cyclic.app/' REACT_APP_BASE_URL='https://graphql.anilist.co'` 19 | 20 | ## Todo 21 | 22 | ### Changing the search page 23 | 24 | Add the ability to search genres or search from multiple genres. And sort by Trending or Popularity or User Preference. Something like this. 25 | ![Search UI Design](https://user-images.githubusercontent.com/61660793/204035337-6258d5b1-e6ae-40b4-bfea-b216d0bfe321.png) 26 | If anybody wants to implement just the design part in CSS, you are more than welcome to contribute. It would be a big help. 27 | 28 | ## Contributing 29 | 30 | Contributions are always welcome. 31 | 32 | You can contribute to this project by forking the project, adding or making changes, and submitting a pull request. 33 | 34 | ## Disclaimer 35 | 36 | I'm privating the backend repo because a lot of people are copying the project without giving any credits and pretending to be the real one. You can only test this on your localhost and cannot host it. It will give you CORS error. 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "miyou-frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.1.1", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^0.26.1", 10 | "hls.js": "^1.1.5", 11 | "plyr": "^3.7.2", 12 | "react": "^18.0.0", 13 | "react-dom": "^18.0.0", 14 | "react-hot-toast": "^2.4.0", 15 | "react-icons": "^4.3.1", 16 | "react-loading-skeleton": "^3.1.0", 17 | "react-router-dom": "^6.3.0", 18 | "react-scripts": "5.0.1", 19 | "styled-components": "^5.3.5", 20 | "swiper": "^8.1.3", 21 | "web-vitals": "^2.1.4" 22 | }, 23 | "scripts": { 24 | "start": "react-scripts start", 25 | "build": "react-scripts build", 26 | "test": "react-scripts test", 27 | "eject": "react-scripts eject" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/assets/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debsishu/Miyou/f88fba1375d1c6782c21bc40c9f9f6b2f7bd86a3/public/assets/404.png -------------------------------------------------------------------------------- /public/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debsishu/Miyou/f88fba1375d1c6782c21bc40c9f9f6b2f7bd86a3/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 16 | 20 | 24 | 25 | 29 | 30 | 31 | 32 | 36 | 37 | 38 | 42 | 43 | 44 | 45 | 49 | 50 | 59 | Miyou - Watch Anime Free Online With English Sub and Dub 60 | 61 | 62 | 63 | 64 |
65 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debsishu/Miyou/f88fba1375d1c6782c21bc40c9f9f6b2f7bd86a3/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debsishu/Miyou/f88fba1375d1c6782c21bc40c9f9f6b2f7bd86a3/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Miyou", 3 | "name": "Let's Watch Anime", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#ffffff", 24 | "background_color": "#1A1927" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 2 | import { Toaster } from "react-hot-toast"; 3 | import Nav from "./components/Navigation/Nav"; 4 | import AnimeDetails from "./pages/AnimeDetails"; 5 | import FavouriteAnime from "./pages/FavouriteAnime"; 6 | import Home from "./pages/Home"; 7 | import MalAnimeDetails from "./pages/MalAnimeDetails"; 8 | import PopularAnime from "./pages/PopularAnime"; 9 | import PopularMovies from "./pages/PopularMovies"; 10 | import SearchResults from "./pages/SearchResults"; 11 | import Top100Anime from "./pages/Top100Anime"; 12 | import TrendingAnime from "./pages/TrendingAnime"; 13 | import WatchAnime from "./pages/WatchAnime"; 14 | import WatchAnimeV2 from "./pages/WatchAnimeV2"; 15 | import GlobalStyle from "./styles/globalStyles"; 16 | 17 | function App() { 18 | return ( 19 | 20 | 21 |