YOUTUBE_LITE

YOUTUBE_LITE is a powerful and user-friendly web application that emulates some of the key features and functionalities of the popular video-sharing platform, Youtube . It includes basic features like video search , video playback and displaying a myriad of videos sorted by different categories.This project was implemented using various technologies / Libraries like React , Material-UI and Youtube-V3 API.

Table of Contents

• Features
• TechStack
• Screens
• Video_Demo
• Run_Locally
• Authors
• License

Features

• User friendly interface for better user experience.
• Accessible through all kinds of devices (Tablets , desktop , phones etc).
• Enables users to search for specefic videos based on keywords, tags etc.
• Allows users to watch videos including features like play, pause and seek.
• Video playback page displays the video details including a set of related videos to watch
• Channel pages come with channel details and also a set of videos uploaded by them for the users to watch.
• Homepage sorts the videos in different categories including recommended videos , comedy , tutorials etc.

TechStack

Client: React, Material-UI

Third Party Services: Youtube-v3 API , Vite.js , Rapid API

Screens

Homepage

Videos (by specefic category)

Channel Details Page

Video Playback Page

Search results page

Video_Demo

Video walkthrough on how to navigate and explore various features of this web app

chrome_7hkU4vKMtf.mp4

Run_Locally

Clone the project

  $ git clone https://github.com/Khateebxtreme/Youtube_Lite

Go to the project directory

  cd Youtube_Lite

Install dependencies

  npm install

Start the server

  npm run dev

Create a config.js file in utils folder to hold your Rapid API key which will be used to fetch the videos using Youtube-V3 API. ( Credits to @TeleViaBox for pointing this out to me )

Authors

• @Khateebxtreme

Notes

• Hosting Services : netlify
• Youtube-V3 API DRL : 500
• Max Results : 50 videos per API call ( Hard Limit )

License

MIT