KidsVids - Safe YouTube Client for Children

A secure YouTube client designed specifically for children that only shows videos from a pre-approved whitelist of channels and automatically filters out YouTube Shorts and inappropriate content.

Features

• Channel Whitelist: Only shows videos from administrator-approved channels stored in Supabase
• Shorts Filtering: Automatically excludes YouTube Shorts (videos < 60 seconds) and content marked with #shorts
• Safe Search: Uses YouTube's strict safe search filtering
• Kid-Friendly UI: Colorful, engaging interface designed for children
• Admin Panel: Password-protected interface for managing channel whitelist
• Smart Caching: Reduces API quota usage with intelligent caching
• Search Functionality: Search within whitelisted channels only
• Responsive Design: Works great on all devices
• Privacy Focused: No external tracking or analytics

Tech Stack

• Frontend: React 18 + Vite + TypeScript + Tailwind CSS
• Backend: Netlify Functions (serverless)
• Database: Supabase (PostgreSQL)
• Video API: YouTube Data API v3
• Deployment: Netlify
• Styling: Tailwind CSS with custom kid-friendly design

Setup Instructions

1. Set up Supabase

1. Create a new project at supabase.com
2. Go to Settings > API to get your project URL and keys
3. Run the migration to create the channels table:
   • Go to SQL Editor in your Supabase dashboard
   • Copy and paste the contents of supabase/migrations/create_channels_table.sql
   • Run the query

2. Get YouTube API Key

1. Visit the Google Cloud Console
2. Create a new project or select an existing one
3. Enable the YouTube Data API v3
4. Create credentials (API key)
5. Restrict the API key to YouTube Data API v3 for security

3. Environment Variables

Create a .env.local file in the root directory:

# Supabase Configuration
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# YouTube Data API v3 Key
YOUTUBE_API_KEY=your_youtube_api_key_here

# Admin password for managing channels (change this!)
ADMIN_PASSWORD=your_secure_admin_password

4. Install Dependencies

npm install

5. Run Development Server

npm run dev

The application will be available at http://localhost:3000

For local development with Netlify Functions:

npm run netlify:dev

6. Set Up Initial Channels

1. Visit http://localhost:3000/admin
2. Enter your admin password
3. Add YouTube channel URLs or IDs to the whitelist

Supported channel formats:

• https://www.youtube.com/@channelname
• https://www.youtube.com/c/channelname
• https://www.youtube.com/user/username
• https://www.youtube.com/channel/UC... (direct channel ID)
• Direct channel ID: UC...

Deployment

Netlify Deployment

1. Connect Repository: Connect your Git repository to Netlify

2. Build Settings:

   Build command: npm run build
   Publish directory: dist
   Functions directory: netlify/functions
   

3. Environment Variables (in Netlify dashboard):

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
   SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
   YOUTUBE_API_KEY=your_api_key
   ADMIN_PASSWORD=your_secure_password
   

4. Deploy: Push to your connected Git repository

Usage Guide

For Parents/Administrators

1. Access Admin Panel: Visit /admin and enter your password
2. Add Safe Channels: Add YouTube channels you trust for your children
3. Monitor Content: The system automatically filters videos to ensure only content from approved channels appears
4. Remove Channels: Remove channels from the whitelist at any time

For Children

1. Browse Videos: See a grid of safe, approved videos from trusted channels
2. Search: Search for specific topics within the approved channels only
3. Watch Videos: Click any video to watch in a safe, embedded player
4. Easy Navigation: Simple, colorful interface designed for young users

Safety Features

• Channel Whitelist: Only videos from pre-approved channels are shown
• Shorts Filter: Automatically excludes YouTube Shorts and short-form content
• Safe Search: Uses YouTube's strictest content filtering
• No Comments: Children cannot access YouTube comments
• Controlled Environment: All content is pre-filtered by parents/administrators
• No Tracking: No external analytics or tracking systems

API Endpoints (Netlify Functions)

• GET /.netlify/functions/get-videos - Fetch latest videos from whitelisted channels
• GET /.netlify/functions/search-videos?q=query - Search within whitelisted channels
• POST /.netlify/functions/admin-login - Admin authentication
• GET /.netlify/functions/verify-admin - Verify admin session
• POST /.netlify/functions/admin-logout - Admin logout
• GET /.netlify/functions/get-channels - Get channel whitelist (admin only)
• POST /.netlify/functions/add-channel - Add channel to whitelist (admin only)
• POST /.netlify/functions/remove-channel - Remove channel from whitelist (admin only)

Database Schema

Channels Table

CREATE TABLE channels (
  id text PRIMARY KEY,              -- YouTube channel ID
  title text NOT NULL,              -- Channel name
  thumbnail text NOT NULL,          -- Channel thumbnail URL
  subscriber_count text,            -- Formatted subscriber count
  created_at timestamptz DEFAULT now()
);

File Structure

├── src/
│   ├── components/         # React components
│   ├── pages/             # Page components
│   ├── lib/               # Utilities and Supabase client
│   ├── App.tsx            # Main app component
│   └── main.tsx           # App entry point
├── netlify/
│   └── functions/         # Serverless functions
├── supabase/
│   └── migrations/        # Database migrations
├── public/                # Static assets
└── dist/                  # Build output

Configuration Options

Filtering Settings

const MAX_RESULTS_PER_CHANNEL = 10; // Videos per channel in functions

Admin Password

Change the default admin password in your environment variables:

ADMIN_PASSWORD=your_very_secure_password

Troubleshooting

Common Issues

1. "Failed to fetch videos" error:

   • Check if your YouTube API key is valid
   • Ensure you have quota remaining on your API key
   • Verify the API key has YouTube Data API v3 enabled

2. No videos appearing:

   • Make sure you've added channels to the whitelist via admin panel
   • Check that the channels have recent videos
   • Verify the channels exist and are public

3. Admin login not working:

   • Check your ADMIN_PASSWORD environment variable
   • Clear browser cookies and try again

4. Supabase connection issues:

   • Verify your Supabase URL and keys are correct
   • Check that the channels table exists in your database
   • Ensure RLS policies are properly configured

API Quotas

YouTube Data API v3 has daily quota limits:

• Default quota: 10,000 units/day
• Each video search: ~100 units
• Each channel info request: ~1 unit

Security Considerations

• Always use environment variables for sensitive data
• Change the default admin password
• Regularly review the channel whitelist
• Monitor API usage to prevent quota exhaustion
• Supabase RLS policies protect data access

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is designed for family use and educational purposes. Please ensure compliance with YouTube's Terms of Service when deploying.

---

Important: This application is designed to create a safer YouTube experience for children, but parental supervision is still recommended. Always review channels before adding them to the whitelist.