Project Live Link 🔗🔗

https://youtube-five-neon.vercel.app/

📖 Overview

This FLUX PLAY is a single-page React application that replicates the core features of YouTube’s interface and user experience. Built using modern frontend tools like React, Redux Toolkit, and Tailwind CSS, it integrates with real YouTube APIs to fetch trending videos and offer intelligent search suggestions.

• 𝐓𝐡𝐢𝐬 𝐩𝐫𝐨𝐣𝐞𝐜𝐭 𝐢𝐬 𝐚𝐥𝐥 𝐚𝐛𝐨𝐮𝐭 𝐟𝐞𝐚𝐭𝐮𝐫𝐞 𝐫𝐢𝐜𝐡𝐧𝐞𝐬𝐬 𝐫𝐚𝐭𝐡𝐞𝐫 𝐭𝐡𝐚𝐧 𝐔𝐈.

• 𝐓𝐡𝐞 𝐚𝐩𝐩 𝐬𝐮𝐩𝐩𝐨𝐫𝐭𝐬 𝐢𝐧𝐟𝐢𝐧𝐢𝐭𝐞 𝐬𝐜𝐫𝐨𝐥𝐥𝐢𝐧𝐠, 𝐝𝐲𝐧𝐚𝐦𝐢𝐜 𝐫𝐨𝐮𝐭𝐢𝐧𝐠, 𝐥𝐚𝐳𝐲 𝐥𝐨𝐚𝐝𝐢𝐧𝐠, 𝐚𝐧𝐝 𝐬𝐞𝐚𝐫𝐜𝐡 𝐫𝐞𝐬𝐮𝐥𝐭 𝐜𝐚𝐜𝐡𝐢𝐧𝐠 𝐭𝐨 𝐝𝐞𝐥𝐢𝐯𝐞𝐫 𝐚 𝐬𝐞𝐚𝐦𝐥𝐞𝐬𝐬 𝐚𝐧𝐝 𝐨𝐩𝐭𝐢𝐦𝐢𝐳𝐞𝐝 𝐛𝐫𝐨𝐰𝐬𝐢𝐧𝐠 𝐞𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞.

• 𝐀 𝐬𝐢𝐦𝐮𝐥𝐚𝐭𝐞𝐝 𝐥𝐢𝐯𝐞 𝐜𝐡𝐚𝐭, 𝐧𝐞𝐬𝐭𝐞𝐝 𝐜𝐨𝐦𝐦𝐞𝐧𝐭𝐬, 𝐚𝐧𝐝 𝐚 𝐬𝐢𝐝𝐞𝐛𝐚𝐫 𝐭𝐨𝐠𝐠𝐥𝐞 𝐩𝐫𝐨𝐯𝐢𝐝𝐞 𝐫𝐢𝐜𝐡 𝐢𝐧𝐭𝐞𝐫𝐚𝐜𝐭𝐢𝐯𝐢𝐭𝐲.

• 𝐓𝐡𝐞 𝐚𝐩𝐩 𝐥𝐞𝐯𝐞𝐫𝐚𝐠𝐞𝐬 𝐀𝐏𝐈 𝐩𝐨𝐥𝐥𝐢𝐧𝐠 𝐰𝐢𝐭𝐡 𝐚 𝟐-𝐬𝐞𝐜𝐨𝐧𝐝 𝐢𝐧𝐭𝐞𝐫𝐯𝐚𝐥, 𝟐𝟓𝟎𝐦𝐬 𝐝𝐞𝐛𝐨𝐮𝐧𝐜𝐞, 𝐚𝐧𝐝 𝐑𝐞𝐝𝐮𝐱-𝐩𝐨𝐰𝐞𝐫𝐞𝐝 𝐜𝐚𝐜𝐡𝐢𝐧𝐠 𝐭𝐨 𝐦𝐢𝐧𝐢𝐦𝐢𝐳𝐞 𝐧𝐞𝐭𝐰𝐨𝐫𝐤 𝐜𝐚𝐥𝐥𝐬 𝐚𝐧𝐝 𝐦𝐚𝐱𝐢𝐦𝐢𝐳𝐞 𝐩𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐞𝐟𝐟𝐢𝐜𝐢𝐞𝐧𝐜𝐲.

🚀 Tech Stack

• 𝐑𝐞𝐚𝐜𝐭.𝐣𝐬 – 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐥𝐢𝐛𝐫𝐚𝐫𝐲

