Build a React.js Youtube Data API V3 Video Search Using react-bootstrap in Browser

App.jsx

import React, { useState } from 'react';
import { Container, Form, Button, Row, Col, Card } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [videoData, setVideoData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  // API Key from Google Developer Console
  const API_KEY = '####yourapikey####';
  
  // Function to handle search
  const handleSearch = async () => {
    if (!searchQuery) return;

    setLoading(true);
    setError('');
    setVideoData([]);

    try {
      const response = await fetch(
        `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${searchQuery}&key=${API_KEY}&type=video`
      );
      const data = await response.json();
      setVideoData(data.items);
    } catch (error) {
      setError('An error occurred while fetching data');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Container className="my-4">
      <h1 className="text-center">YouTube Video Search</h1>

      <Row className="my-3">
        <Col>
          <Form.Control
            type="text"
            placeholder="Search for videos"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </Col>
        <Col>
          <Button variant="primary" onClick={handleSearch} disabled={loading}>
            {loading ? 'Searching...' : 'Search'}
          </Button>
        </Col>
      </Row>

      {error && <div className="alert alert-danger">{error}</div>}

      {/* Display Search Results */}
      <Row>
        {videoData.map((video) => (
          <Col key={video.id.videoId} md={4} className="mb-4">
            <Card>
              <Card.Img
                variant="top"
                src={video.snippet.thumbnails.medium.url}
                alt={video.snippet.title}
              />
              <Card.Body>
                <Card.Title>{video.snippet.title}</Card.Title>
                <Card.Text>{video.snippet.description}</Card.Text>
                <Button
                  variant="primary"
                  href={`https://www.youtube.com/watch?v=${video.id.videoId}`}
                  target="_blank"
                >
                  Watch Video
                </Button>
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row>
    </Container>
  );
};

export default App;

import React, { useState } from 'react';

import { Container, Form, Button, Row, Col, Card } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

const [searchQuery, setSearchQuery] = useState('');

const [videoData, setVideoData] = useState([]);

const [loading, setLoading] = useState(false);

const [error, setError] = useState('');

// API Key from Google Developer Console

const API_KEY = '####yourapikey####';

// Function to handle search

const handleSearch = async () => {

if (!searchQuery) return;

setLoading(true);

setError('');

setVideoData([]);

try {

const response = await fetch(

`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${searchQuery}&key=${API_KEY}&type=video`

);

const data = await response.json();

setVideoData(data.items);

} catch (error) {

setError('An error occurred while fetching data');

} finally {

setLoading(false);

}

};

return (

<h1 className="text-center">YouTube Video Search</h1>

<Col>

<Form.Control

type="text"

placeholder="Search for videos"

value={searchQuery}

onChange={(e) => setSearchQuery(e.target.value)}

</Col>

<Col>

{loading ? 'Searching...' : 'Search'}

</Button>

</Col>

</Row>

{error && <div className="alert alert-danger">{error}</div>}

{/* Display Search Results */}

<Row>

{videoData.map((video) => (

<Card>

<Card.Img

variant="top"

src={video.snippet.thumbnails.medium.url}

alt={video.snippet.title}

<Card.Body>

<Card.Title>{video.snippet.title}</Card.Title>

<Card.Text>{video.snippet.description}</Card.Text>

<Button

variant="primary"

href={`https://www.youtube.com/watch?v=${video.id.videoId}`}

target="_blank"

Watch Video

</Button>

</Card.Body>

</Card>

</Col>

))}

</Row>

</Container>

);

};

export default App;

Build a React.js Youtube Data API V3 Video Search Using react-bootstrap in Browser

Comments

Leave a Reply Cancel reply

Archives