🎵 Media Player – Frontend (React)

A modern and responsive Media Player frontend built using React JS. Users can add YouTube videos, watch them in a modal player, drag & drop between categories, and manage their collection easily.

---

🚀 Features

🎬 Add YouTube Videos

• Enter video caption
• Add thumbnail image URL
• Paste YouTube link
• Automatic conversion to YouTube embed format
• Form validation for invalid URLs

📺 Watch Videos

• Open video in modal popup
• Embedded YouTube player (iframe)
• Smooth UI experience

🖱 Drag & Drop

• Drag video cards
• Drop into categories
• Easy video organization

🗑 Delete Videos

• Remove videos from collection instantly

🔔 Toast Notifications

• Success messages
• Error alerts
• Clean user feedback system

---

🛠 Tech Stack

• React JS
• React Bootstrap
• React Toastify
• CSS
• Axios (API integration)

---

📂 Main Components

• Add.jsx → Upload new YouTube videos
• Videocard.jsx → Display video cards
• Modal Player
• Drag & Drop functionality

---

⚙️ Installation

npm install
npm start

---

🔗 Connected Backend

This frontend connects to a REST API (JSON Server / Node backend).

---

👨‍💻 Author

Salmanul Faris Frontend Developer (React)

---

Tell me 👍