YouTube Video Content Generator Tool

A professional, multi-user web application that leverages Firebase, React (with Vite), YouTube API, and AI models (OpenAI GPT-4o and GPT-4o-mini) to generate video content ideas, scripts, and SEO metadata based on competitor channel analysis.

Features

✅ User Authentication: Email/Password and Google Sign-In support
✅ Channel Analysis: Upload YouTube Channel IDs and analyze competitor channels
✅ AI-Powered Title Generation: Generate 5 unique, SEO-optimized video titles
✅ Script Generation: Create complete video scripts based on competitor content
✅ Metadata Generation: Get SEO-optimized descriptions, tags, hashtags, and keywords
✅ Modern UI/UX: Beautiful black and white design with smooth animations
✅ Responsive Design: Works seamlessly on desktop and mobile devices
✅ Export Functionality: Export metadata in JSON, TXT, and CSV formats

Tech Stack

Frontend: React 18+ with Vite
Backend/Database: Firebase (Authentication, Firestore, Cloud Storage)
APIs: YouTube Data API v3, OpenAI API (GPT-4o and GPT-4o-mini)
UI/UX: Custom CSS with black and white theme
Libraries: React Router, PapaParse, Fuse.js, Axios

Getting Started

Prerequisites

Node.js (v16 or higher)
npm or yarn
Firebase account
Google Cloud account (for YouTube API)
OpenAI account (for GPT-4o and GPT-4o-mini API access)

Installation

Clone the repository:

git clone https://github.com/Wajeeh001/Youtube-workflow.git
cd Youtube-workflow

Install dependencies:

npm install

Set up environment variables:
- Copy .env.example to .env
- Fill in your API keys and Firebase configuration:

# Firebase Configuration
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id

# YouTube Data API v3
VITE_YOUTUBE_API_KEY=your_youtube_api_key

# OpenAI API
VITE_OPENAI_API_KEY=your_openai_api_key

Firebase Setup

