Clean YouTube is a React-based web application designed to enhance your YouTube video-watching experience by providing a clean, ad-free, and distraction-free interface. Users can efficiently manage playlists, track recent activities, and save their favorite playlists for a seamless and enjoyable experience.
YouTube’s default interface, while feature-rich, can often be overwhelming and distracting for users. Ads, recommendations, and cluttered layouts disrupt the viewing experience, and managing multiple playlists efficiently can be challenging. Users lack a simple, organized, and distraction-free platform to focus solely on their selected videos.
To develop a clean, user-friendly web application that provides an ad-free and distraction-free YouTube experience, allowing users to efficiently manage playlists, track recently accessed content, and save favorites for a seamless and enjoyable viewing experience.
Challenge:When adding a new playlist, the success notification was triggered twice. Before the playlist was fetched, and after the playlist was successfully displayed. This created confusion and an inconsistent user experience.
Solution:Refactored the playlist addition handler to use async/await, ensuring that the success message is displayed only after the playlist fetch operation is completed successfully. This provided users with a clear and accurate confirmation flow.
Challenge:Default playlist thumbnails were displayed in low resolution, which negatively affected the overall visual quality and user experience.
Solution:Replaced the default playlist thumbnail with the first video’s thumbnail, which provides a higher resolution image. This improved the visual presentation and made the interface more appealing and professional.
Challenge:Every time users navigated to the playlist page, a new API request was made to fetch playlist data. This caused slower performance due to repeated network calls, and increased and unnecessary load on the YouTube Data API.
Solution:Implemented local storage caching for playlist data. On the first visit, playlist data is fetched from the API and stored locally. On subsequent visits, the app retrieves data directly from local storage instead of making redundant API calls. This optimization significantly reduced API usage, improved performance, and provided a faster, smoother user experience.
Challenge:After a few months, the previously working YouTube Data API integration suddenly started failing. Even though the code and API key remained unchanged, every request to fetch playlists returned a 403 Forbidden error.
Solution:The issue occurred because the YouTube Data API v3, previously enabled, had become disabled for unknown reasons. After logging into Google Cloud Console → APIs & Services → Enabled APIs & Services, I found it disabled, re-enabled it, and retested the integration, the requests then worked successfully.
Challenge:Attempted to integrate Google Gemini AI into the app to allow users to search for playlist links or IDs directly. While Gemini’s official website returned valid playlist links during testing, the implementation inside the app produced invalid, AI-generated playlist IDs instead of fetching real ones. This happened because Gemini, when used via API, cannot directly query YouTube’s database and instead generated IDs based on patterns, leading to unusable results.
Solution:Replaced the AI-based search with the YouTube Data API Search endpoint to reliably fetch playlist IDs, ensuring users always receive valid IDs directly from YouTube. This made the search functionality accurate, consistent, and production-ready while eliminating reliance on AI-generated results, providing a more dependable user experience.