This application is a YouTube Channel Browser that allows users to enter a YouTube channel URL or ID to browse all videos from that channel in chronological order. The app extracts the channel ID from various formats of YouTube URLs, fetches the channel's video data, and displays it in a user-friendly interface. To use the app, users simply input a YouTube channel URL or ID into a form. Upon submission, the app retrieves the channel's videos and displays them along with relevant information such as the video title, description, thumbnail, published date, duration, and view count. Users can also track which videos they have watched, and the app provides a progress indicator showing how many videos have been watched versus the total available. The app is built using TypeScript and React, leveraging Next.js for server-side rendering and API routes. It utilizes various hooks for managing state and side effects, including custom hooks for handling URL state, watched videos, and scrolling to specific videos. The application also employs the Fetch API to interact with the YouTube Data API, handling errors gracefully and providing user feedback. Key features of the app include: - Input form for entering YouTube channel URLs or IDs. - Automatic extraction of channel IDs from different URL formats. - Display of video information in a grid layout, including watched status and progress tracking. - Loading indicators and error handling for a smooth user experience. - Ability to share the current channel URL via the Web Share API or by copying to the clipboard. - Local storage management for caching watched videos and channel data to enhance performance. Overall, this app provides a comprehensive tool for users to explore and manage their interactions with YouTube channels and videos.
No tags
Last Updated July 2, 2025
