A web-based project designed to enhance focus by reducing distractions on YouTube. This project provides a minimalistic interface, hiding unnecessary recommendations and distractions such as the sidebar, comments, and trending sections, allowing users to watch only the content they choose.
- Minimal Interface: Hides unnecessary YouTube elements like comments, related videos, and recommendations.
- Focus Mode: Enables users to watch videos distraction-free.
- Lightweight and Fast: Simple design with minimal overhead to ensure smooth browsing.
- HTML: For structuring the web interface.
- CSS: For styling the interface to ensure a clean and distraction-free experience.
- JavaScript: For adding interactivity, hiding/unhiding YouTube elements , Event listeners(DOM manupilation) as fronted works and for the Backend works like validating youtube key, initialising the key and search endpoint.
- Loading the Page: Once the user opens YouTube through this project, it injects custom CSS and JavaScript to hide distracting elements.
- Toggle Options: Users can enable or disable specific sections such as:
- Dark and Light mode
- Focus Mode: When enabled, the project only displays the main video player.
- A modern web browser (Chrome, Edge, Firefox, etc.)
- A valid YouTube API key or with Google unrestricted API key
- Clone the repository:
git clone https://github.com/Bhuvanesh66/Detoxified-Youtube-Feed
- Navigate to the project directory:
cd Web app
- Run the server:
node server.js
- Open
public\index.html
file in your preferred web browser.
- Replace the placeholder API key in the .env with your Google API key before you run your server.js file:
API_KEY = 'YOUR_API_KEY_HERE'; PORT = 3000
- Save the changes and refresh the browser.
If you want to be productive while using YouTube and want to skip unwanted recommendation which are apart from your search this try using my web app
project-directory/
|-public
|-- index.html # Main HTML file
|-- search.html # Additionally required HTML file
|-- styles.css # Embedded CSS in the HTML file
|-- script.js # Embedded JavaScript in the HTML file
|-server.js
- Fork the repository.
- Create a feature branch (
git checkout -b feature-name
). - Commit your changes (
git commit -m 'Add a new feature'
). - Push to the branch (
git push origin feature-name
). - Open a pull request.
- YouTube API for enabling the core functionality of this project.
For queries or feedback, please contact [email protected]