https://github.com/mrinmay7875/yt_channel_information

This web application fetches different stats related to a YouTube channel.
https://github.com/mrinmay7875/yt_channel_information

beginner-friendly jsx projects react reactjs youtube youtube-api youtube-search

Last synced: 25 days ago
JSON representation

This web application fetches different stats related to a YouTube channel.

• Host: GitHub
• URL: https://github.com/mrinmay7875/yt_channel_information
• Owner: mrinmay7875
• License: mit
• Created: 2020-12-04T18:58:42.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-23T15:35:12.000Z (over 2 years ago)
• Last Synced: 2024-10-11T20:02:46.122Z (25 days ago)
• Topics: beginner-friendly, jsx, projects, react, reactjs, youtube, youtube-api, youtube-search
• Language: JavaScript
• Homepage: https://youtube-channel-info-1014680.netlify.app/
• Size: 259 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
[![Netlify Status](https://api.netlify.com/api/v1/badges/aa645380-5df1-4e63-83e6-83d1b68dfe74/deploy-status)](https://app.netlify.com/sites/youtube-channel-info-1014680/deploys)

# Youtube Channel Statistics

This web application will present you with a variety

 of YouTube channel statistics. It pulls data from

  the YouTube API and displays it on the screen.

## Tech Stack

**Client:**  HTML, CSS, Javascript, React, Material UI

**Server:** YouTube API, Netlify functions

  

## Live Demo

 The project is live [here.](https://youtube-channel-info-1014680.netlify.app/)

  

## Environment Variables

To run this project, you will need to add the following environment variables to your .env file

`REACT_APP_API_KEY`

This is a YouTube API key. You can signup for an YouTube API key

[here.](https://developers.google.com/youtube/documentation?authuser=1)

  

  

## Features

- Fullscreen mode

- Mobile responsive

  

## Lessons Learned

- Fetch data from external API and show in screen.

- Deploying API Endpoints in Netlify Functions.

   

  

## Improvement

The API endpoint was deployed in Netlify function. Since the

 API key is 

 stored in the backend, it is 

not visible in the frontend when sending a request to the API.