├── .eslintrc.cjs ├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── netlify.toml ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── logo.jpg ├── manifest.json └── vite.svg ├── src ├── App.jsx ├── Layouts │ ├── GenreSidebar.jsx │ ├── Nav.jsx │ └── RecommendedTopTen.jsx ├── api │ ├── apiQueue.js │ ├── gogoanime_servers.js │ ├── jikan.js │ └── kitsu.js ├── components │ ├── AnimeInfo │ │ ├── AnimeInfo.css │ │ ├── AnimeInfoJikan.jsx │ │ ├── AnimeInfoKitsu.jsx │ │ └── AnimeInfoRandom.jsx │ ├── AnimeNotFound │ │ ├── Error.jsx │ │ └── error.css │ ├── Card │ │ ├── Card.jsx │ │ ├── MouseOverCard.jsx │ │ ├── card.css │ │ └── mouse-over-card.css │ ├── Featured │ │ ├── ContentList.jsx │ │ ├── Featured.jsx │ │ └── content-list.css │ ├── Footer │ │ ├── Footer.jsx │ │ └── footer.css │ ├── Genre │ │ ├── Genre.jsx │ │ └── genre.css │ ├── Hero │ │ ├── Hero.jsx │ │ └── hero.css │ ├── LoadingSpinner.jsx │ ├── MainContainer │ │ ├── AnimeCollection.jsx │ │ ├── MainContainer.jsx │ │ ├── MainSidebar.jsx │ │ └── main-container.css │ ├── Navbar │ │ ├── Actions.jsx │ │ ├── Navbar.jsx │ │ ├── SocialLinks.jsx │ │ └── navbar.css │ ├── NavigationSidebar │ │ ├── NavSidebar.jsx │ │ └── nav-sidebar.css │ ├── ReviewSection │ │ ├── ReviewSection.jsx │ │ └── review-section.css │ ├── Share │ │ ├── Share.jsx │ │ └── share.css │ ├── TopCharacters │ │ ├── TopCharacters.jsx │ │ └── top-characters.css │ ├── TopTen │ │ ├── TopTenAnime.jsx │ │ └── top-ten.css │ └── Trending │ │ ├── Trending.jsx │ │ └── trending.css ├── data │ ├── characters.js │ ├── featured.js │ ├── genre.js │ ├── mainSection.js │ ├── reviews.js │ └── topAnime.js ├── hooks │ ├── useAnimationOnce.jsx │ └── useConsumet.jsx ├── main.css ├── main.jsx ├── media │ ├── error.gif │ ├── logo.png │ ├── placeholder.gif │ └── share.gif ├── pages │ ├── AnimeByFilter.jsx │ ├── AnimeByType.jsx │ ├── Genre.jsx │ ├── Home.jsx │ ├── SearchResults.jsx │ └── WatchAnime │ │ ├── HlsVideoPlayer.jsx │ │ ├── WatchAnime.jsx │ │ └── watch-anime.css └── utils │ └── LazyImage.jsx └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'error', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Manj0tBenipal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Kaido - Anime Streaming Website 2 | ![image](https://github.com/Manj0tBenipal/kaido/assets/108014780/fb96dfe3-0a3a-4b95-9633-bd20509e7b84) 3 | 4 | 5 | Welcome to Kaido, your one-stop destination for streaming your favorite anime series and movies! This website is built using React and leverages several libraries and APIs to provide a seamless anime streaming experience. 6 | 7 | 8 | 9 | ## Features 10 | 11 | - **Anime Library**: Browse and search for a wide range of anime series and movies. 12 | 13 | - **Anime Details**: Get detailed information about each anime, including synopsis, genres, release date, and more. 14 | 15 | - **Streaming**: Stream anime episodes and movies directly from the website. 16 | 17 | - **User-friendly**: Kaido is designed with a user-friendly interface to enhance your viewing experience. 18 | 19 | ## Technologies Used 20 | 21 | - **React**: The website is built using the React JavaScript library for creating dynamic user interfaces. 22 | 23 | - **React Router**: React Router is used for handling client-side routing and navigation within the app. 24 | 25 | - **React Query**: React Query is used for efficient data fetching and state management. 26 | 27 | - **p-queue**: p-queue is utilized to manage concurrent API requests efficiently. 28 | 29 | - **Node.js Library**: This website uses a Node.js library for consuming data from various publicly available anime APIs. 30 | 31 | - **Jikan REST API**: Jikan is used to retrieve anime information, including details about episodes, genres, and more. 32 | 33 | - **Kitsu API**: The Kitsu API provides additional data and information about anime titles. 34 | 35 | ## Getting Started 36 | 37 | If you want to set up Kaido locally on your machine, follow these steps: 38 | 39 | 1. Clone the repository: 40 | 41 | ```shell 42 | git clone https://github.com/Manj0tBenipal/kaido.git 43 | cd kaido 44 | npm install 45 | npm run dev 46 | After that you can access Kaido locally by visiting the URL displayed in the shell window 47 | ## Contributing 48 | We welcome contributions to improve and enhance Kaido. If you have any bug reports, feature requests, or code contributions, please feel free to open an issue or submit a pull request. 49 | 50 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Kaido - Watch Free Anime 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/*" 3 | to = "/" 4 | status = 200 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kaido", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build ", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.5.0", 14 | "framer-motion": "^10.16.4", 15 | "hls.js": "^1.4.12", 16 | "p-queue": "^7.4.1", 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0", 19 | "react-icons": "^4.10.1", 20 | "react-query": "^3.39.3", 21 | "react-router-dom": "^6.15.0", 22 | "swiper": "^10.2.0" 23 | }, 24 | "devDependencies": { 25 | "@types/react": "^18.2.15", 26 | "@types/react-dom": "^18.2.7", 27 | "@vitejs/plugin-react": "^4.0.3", 28 | "eslint": "^8.45.0", 29 | "eslint-plugin-react": "^7.32.2", 30 | "eslint-plugin-react-hooks": "^4.6.0", 31 | "eslint-plugin-react-refresh": "^0.4.3", 32 | "vite": "^4.4.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Manj0tBenipal/kaido/f575bd1fed695b8269e05704df2ce6a551a77afb/public/favicon.ico -------------------------------------------------------------------------------- /public/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Manj0tBenipal/kaido/f575bd1fed695b8269e05704df2ce6a551a77afb/public/logo.jpg -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Kaido", 3 | "short_name": "Kaido", 4 | "start_url": "/", 5 | "display": "standalone", 6 | "background_color": "#242428", 7 | "theme_color": "#2196F3" 8 | } -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 2 | import { lazy } from "react"; 3 | import Nav from "./Layouts/Nav"; 4 | const Home = lazy(() => import("./pages/Home")); 5 | const Genre = lazy(() => import("./pages/Genre")); 6 | 7 | const GenreSidebar = lazy(() => import("./Layouts/GenreSidebar")); 8 | 9 | const AnimeInfoRandom = lazy(() => 10 | import("./components/AnimeInfo/AnimeInfoRandom") 11 | ); 12 | const AnimeByFilter = lazy(() => import("./pages/AnimeByFilter")); 13 | const AnimeByType = lazy(() => import("./pages/AnimeByType")); 14 | const WatchAnime = lazy(() => import("./pages/WatchAnime/WatchAnime")); 15 | const SearchResults = lazy(() => import("./pages/SearchResults")); 16 | const RecommendedTopTen = lazy(() => import("./Layouts/RecommendedTopTen")); 17 | const AnimeInfoJikan = lazy(() => 18 | import("./components/AnimeInfo/AnimeInfoJikan") 19 | ); 20 | const AnimeInfoKitsu = lazy(() => 21 | import("./components/AnimeInfo/AnimeInfoKitsu") 22 | ); 23 | 24 | export default function App() { 25 | return ( 26 | 27 | 28 | }> 29 | } /> 30 | }> 31 | } /> 32 | } /> 33 | } /> 34 | 35 | }> 36 | } /> 37 | } /> 38 | } /> 39 | 40 | } /> 41 | } /> 42 | 43 | 44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/Layouts/GenreSidebar.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Genre from "../components/Genre/Genre"; 3 | import TopTenAnime from "../components/TopTen/TopTenAnime"; 4 | import Share from "../components/Share/Share"; 5 | import { Outlet } from "react-router-dom"; 6 | export default function GenreSidebar() { 7 | return ( 8 | <> 9 | 18 |
24 |
25 | 26 | 27 |
28 | 29 |
30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/Layouts/Nav.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, Suspense } from "react"; 2 | import { Outlet } from "react-router-dom"; 3 | import Navbar from "../components/Navbar/Navbar"; 4 | import NavSidebar from "../components/NavigationSidebar/NavSidebar"; 5 | import Footer from "../components/Footer/Footer"; 6 | import { easeOut, motion } from "framer-motion"; 7 | import LoadingSpinner from "../components/LoadingSpinner"; 8 | export default function Nav() { 9 | const [isScrolled, setIsScrolled] = useState(false); 10 | const [sidebarIsOpen, setSidebarIsOpen] = useState(false); 11 | 12 | useEffect(() => { 13 | const handleScroll = () => { 14 | const scrollPosition = 15 | window.scrollY || document.documentElement.scrollTop; 16 | if (scrollPosition > 0 && isScrolled === false) { 17 | setIsScrolled(true); 18 | } else if (scrollPosition === 0) { 19 | setIsScrolled(false); 20 | } 21 | }; 22 | window.addEventListener("scroll", handleScroll); 23 | return () => { 24 | window.removeEventListener("scroll", handleScroll); 25 | }; 26 | }, [isScrolled]); 27 | return ( 28 | 33 | 38 | 42 | }> 43 | 44 | 45 | 46 |