---

## 🎯 **Prompt for Gemini (Frontend-Only YouTube Clone)**

### 🧩 **Project Overview:**

> Build a **YouTube Clone UI** using **React.js + Tailwind CSS**, with fully embedded playable videos.
> The app must **not use any backend** and should **use static video data (JSON/JS array)**.
> The goal is to **replicate the visual layout and interactivity of YouTube**, based on the attached screenshots.

---

### 🔧 **Technologies to Use:**

* React.js (with React Router DOM)
* Tailwind CSS
* HTML5 Video Element
* Dummy video data (JS array of objects)
* No backend or API calls

---

### 📄 **App Structure**

```
src/
├── App.jsx
├── main.jsx
├── data/
│   └── videos.js
├── components/
│   ├── Navbar.jsx
│   ├── Sidebar.jsx
│   ├── VideoCard.jsx
│   ├── VideoGrid.jsx
│   ├── VideoPlayer.jsx
│   └── RelatedVideos.jsx
├── pages/
│   ├── Home.jsx
│   └── Watch.jsx
```

---

### 💡 **Key Features to Implement**

---

### 1. **Navbar (Top Bar)**

* Show logo "YouTube Clone"
* Search bar (non-functional)
* "Create", "Bell" icons (dummy)
* Avatar on the right

---

### 2. **Sidebar (Left Menu)**

* Show vertical menu with:

  * Home
  * Shorts
  * Subscriptions
  * History, Playlists, etc.
* Responsive (collapses on mobile)

---

### 3. **Home Page (********`/`****\*\*\*\*)**

* Display video cards in **3-column grid**
* Use dummy video array with fields like:

```js
{
  id: "1",
  title: "Learn React in 10 Minutes",
  channel: "DevTutor",
  views: "200K views",
  date: "3 days ago",
  thumbnail: "https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg",
  videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4"
}
```

* Each card must show:

  * Thumbnail (image)
  * Title
  * Channel name
  * Views + Time
* Clicking a card routes to `/watch/:id`

---

### 4. **Watch Page (********`/watch/:id`****\*\*\*\*)**

* Display HTML5 `<video>` element with controls
* Show title, channel, likes (dummy), date
* "Subscribe" button (non-functional)
* Description below video
* **Autoplay selected video** based on ID from dummy data
* **Sidebar on the right with Related Videos** (map from same dummy data, except current one)

---

### 5. **Video Playback**

* Use embedded video element:

```html
<video controls className="w-full h-auto rounded-lg">
  <source src={video.videoUrl} type="video/mp4" />
  Your browser does not support the video tag.
</video>
```

* Supports local file links or public MP4 links (like W3Schools videos)

---

### 🧠 **Bonus Features (Optional for Gemini to Try)**

* Video player layout matches YouTube (left video, right suggestions)
* Scroll behavior and sticky sidebar
* Lazy load thumbnails
* Responsive mobile-first layout
* Tailwind dark mode support

---

### 🧪 **Testing Goals for Gemini**

* Can Gemini build a **Home + Watch layout UI** like YouTube from images
* Can Gemini map a **video ID to actual embedded playback**
* Can Gemini render a list of **related videos** excluding the current one
* Can Gemini structure clean reusable components

---

### ✅ **Final Output Expectation**

A complete **React + Tailwind** project with:

* Working routing
* Embedded playable videos
* Static data-driven pages
* No backend, no API
* Fully responsive YouTube-like layout
* Mirrors the layout from the provided screenshots

---