• 𝐑𝐞𝐝𝐮𝐱 𝐓𝐨𝐨𝐥𝐤𝐢𝐭 – 𝐒𝐭𝐚𝐭𝐞 𝐦𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭

• 𝐑𝐞𝐚𝐜𝐭 𝐑𝐨𝐮𝐭𝐞𝐫 𝐃𝐎𝐌 – 𝐂𝐥𝐢𝐞𝐧𝐭-𝐬𝐢𝐝𝐞 𝐫𝐨𝐮𝐭𝐢𝐧𝐠

• 𝐓𝐚𝐢𝐥𝐰𝐢𝐧𝐝 𝐂𝐒𝐒 – 𝐔𝐭𝐢𝐥𝐢𝐭𝐲-𝐟𝐢𝐫𝐬𝐭 𝐂𝐒𝐒 𝐟𝐫𝐚𝐦𝐞𝐰𝐨𝐫𝐤

• 𝐘𝐨𝐮𝐓𝐮𝐛𝐞 𝐃𝐚𝐭𝐚 𝐀𝐏𝐈 𝐯𝟑 – 𝐅𝐞𝐭𝐜𝐡𝐢𝐧𝐠 𝐩𝐨𝐩𝐮𝐥𝐚𝐫 𝐯𝐢𝐝𝐞𝐨𝐬

• 𝐘𝐨𝐮𝐓𝐮𝐛𝐞 𝐒𝐮𝐠𝐠𝐞𝐬𝐭 𝐀𝐏𝐈 – 𝐑𝐞𝐚𝐥-𝐭𝐢𝐦𝐞 𝐬𝐞𝐚𝐫𝐜𝐡 𝐬𝐮𝐠𝐠𝐞𝐬𝐭𝐢𝐨𝐧𝐬

🧠 𝐊𝐞𝐲 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬

📝 𝐓𝐡𝐢𝐬 𝐩𝐫𝐨𝐣𝐞𝐜𝐭 𝐢𝐬 𝐩𝐫𝐢𝐦𝐚𝐫𝐢𝐥𝐲 𝐟𝐨𝐜𝐮𝐬𝐞𝐝 𝐨𝐧 𝐟𝐞𝐚𝐭𝐮𝐫𝐞 𝐢𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐚𝐭𝐢𝐨𝐧 𝐫𝐚𝐭𝐡𝐞𝐫 𝐭𝐡𝐚𝐧 𝐔𝐈 𝐚𝐞𝐬𝐭𝐡𝐞𝐭𝐢𝐜𝐬.

📺 𝐕𝐢𝐝𝐞𝐨 𝐋𝐢𝐬𝐭𝐢𝐧𝐠 𝐟𝐫𝐨𝐦 𝐘𝐨𝐮𝐓𝐮𝐛𝐞 𝐀𝐏𝐈

• 𝐅𝐞𝐭𝐜𝐡𝐞𝐬 𝐭𝐫𝐞𝐧𝐝𝐢𝐧𝐠 𝐯𝐢𝐝𝐞𝐨𝐬 𝐮𝐬𝐢𝐧𝐠 𝐭𝐡𝐞 𝐘𝐨𝐮𝐓𝐮𝐛𝐞 𝐃𝐚𝐭𝐚 𝐀𝐏𝐈.

• 𝐋𝐢𝐬𝐭𝐬 𝐯𝐢𝐝𝐞𝐨 𝐭𝐡𝐮𝐦𝐛𝐧𝐚𝐢𝐥𝐬, 𝐭𝐢𝐭𝐥𝐞𝐬, 𝐚𝐧𝐝 𝐜𝐡𝐚𝐧𝐧𝐞𝐥 𝐢𝐧𝐟𝐨 𝐨𝐧 𝐭𝐡𝐞 𝐡𝐨𝐦𝐞𝐩𝐚𝐠𝐞.

• 𝐈𝐧𝐭𝐞𝐠𝐫𝐚𝐭𝐞𝐝 𝐰𝐢𝐭𝐡 𝐢𝐧𝐟𝐢𝐧𝐢𝐭𝐞 𝐬𝐜𝐫𝐨𝐥𝐥𝐢𝐧𝐠 𝐟𝐨𝐫 𝐬𝐞𝐚𝐦𝐥𝐞𝐬𝐬 𝐯𝐢𝐝𝐞𝐨 𝐥𝐨𝐚𝐝𝐢𝐧𝐠.

