Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arkapg211002/playnet
PlayNet is an innovative web application that replicates the functionality of YouTube, developed using HTML, CSS, JavaScript, JSX, ReactJS, and React Router DOM. By leveraging the power of the YouTube API v3 from Rapid API, PlayNet provides users with a seamless experience of discovering and watching videos, browsing channels.
https://github.com/arkapg211002/playnet
clone-app css html javascript jsx node-js npm rapidapi react-router reactjs youtube youtube-api-v3
Last synced: about 1 month ago
JSON representation
PlayNet is an innovative web application that replicates the functionality of YouTube, developed using HTML, CSS, JavaScript, JSX, ReactJS, and React Router DOM. By leveraging the power of the YouTube API v3 from Rapid API, PlayNet provides users with a seamless experience of discovering and watching videos, browsing channels.
- Host: GitHub
- URL: https://github.com/arkapg211002/playnet
- Owner: arkapg211002
- License: mit
- Created: 2023-06-24T08:47:00.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-13T05:06:23.000Z (9 months ago)
- Last Synced: 2024-04-13T20:04:15.484Z (9 months ago)
- Topics: clone-app, css, html, javascript, jsx, node-js, npm, rapidapi, react-router, reactjs, youtube, youtube-api-v3
- Language: JavaScript
- Homepage: https://play-net-eight.vercel.app/
- Size: 3.38 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
PlayNet
A YouTube Clone with YouTube API Integration PlayNet is an innovative web application that replicates the functionality of YouTube developed using HTML CSS JavaScript JSX ReactJS and React Router DOM. By leveraging the power of the YouTube API v3 from Rapid API PlayNet provides users with a seamless experience of discovering and watching videos browsing channels and exploring different genres. Upon launching PlayNet users are greeted with a visually appealing home page that dynamically fetches and displays the latest 20 videos from the YouTube API. This ensures that users stay up-to-date with the most recent content available on the platform. The video thumbnails titles and relevant details are presented in an organized and user-friendly manner resembling the familiar layout of YouTube. To enhance user exploration PlayNet offers a menu featuring various video genres. Users can easily navigate through different genres such as music sports gaming news and more. By selecting a genre PlayNet fetches and presents a curated list of videos within that specific category allowing users to discover content tailored to their interests. The search functionality in PlayNet enables users to find specific channels of their choice. The search bar accepts user input and dynamically retrieves channel information based on the entered query. Users can enter keywords or the name of the channel they are looking for and PlayNet promptly fetches the relevant search results from the YouTube API. Upon selecting a specific channel users are redirected to a dedicated channel page that showcases the channel's videos playlists and other pertinent information. One crucial aspect to consider is the usage of the YouTube API's rate limits. PlayNet is designed to optimize API calls taking into account the limit of 500 API calls per day. To ensure efficient utilization the application fetches a maximum of 20 videos for any given search or request providing users with a manageable and relevant selection of content. Overall PlayNet aims to replicate the core functionalities of YouTube while offering a personalized and streamlined user experience. With its seamless integration of the YouTube API v3 from Rapid API PlayNet empowers users to discover and enjoy a vast array of videos browse channels and explore various genres all within a familiar and user-friendly interface.
🚀 Demo
[https://playnet-sandy.vercel.app/](https://playnet-sandy.vercel.app/)
![pagespeed](https://github.com/arkapg211002/arkapg211002/blob/main/metrics.plugin.playnet.screenshot.svg)
Project Screenshots:
🧐 Features
Here're some of the project's best features:
* Stream Videos
* Search any channel
* 500 API fetch per day
* 20 videos per search
💻 Built with
Technologies used in the project:
* HTML
* CSS
* Javascript
* ReactJS
* RapidAPI
* React-router-dom
* JSX
* Youtube-api-v3🛡️ License:
This project is licensed under the MIT License
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.The page will reload when you make changes.\
You may also see any lint errors in the console.### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)