# YouTube Clone Assignment

## Overview
In this assignment, you will build a simplified version of YouTube using React. This project will test your understanding of React components, props, lists, keys, state management, and event handling.

## Task
Create a YouTube-like application that displays videos, allows searching and filtering, and handles user interactions.

## Requirements

### 1. Components and Props
- Create the following components:
- `Header` component with search functionality
- `VideoList` component to display multiple videos
- `VideoCard` component to show individual video information
- `Sidebar` component for category navigation
- `VideoPlayer` component to show detailed video view
- Use props to pass data between components
- Implement proper prop validation

### 2. Lists and Keys
- Display a list of videos using the provided data
- Use unique keys for each video in the list
- Implement category lists with appropriate keys

### 3. State and Events
- Manage application state for:
- Currently selected video
- Search queries
- Selected category
- User interactions (likes, subscriptions)
- Create event handlers for:
- Video selection
- Search filtering
- Category selection
- Like/dislike functionality
- Subscribe button interactions

## Data
Use this sample data for your application:

const videos = [
  {
    id: 1,
    title: "Learn React in 30 Minutes",
    thumbnail: "react-thumbnail.jpg",
    channel: "CodeMaster",
    views: "245K",
    timestamp: "3 weeks ago",
    description: "Learn the basics of React in this comprehensive tutorial.",
    category: "programming"
  },
  {
    id: 2,
    title: "10 JavaScript Tricks You Should Know",
    thumbnail: "js-tricks-thumbnail.jpg",
    channel: "WebDev Pro",
    views: "500K",
    timestamp: "2 months ago",
    description: "Advanced JavaScript techniques to improve your coding.",
    category: "programming"
  },
  {
    id: 3,
    title: "Build a Netflix Clone with React",
    thumbnail: "netflix-clone-thumbnail.jpg",
    channel: "ReactNinja",
    views: "1.2M",
    timestamp: "8 months ago",
    description: "Step-by-step guide to building a Netflix clone with React.",
    category: "project"
  },
  {
    id: 4,
    title: "CSS Grid Layout Tutorial",
    thumbnail: "css-grid-thumbnail.jpg",
    channel: "CSSWizard",
    views: "320K",
    timestamp: "5 weeks ago",
    description: "Master CSS Grid layouts for responsive web design.",
    category: "styling"
  },
  {
    id: 5,
    title: "React Hooks Explained",
    thumbnail: "hooks-thumbnail.jpg",
    channel: "ReactMaster",
    views: "780K",
    timestamp: "4 months ago",
    description: "In-depth explanation of React Hooks with examples.",
    category: "programming"
  }
];

const categories = ["All", "Programming", "Styling", "Project", "Design"];

## Implementation Steps

1. **Set up your React project**
- Create a new React application using Create React App or Vite

2. **Create components**
- Build each of the required components with proper structure
- Implement component hierarchy with App as the main component

3. **Implement video listing**
- Display videos in a grid layout
- Each video should show thumbnail, title, channel, and view count
- Use proper keys for each video item

4. **Add video selection**
- When a video is clicked, show the detailed view
- Implement a way to close the detailed view and return to the grid

5. **Add search functionality**
- Create a search input in the Header
- Filter videos based on search term in title or channel name

6. **Implement category filtering**
- Show categories in the Sidebar
- Allow filtering videos by selected category

7. **Add user interactions**
- Implement like/dislike functionality
- Add subscribe button with toggle state
- Include view counts and timestamps

8. **Style your application**
- Create a responsive layout that resembles YouTube
- Style components to match a video platform interface

## Evaluation Criteria

Your assignment will be evaluated based on:

1. **Component Structure**: Proper organization and composition of components
2. **Props Usage**: Effective passing and handling of props
3. **List Rendering**: Efficient rendering with appropriate keys
4. **State Management**: Proper use of state for UI updates
5. **Event Handling**: Correct implementation of event handlers
6. **Functionality**: All features working as expected
7. **Code Quality**: Clean, organized code following best practices
8. **UI/UX**: Pleasant and responsive user interface

## Bonus Challenges

For extra credit, implement any of these features:
1. Dark/light mode toggle
2. Comments section for videos
3. Watch history feature
4. Video recommendations
5. Responsive design for mobile devices

## Submission Guidelines

1. Create a GitHub repository for your project
2. Include a README with:
- Setup instructions
- Features implemented
- Screenshots of your application
3. Submit the GitHub repository link
4. Deploy your application (optional) using services like Netlify or Vercel

Good luck with your YouTube Clone project!