---
# System prepended metadata

title: Assignment

---

# 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:

```javascript
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!