├── public ├── _redirects ├── favicon.ico ├── logo192.png ├── logo512.png ├── assets │ ├── 404.png │ └── logo.svg ├── robots.txt ├── manifest.json └── index.html ├── .gitignore ├── src ├── index.js ├── hooks │ ├── useWindowDimensions.js │ └── searchQueryStrings.js ├── components │ ├── skeletons │ │ ├── CarouselSkeleton.js │ │ ├── AnimeDetailsSkeleton.js │ │ ├── AnimeCardsSkeleton.js │ │ ├── SearchResultsSkeleton.js │ │ └── WatchAnimeSkeleton.js │ ├── Home │ │ ├── AnimeCards.js │ │ ├── WatchingEpisodes.js │ │ └── Carousel.js │ ├── Navigation │ │ ├── Nav.js │ │ └── Search.js │ ├── WatchAnime │ │ └── ServersList.js │ └── VideoPlayer │ │ └── VideoPlayer.js ├── App.js ├── styles │ └── globalStyles.js └── pages │ ├── PopularMovies.js │ ├── SearchResults.js │ ├── Top100Anime.js │ ├── TrendingAnime.js │ ├── PopularAnime.js │ ├── FavouriteAnime.js │ ├── Home.js │ ├── AnimeDetails.js │ ├── MalAnimeDetails.js │ ├── WatchAnimeV2.js │ └── WatchAnime.js ├── package.json └── README.md /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debsishu/Miyou/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debsishu/Miyou/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debsishu/Miyou/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/assets/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/debsishu/Miyou/HEAD/public/assets/404.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | root.render( 7 | // 8 | 9 | // 10 | ); 11 | 12 | // If you want to start measuring performance in your app, pass a function 13 | // to log results (for example: reportWebVitals(console.log)) 14 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 15 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/hooks/useWindowDimensions.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | function getWindowDimensions() { 4 | const { innerWidth: width, innerHeight: height } = window; 5 | return { 6 | width, 7 | height, 8 | }; 9 | } 10 | 11 | export default function useWindowDimensions() { 12 | const [windowDimensions, setWindowDimensions] = useState( 13 | getWindowDimensions() 14 | ); 15 | 16 | useEffect(() => { 17 | function handleResize() { 18 | setWindowDimensions(getWindowDimensions()); 19 | } 20 | 21 | window.addEventListener("resize", handleResize); 22 | return () => window.removeEventListener("resize", handleResize); 23 | }, []); 24 | 25 | return windowDimensions; 26 | } 27 | -------------------------------------------------------------------------------- /src/components/skeletons/CarouselSkeleton.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Skeleton from "react-loading-skeleton"; 3 | import "react-loading-skeleton/dist/skeleton.css"; 4 | import useWindowDimensions from "../../hooks/useWindowDimensions"; 5 | 6 | function CarouselSkeleton() { 7 | const { height, width } = useWindowDimensions(); 8 | 9 | return ( 10 |
15 | 21 |
22 | ); 23 | } 24 | 25 | export default CarouselSkeleton; 26 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/skeletons/AnimeDetailsSkeleton.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import styled from "styled-components"; 3 | import Skeleton from "react-loading-skeleton"; 4 | import useWindowDimensions from "../../hooks/useWindowDimensions"; 5 | 6 | function AnimeDetailsSkeleton() { 7 | const { width, height } = useWindowDimensions(); 8 | 9 | return ( 10 | 11 | 20 | 21 | 29 | 30 | 31 | ); 32 | } 33 | 34 | const ContentWrapper = styled.div` 35 | padding: 0 3rem 0 3rem; 36 | @media screen and (max-width: 600px) { 37 | padding: 1rem; 38 | } 39 | `; 40 | 41 | const Content = styled.div` 42 | margin: 2rem 5rem 2rem 5rem; 43 | position: relative; 44 | @media screen and (max-width: 600px) { 45 | margin: 1rem; 46 | } 47 | `; 48 | 49 | export default AnimeDetailsSkeleton; 50 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 |