• 𝐋𝐚𝐳𝐲 𝐥𝐨𝐚𝐝𝐞𝐝 𝐯𝐢𝐝𝐞𝐨 𝐜𝐚𝐫𝐝𝐬 𝐮𝐬𝐢𝐧𝐠 𝐑𝐞𝐚𝐜𝐭.𝐥𝐚𝐳𝐲 𝐚𝐧𝐝 𝐒𝐮𝐬𝐩𝐞𝐧𝐬𝐞 𝐭𝐨 𝐨𝐩𝐭𝐢𝐦𝐢𝐳𝐞 𝐢𝐧𝐢𝐭𝐢𝐚𝐥 𝐥𝐨𝐚𝐝 𝐭𝐢𝐦𝐞 𝐚𝐧𝐝 𝐫𝐞𝐝𝐮𝐜𝐞 𝐛𝐮𝐧𝐝𝐥𝐞 𝐬𝐢𝐳𝐞.

📱 𝐑𝐞𝐬𝐩𝐨𝐧𝐬𝐢𝐯𝐞 𝐔𝐈 & 𝐒𝐢𝐝𝐞𝐛𝐚𝐫 𝐓𝐨𝐠𝐠𝐥𝐞

• 𝐈𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐞𝐝 𝐚 𝐡𝐚𝐦𝐛𝐮𝐫𝐠𝐞𝐫 𝐦𝐞𝐧𝐮 𝐰𝐢𝐭𝐡 𝐑𝐞𝐝𝐮𝐱 𝐭𝐨 𝐭𝐨𝐠𝐠𝐥𝐞 𝐭𝐡𝐞 𝐬𝐢𝐝𝐞𝐛𝐚𝐫.

• 𝐒𝐢𝐝𝐞𝐛𝐚𝐫 𝐞𝐱𝐩𝐚𝐧𝐝𝐬 𝐨𝐫 𝐜𝐨𝐥𝐥𝐚𝐩𝐬𝐞𝐬 𝐝𝐲𝐧𝐚𝐦𝐢𝐜𝐚𝐥𝐥𝐲 𝐛𝐚𝐬𝐞𝐝 𝐨𝐧 𝐠𝐥𝐨𝐛𝐚𝐥 𝐬𝐭𝐚𝐭𝐞.

🔍 𝐈𝐧𝐭𝐞𝐥𝐥𝐢𝐠𝐞𝐧𝐭 𝐒𝐞𝐚𝐫𝐜𝐡 𝐰𝐢𝐭𝐡 𝐃𝐞𝐛𝐨𝐮𝐧𝐜𝐞 & 𝐂𝐚𝐜𝐡𝐢𝐧𝐠 𝐟𝐨𝐫 𝐍𝐞𝐭𝐰𝐨𝐫𝐤 𝐎𝐩𝐭𝐢𝐦𝐢𝐳𝐚𝐭𝐢𝐨𝐧

• 𝐈𝐧𝐭𝐞𝐠𝐫𝐚𝐭𝐞𝐝 𝐰𝐢𝐭𝐡 𝐭𝐡𝐞 𝐘𝐨𝐮𝐓𝐮𝐛𝐞 𝐒𝐞𝐚𝐫𝐜𝐡 𝐒𝐮𝐠𝐠𝐞𝐬𝐭 𝐀𝐏𝐈 𝐭𝐨 𝐝𝐞𝐥𝐢𝐯𝐞𝐫 𝐫𝐞𝐚𝐥-𝐭𝐢𝐦𝐞 𝐬𝐞𝐚𝐫𝐜𝐡 𝐬𝐮𝐠𝐠𝐞𝐬𝐭𝐢𝐨𝐧𝐬 𝐛𝐚𝐬𝐞𝐝 𝐨𝐧 𝐮𝐬𝐞𝐫 𝐢𝐧𝐩𝐮𝐭.

• 𝐔𝐭𝐢𝐥𝐢𝐳𝐞𝐬 𝐚 𝟐𝟓𝟎𝐦𝐬 𝐝𝐞𝐛𝐨𝐮𝐧𝐜𝐞 𝐦𝐞𝐜𝐡𝐚𝐧𝐢𝐬𝐦 𝐭𝐨 𝐥𝐢𝐦𝐢𝐭 𝐭𝐡𝐞 𝐟𝐫𝐞𝐪𝐮𝐞𝐧𝐜𝐲 𝐨𝐟 𝐀𝐏𝐈 𝐜𝐚𝐥𝐥𝐬 𝐰𝐡𝐢𝐥𝐞 𝐭𝐲𝐩𝐢𝐧𝐠, 𝐬𝐢𝐠𝐧𝐢𝐟𝐢𝐜𝐚𝐧𝐭𝐥𝐲 𝐫𝐞𝐝𝐮𝐜𝐢𝐧𝐠 𝐮𝐧𝐧𝐞𝐜𝐞𝐬𝐬𝐚𝐫𝐲 𝐫𝐞𝐪𝐮𝐞𝐬𝐭𝐬 𝐚𝐧𝐝 𝐢𝐦𝐩𝐫𝐨𝐯𝐢𝐧𝐠 𝐫𝐞𝐬𝐩𝐨𝐧𝐬𝐢𝐯𝐞𝐧𝐞𝐬𝐬.

