🎬 Streamify

A Modern YouTube-Inspired Video Streaming Platform

Built with React.js, Vite, and the YouTube Data API v3

A responsive YouTube clone that lets users discover trending videos, search content, watch videos, and explore channels through the YouTube Data API v3.

🌐 Live Demo

https://your-vercel-app.vercel.app

📂 Repository

https://github.com/pragatipandey25/Streamify

📸 Preview

Add screenshots after deployment.

Home	Video Player

✨ Features

🎥 Browse trending YouTube videos
🔍 Search videos instantly
📺 Embedded YouTube video player
📂 Browse videos by category
👤 View channel information
👍 Display views, likes, and publish date
📱 Fully responsive UI
⚡ Fast loading with Vite
🎨 Modern Streamify branding
🧭 Dynamic routing with React Router
📡 Fetches live data using the YouTube Data API v3

🛠 Tech Stack

Frontend

React.js
Vite
React Router DOM
CSS3

API

YouTube Data API v3

Tools

Git
GitHub
VS Code
Vercel

📂 Project Structure

Streamify/
│
├── public/
│
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Feed/
│   │   ├── Navbar/
│   │   ├── PlayVideo/
│   │   ├── Recommended/
│   │   └── Sidebar/
│   │
│   ├── pages/
│   │   ├── Home/
│   │   ├── Search/
│   │   └── Video/
│   │
│   ├── App.jsx
│   ├── data.js
│   ├── main.jsx
│   └── index.css
│
├── .env
├── package.json
├── vite.config.js
├── vercel.json
└── README.md

🚀 Getting Started

Clone the repository

git clone https://github.com/pragatipandey25/Streamify.git

Navigate to the project

cd Streamify

Install dependencies

npm install

Create a `.env` file

VITE_API_KEY=YOUR_YOUTUBE_API_KEY

Run the development server

npm run dev

Visit:

http://localhost:5173

🔑 YouTube API Setup

Open Google Cloud Console.
Create a project.
Enable YouTube Data API v3.
Create an API key.
Add the key to your .env file.

VITE_API_KEY=YOUR_API_KEY

📜 Available Scripts

Start Development Server

npm run dev

Build Production

npm run build

Preview Production Build

npm run preview

📱 Responsive Design

Optimized for:

💻 Desktop
💼 Laptop
📱 Tablet
📲 Mobile

🎯 Core Functionalities

Home Page

Trending videos
Category sidebar
Responsive grid layout

Search

Search YouTube videos
Dynamic search results
Responsive interface

Video Player

Embedded player
Channel information
Like count
View count
Publish date
Recommended videos

🌟 Upcoming Features

🔐 Firebase Authentication
🌙 Dark Mode
❤️ Watch Later
📂 Playlists
🔔 Notifications
💬 Comments
🎙 Voice Search
📈 Infinite Scroll
👤 User Profiles

🚀 Deployment

This project is deployed using Vercel.

To deploy:

npm run build

Import the repository into Vercel and add:

VITE_API_KEY=YOUR_YOUTUBE_API_KEY

as an environment variable.

🤝 Contributing

Contributions are welcome.

git checkout -b feature/new-feature
git commit -m "Add new feature"
git push origin feature/new-feature

Then open a Pull Request.

📄 License

This project is licensed under the MIT License.

👩‍💻 Author

Pragati Pandey

GitHub: https://github.com/pragatipandey25
Repository: https://github.com/pragatipandey25/Streamify

⭐ If you found this project useful, consider giving it a star!

Made with ❤️ using React, Vite, and the YouTube Data API

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation