Skip to main content

​
Overview

The Nadie Sabe Nada podcast application uses environment variables to configure external API integrations. All environment variables follow the React convention and are prefixed with REACT_APP_.
Environment variables in Create React App must be prefixed with REACT_APP_ to be accessible in the application.

​
Required Variables

The application requires the following environment variables for full functionality:
​
REACT_APP_YT_API_KEY
string
required
YouTube Data API v3 key used to search for podcast videos on YouTube.Usage Location:
  • src/components/PodcastDetail/PodcastDetail.jsx:43
  • src/components/LastPodcast/LastPodcast.jsx:41
How to obtain:
  1. Go to 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. Copy the generated API key
​
REACT_APP_CHANNEL_ID
string
required
The YouTube channel ID for the Nadie Sabe Nada podcast channel. This is used to filter YouTube search results to only show videos from the official channel.Usage Location:
  • src/components/PodcastDetail/PodcastDetail.jsx:44
  • src/components/LastPodcast/LastPodcast.jsx:42
How to find:
  1. Go to the Nadie Sabe Nada YouTube channel
  2. The channel ID is in the URL or can be found in the channel’s About page
  3. It typically starts with UC followed by alphanumeric characters

​
Setting Environment Variables

​
Development

Create a .env file in the root directory of your project: 
# YouTube API Configuration
REACT_APP_YT_API_KEY=your_youtube_api_key_here
REACT_APP_CHANNEL_ID=UCxxxxxxxxxxxxxxxxxx
Never commit your .env file to version control. The .gitignore file is already configured to exclude .env files.

​
Production

For production deployments, set environment variables through your hosting platform:
  1. Go to your project settings
  2. Navigate to “Environment Variables”
  3. Add REACT_APP_YT_API_KEY and REACT_APP_CHANNEL_ID
  4. Redeploy your application

​
How Environment Variables are Used

The application uses these environment variables to fetch YouTube videos for each podcast episode:
PodcastDetail.jsx
const YT_API_KEY = process.env.REACT_APP_YT_API_KEY;
const CHANNEL_ID = process.env.REACT_APP_CHANNEL_ID;

const fetchYoutubeVideo = async () => {
    if (foundPodcast) {
        try {
            const response = await fetch(
                `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${encodeURIComponent(
                    foundPodcast.title
                )}&key=${YT_API_KEY}&channelId=${CHANNEL_ID}&type=video&maxResults=1`
            );
            const data = await response.json();
            if (data.items && data.items.length > 0) {
                setYoutubeVideoId(data.items[0].id.videoId);
            }
        } catch (error) {
            console.error("Error fetching YouTube video:", error);
        }
    }
};

​
Default Values

There are no default values for environment variables. If these variables are not set, the YouTube video integration will not function, but the audio player will continue to work.

​
Troubleshooting

​
Variables Not Loading

  1. Ensure the .env file is in the root directory (same level as package.json)
  2. Restart the development server after adding/changing environment variables
  3. Verify the REACT_APP_ prefix is included
  4. Check for typos in variable names

​
YouTube API Errors

  • 403 Forbidden: Your API key may be invalid or the YouTube Data API is not enabled
  • Quota Exceeded: You’ve reached your daily API quota limit
  • Invalid Channel ID: Verify the channel ID is correct

​
Security Best Practices

Important Security Notes:
  • Never commit API keys to version control
  • Rotate API keys regularly
  • Set up API key restrictions in Google Cloud Console
  • Use different API keys for development and production
  • Monitor API usage in Google Cloud Console

​
API Key Restrictions

Restrict your YouTube API key in Google Cloud Console:
  1. Application restrictions: Set to “HTTP referrers”
  2. Add your domain: https://yourdomain.com/*
  3. API restrictions: Limit to YouTube Data API v3 only

​
Complete Example

Here’s a complete example .env file with explanations:
.env
# ==========================================
# YouTube API Integration
# ==========================================
# Get your API key from: https://console.cloud.google.com/
# Documentation: https://developers.google.com/youtube/v3/getting-started
REACT_APP_YT_API_KEY=AIzaSyAbc123def456ghi789jkl012mno345pqr

# Nadie Sabe Nada YouTube Channel ID
# Find it in the channel URL or About page
REACT_APP_CHANNEL_ID=UC1234567890abcdefghij

Build docs developers (and LLMs) love

Get started for freeTalk to us