• 𝐈𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐬 𝐚𝐧 𝐢𝐧-𝐦𝐞𝐦𝐨𝐫𝐲 𝐜𝐚𝐜𝐡𝐢𝐧𝐠 𝐥𝐚𝐲𝐞𝐫 𝐮𝐬𝐢𝐧𝐠 𝐑𝐞𝐝𝐮𝐱 𝐓𝐨𝐨𝐥𝐤𝐢𝐭 𝐭𝐨 𝐬𝐭𝐨𝐫𝐞 𝐩𝐫𝐞𝐯𝐢𝐨𝐮𝐬 𝐬𝐞𝐚𝐫𝐜𝐡 𝐫𝐞𝐬𝐮𝐥𝐭𝐬. 𝐓𝐡𝐢𝐬 𝐫𝐞𝐝𝐮𝐜𝐞𝐬 𝐫𝐞𝐝𝐮𝐧𝐝𝐚𝐧𝐭 𝐀𝐏𝐈 𝐜𝐚𝐥𝐥𝐬 𝐚𝐧𝐝 𝐞𝐧𝐡𝐚𝐧𝐜𝐞𝐬 𝐧𝐞𝐭𝐰𝐨𝐫𝐤 𝐞𝐟𝐟𝐢𝐜𝐢𝐞𝐧𝐜𝐲, 𝐩𝐚𝐫𝐭𝐢𝐜𝐮𝐥𝐚𝐫𝐥𝐲 𝐛𝐞𝐧𝐞𝐟𝐢𝐜𝐢𝐚𝐥 𝐢𝐧 𝐥𝐨𝐰-𝐛𝐚𝐧𝐝𝐰𝐢𝐝𝐭𝐡 𝐞𝐧𝐯𝐢𝐫𝐨𝐧𝐦𝐞𝐧𝐭𝐬 𝐨𝐫 𝐫𝐞𝐩𝐞𝐚𝐭𝐞𝐝 𝐪𝐮𝐞𝐫𝐢𝐞𝐬.

🎥 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐕𝐢𝐝𝐞𝐨 𝐏𝐥𝐚𝐲𝐛𝐚𝐜𝐤 𝐰𝐢𝐭𝐡 𝐑𝐞𝐚𝐜𝐭 𝐑𝐨𝐮𝐭𝐞𝐫

• 𝐄𝐧𝐚𝐛𝐥𝐞𝐬 𝐝𝐲𝐧𝐚𝐦𝐢𝐜 𝐧𝐚𝐯𝐢𝐠𝐚𝐭𝐢𝐨𝐧 𝐮𝐬𝐢𝐧𝐠 𝐫𝐞𝐚𝐜𝐭-𝐫𝐨𝐮𝐭𝐞𝐫-𝐝𝐨𝐦 𝐭𝐨 𝐢𝐧𝐝𝐢𝐯𝐢𝐝𝐮𝐚𝐥 𝐰𝐚𝐭𝐜𝐡 𝐩𝐚𝐠𝐞𝐬 𝐛𝐚𝐬𝐞𝐝 𝐨𝐧 𝐯𝐢𝐝𝐞𝐨 𝐈𝐃𝐬 (𝐞.𝐠., /𝐰𝐚𝐭𝐜𝐡/𝐕𝐈𝐃𝐄𝐎_𝐈𝐃).