Create a new Firebase project at Firebase Console
Enable Authentication:
- Go to Authentication > Sign-in method
- Enable Email/Password and Google
Enable Firestore Database:
- Create a new Firestore database
- Start in production mode
- Set security rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId}/{document=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

Get your Firebase configuration and add to .env

API Setup

YouTube Data API v3:
- Go to Google Cloud Console
- Create a new project or select existing
- Enable YouTube Data API v3
- Create API credentials (API Key)
- Add the API key to .env
OpenAI API:
- Go to OpenAI Platform
- Create an account or sign in
- Navigate to API Keys section
- Create a new API key
- Add the API key to .env
- Note: This application uses GPT-4o for content generation and GPT-4o-mini for translation tasks

Running the Application

Development mode:

npm run dev

Build for production:

npm run build

Preview production build:

npm run preview

Project Structure

src/
├── components/
│   ├── Auth/              # Login, Signup, ProtectedRoute
│   ├── Dashboard/         # Dashboard component
│   ├── Upload/            # File upload component
│   ├── Analysis/          # Analysis loading component
│   ├── Generation/        # Title, Script, Metadata generation
│   └── Common/            # Shared components (Header, Loading, Toast, etc.)
├── services/
│   ├── youtubeService.js  # YouTube API integration
│   └── openaiService.js   # OpenAI API integration
├── context/
│   ├── AuthContext.jsx    # Authentication state
│   └── AppContext.jsx     # Application state
├── config/
│   └── firebase.js        # Firebase configuration
└── styles/
    └── index.css          # Global styles

Usage

1. Sign Up/Login

Create an account with email/password or sign in with Google
Your session persists across page refreshes

2. Upload Channel Data

Upload a CSV or TXT file with YouTube Channel IDs
File format examples:

CSV Format:

UCxyzABC123...
UCdefGHI456...
UCjklMNO789...

TXT Format:

UCxyzABC123...
UCdefGHI456...
UCjklMNO789...

3. Channel Analysis

System automatically analyzes all uploaded channels
Fetches channel details, top 50 videos, tags, and keywords
Generates AI-powered insights using OpenAI GPT-4o
Results are cached for 24 hours

4. Generate Titles

Click "Generate Titles" to get 5 unique video title suggestions
Select your preferred title
Titles are SEO-optimized based on competitor analysis

5. Select Video Length

Choose target video duration (5-60 minutes)
Estimated word count is displayed

6. Generate Script

AI generates a complete video script
Uses fuzzy matching to find similar competitor videos
Script can be edited and copied
Shows word count and reading time

7. Generate Metadata

Automatically generates:
- Video description (200-300 words)
- 15-20 relevant tags
- 5-10 trending hashtags
- 10-15 keywords
- 10 related SEO-optimized titles
- 10 related SEO search queries
- Timestamps
Export in JSON, TXT, or CSV format
Copy individual items or entire sections

Features in Detail

Authentication

Email/Password authentication
Google Sign-In integration
Session persistence
Protected routes

File Upload

Drag-and-drop support
CSV and TXT file parsing
YouTube Channel ID validation
File preview before submission
Error handling

Analysis

Fetches channel metadata
Analyzes top 50 videos per channel
Extracts tags and keywords
Identifies trends and patterns
AI-powered insights with OpenAI GPT-4o
24-hour caching

Content Generation

SEO-optimized title suggestions
Fuzzy video matching with Fuse.js
AI script generation/rewriting
Customizable video length
Script editing capabilities
Comprehensive metadata generation

Export Options

JSON format (structured data)
TXT format (readable text)
CSV format (spreadsheet compatible)
Copy to clipboard functionality

Development Status

✅ Completed Features

Phase 1: Project Setup & Authentication

✅ Vite React project initialization
✅ Firebase configuration
✅ Authentication context
✅ Login/Signup components
✅ Protected routes
✅ Session management
✅ Google Sign-In

Phase 2: File Upload & Data Storage

✅ Drag-drop file upload
✅ CSV/TXT parsing with PapaParse
✅ Channel ID validation
✅ Firestore data storage
✅ File preview
✅ Error handling

Phase 3: YouTube API Integration

✅ YouTube service structure
✅ Channel details fetching
✅ Top videos fetching
✅ Data aggregation
✅ Analysis caching
✅ OpenAI API integration
✅ Progress tracking

Phase 4: Title & Script Generation

✅ Title generation with AI
✅ Title selection interface
✅ Video length selection
✅ Fuse.js video matching
✅ Script generation
✅ Script editing
✅ Word count & reading time

Phase 5: Metadata Generation

✅ Description generation
✅ Tags generation
✅ Hashtags generation
✅ Keywords generation
✅ Related titles generation
✅ SEO searches generation
✅ Timestamps generation
✅ Export functionality (JSON, TXT, CSV)
✅ Copy to clipboard

🔄 Future Enhancements

Projects history view
User profile management
Sharing functionality
Advanced analytics dashboard
Batch processing
Video transcript extraction (requires additional API)
Multi-language support

Security

API keys stored in environment variables
Firebase security rules protect user data
All inputs validated
HTTPS required for production
Rate limiting for API calls

Performance

Lazy loading for components
24-hour analysis caching
Optimized re-renders
Progress indicators for long operations
Responsive design

Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Support

For issues or questions, please open an issue in the GitHub repository.

Acknowledgments

React and Vite teams
Firebase team
OpenAI (GPT-4o and GPT-4o-mini)
YouTube Data API
All open-source libraries used in this project

Name		Name	Last commit message	Last commit date
Latest commit History 137 Commits
docs		docs
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
README.md		README.md
askdj.txt		askdj.txt
demo.txt		demo.txt
eslint.config.js		eslint.config.js
firebase.json		firebase.json
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

YouTube Video Content Generator Tool

Features

Tech Stack

Getting Started

Prerequisites

Installation

Firebase Setup

API Setup

Running the Application

Project Structure

Usage

1. Sign Up/Login

2. Upload Channel Data

3. Channel Analysis

4. Generate Titles

5. Select Video Length

6. Generate Script

7. Generate Metadata

Features in Detail

Authentication

File Upload

Analysis

Content Generation

Export Options

Development Status

✅ Completed Features

🔄 Future Enhancements

Security

Performance

Browser Support

Contributing

License

Support

Acknowledgments

About

Resources

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages