In this challenge, you are tasked with creating a fully functional, responsive channel page that adheres to the design specifications provided. The interface should include the following features where users can:

• Channel Overview: Display channel information including the channel banner, profile picture, and basic channel statistics.
• Video Feed: Browse a feed of videos uploaded by the channel.
• Playlist Feed: Browse playlists created by the channel.
• Subscription: Subscribe to or unsubscribe from the channel (locally stored user state for now)
• [Stretch goal] YouTube API Integration: Use the YouTube API to fetch and display channel data, videos, playlists, and subscriber count.

Functional Requirements

1. Channel Overview

• Display the channel banner and profile picture prominently.
• Include basic channel statistics such as the number of subscribers and videos.
  • Number of subscribers: Conduct big number rounding and truncation e.g. 500,000 to 500K, 5,000,000 to 5M

2. Video Feed

• Display a feed of videos uploaded by the channel.
• If you did the Video Card challenge, integrate it for dynamic content display. Else, you can also build it directly in this challenge.
  • Video title: Truncate long titles if needed, as per the design
  • Video duration: Display in HH:MM:SS
  • Creator name: If the creator is verified, display verification tick
  • Number of views: Conduct big number rounding and truncation e.g. 500,000 to 500K, 5,000,000 to 5M
  • Date created: In relative time format e.g. 5 months ago
  • On click: Clicking on the creator name should take the user to their channel. Clicking anywhere else leads to the Video Detail Page (You will build this in the MeTube challenge. For now, leave it as a placeholder).

3. Playlist Feed

• Display playlists created by the channel as cards, in descending order of last updated date.
• Each playlist card should include a thumbnail, title, and the number of videos in the playlist.
• Hovering over anywhere on the playlist card triggers the "Play all" hover mode
• Redirections: For both redirections, you will build the destination pages in the MeTube challenge. For now, leave it as a placeholder
  • Clicking on "View full playlist" leads to the Playlist Detail Page
  • Clicking anywhere else leads to 'play all mode'

4. Subscribe button

• If you've implemented the Subscribe Card challenge, integrate it here
• Since there is no way for the user to sign in on this project yet (until the MeTube project), the user will always be in Guest Mode. Hence, you can store the user's subscription state locally since actual subscription via the YouTube API requires authentication.

5. [Stretch goal] YouTube API Integration

• Use the YouTube Data API to fetch and display channel data, videos, playlists, and subscriber count.

6. State Handling

• No cover banner: Display empty state as per design
• No Subscribers: Omit the number of subscribers
• No Videos:
  • Omit the number of videos on the channel statistics
  • Under 'Videos' tab: Display a message indicating that the channel has no videos.
• No Playlists:
  • Under the 'Playlists' tab: Display a message indicating that the channel has no playlists.
• Playlist has no videos: Display the no videos state as per the design

7. Error states

• Data fetch error: Show an empty state message titled "Unexpected error" with the description "We're facing some issues at the moment. Please try again later or contact support."

General Requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
  • Responsive layout: The content should stack vertically on smaller screens and align horizontally as the screen width increases.
• Link / Button states: Implement and style links and buttons to reflect different states - normal, hover, focus and disabled.
• Tabs: Implement tabs that allow users to click or tap to reveal content associated with each feature of the video channel page
  • Interactivity: Implement active and inactive states
  • Smooth transitions: Ensure that the tab transitions are smooth, with content loading efficiently to keep engagement high and bounce rates low.
  • Content loading: Dynamic Content Loading: Dynamically load content within tabs to improve performance and user interaction.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Code for fast load times with efficient CSS and JavaScript techniques.
• [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper alt tags for images.