• 𝐒𝐞𝐚𝐦𝐥𝐞𝐬𝐬𝐥𝐲 𝐞𝐦𝐛𝐞𝐝𝐬 𝐭𝐡𝐞 𝐬𝐞𝐥𝐞𝐜𝐭𝐞𝐝 𝐯𝐢𝐝𝐞𝐨 𝐯𝐢𝐚 𝐭𝐡𝐞 𝐘𝐨𝐮𝐓𝐮𝐛𝐞 𝐄𝐦𝐛𝐞𝐝 𝐀𝐏𝐈 𝐚𝐧𝐝 𝐝𝐢𝐬𝐩𝐥𝐚𝐲𝐬 𝐚𝐬𝐬𝐨𝐜𝐢𝐚𝐭𝐞𝐝 𝐦𝐞𝐭𝐚𝐝𝐚𝐭𝐚 (𝐭𝐢𝐭𝐥𝐞, 𝐜𝐡𝐚𝐧𝐧𝐞𝐥 𝐢𝐧𝐟𝐨, 𝐞𝐭𝐜.).

• 𝐏𝐫𝐨𝐦𝐨𝐭𝐞𝐬 𝐚 𝐬𝐦𝐨𝐨𝐭𝐡, 𝐬𝐢𝐧𝐠𝐥𝐞-𝐩𝐚𝐠𝐞 𝐚𝐩𝐩𝐥𝐢𝐜𝐚𝐭𝐢𝐨𝐧 𝐞𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞 𝐰𝐢𝐭𝐡𝐨𝐮𝐭 𝐟𝐮𝐥𝐥 𝐩𝐚𝐠𝐞 𝐫𝐞𝐥𝐨𝐚𝐝𝐬.

💬 𝐋𝐢𝐯𝐞 𝐂𝐡𝐚𝐭 𝐰𝐢𝐭𝐡 𝐏𝐨𝐥𝐥𝐢𝐧𝐠

• 𝐒𝐢𝐦𝐮𝐥𝐚𝐭𝐞𝐬 𝐚 𝐥𝐢𝐯𝐞 𝐜𝐡𝐚𝐭 𝐛𝐲 𝐩𝐨𝐥𝐥𝐢𝐧𝐠 𝐦𝐞𝐬𝐬𝐚𝐠𝐞𝐬 𝐞𝐯𝐞𝐫𝐲 𝟐 𝐬𝐞𝐜𝐨𝐧𝐝𝐬.

• 𝐃𝐢𝐬𝐩𝐥𝐚𝐲𝐬 𝐫𝐚𝐧𝐝𝐨𝐦𝐥𝐲 𝐠𝐞𝐧𝐞𝐫𝐚𝐭𝐞𝐝 𝐮𝐬𝐞𝐫𝐧𝐚𝐦𝐞𝐬 𝐚𝐧𝐝 𝐦𝐞𝐬𝐬𝐚𝐠𝐞𝐬.

• 𝐀𝐥𝐥𝐨𝐰𝐬 𝐮𝐬𝐞𝐫𝐬 𝐭𝐨 𝐬𝐮𝐛𝐦𝐢𝐭 𝐭𝐡𝐞𝐢𝐫 𝐨𝐰𝐧 𝐜𝐡𝐚𝐭 𝐦𝐞𝐬𝐬𝐚𝐠𝐞𝐬 𝐮𝐬𝐢𝐧𝐠 𝐚𝐧 𝐢𝐧𝐩𝐮𝐭 𝐟𝐨𝐫𝐦.

🗨️ 𝐍𝐞𝐬𝐭𝐞𝐝 𝐂𝐨𝐦𝐦𝐞𝐧𝐭 𝐒𝐲𝐬𝐭𝐞𝐦

• 𝐑𝐞𝐧𝐝𝐞𝐫𝐬 𝐧𝐞𝐬𝐭𝐞𝐝 𝐜𝐨𝐦𝐦𝐞𝐧𝐭𝐬 𝐬𝐢𝐦𝐢𝐥𝐚𝐫 𝐭𝐨 𝐘𝐨𝐮𝐓𝐮𝐛𝐞'𝐬 𝐨𝐫𝐢𝐠𝐢𝐧𝐚𝐥 𝐔𝐈.

• 𝐒𝐮𝐩𝐩𝐨𝐫𝐭𝐬 𝐫𝐞𝐩𝐥𝐢𝐞𝐬 𝐚𝐧𝐝 𝐡𝐢𝐞𝐫𝐚𝐫𝐜𝐡𝐢𝐜𝐚𝐥 𝐭𝐡𝐫𝐞𝐚𝐝𝐢𝐧𝐠 𝐨𝐟 𝐜𝐨𝐦𝐦𝐞𝐧𝐭 𝐝𝐢𝐬𝐜𝐮𝐬𝐬𝐢𝐨𝐧𝐬.

📸 Screenshots

Home Page

Watch Page

Search Suggestions

Live Chat