A test project light weight youtube viewer using Youtube API, React, Redux, Typescript

Overview

This is a test project light weight youtube viewer using Youtube API, React, Redux, Typescript

App ScreenShot

Technologies

Project is created with:

  • React: 18.1.0
  • Reactstrap: 9.0.3
  • Redux: 4.1.2
  • Redux-Thunk: 2.4.1
  • Axios: 0.27.2
  • Typescript: 4.7.3

Prerequisites

  1. Add your own personal youtube API Key in constants/defaultValues.ts const API_KEY = "ADD_API_KEY_HERE"; you can generate one from the Google Developer Console

Setup

To run this project, install it locally using yarn:

$ yarn install $ yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser. if localhost is not working because of the https redirect try Open http://127.0.0.1:3000

The page will reload if you make edits.
You will also see any errors in the console.

Features

  • Search your favorite video from youtube
  • Play selected video
  • List of search videos
  • Preview the comments for each selected video
  • Load next page comments for selected video

Suggestions

  • Update Redux to Redux ToolKit
  • Update Typescript for Redux ToolKit
  • Install React Router and Separate the Videos List from Selected Video to Another Page
  • Make Autocomplete Search
You might also like...
Example using Cypress to test Create-React-App site running with custom certificate for domain
Example using Cypress to test Create-React-App site running with custom certificate for domain "my-secure-site"

cypress-local-https Example using Cypress to test Create-React-App site running with custom certificate for domain "my-secure-site" Read the blog post

Light Christian Library App - Built with React, JavaScript, Material UI, Node.js and MySQL

A unique search bar that filters through data. Built with React, JavaScript, Material UI, Node.js and MySQL

🎬 qLive - Google docs for light and sound production teams

A web app that allows my clients to create edit and annotate cues lists in real-time and then use those cue lists to control a range of hardware and software (Lightning console, sound board). With a user account and permission system like google docs

flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

Food Order App Redux - a ReactJS, Redux, Typescript and Sass project
Food Order App Redux - a ReactJS, Redux, Typescript and Sass project

This is a ReactJS, Redux, Typescript and Sass project. This simulates a food ordering app, with cart items control for a basic e-commerce shop.

Typing test website build with React
Typing test website build with React

Typing test website build with React

Just made this repo to test firebase with my react app.

Firebase Setup Deployment Status Just created this repo because I tend to forget the steps to add firebase to my projects. Steps Go to Firebase home p

 A Create React App to Test @chakra-ui/storybook-addon
A Create React App to Test @chakra-ui/storybook-addon

A Create React App to Test @chakra-ui/storybook-addon This project was bootstrapped with Create React App. Steps to reproduce yarn (Install dependenci

Memory-test-game - Memory Testing Game Built With React

Memmory Testing Game This game is currently live and hosted on verce , play it h

Owner
Aris Karagiannis
Aris Karagiannis
React-doc-viewer: File viewer for React

React-doc-viewer: File viewer for React

Damian Cyntler 63 Jan 2, 2023
Twitch-chat-viewer: A desktop application built with React + typescript and Electron JS

A desktop application built with React + typescript and Electron JS to check your Twitch without having to use the searcher and being in top of all windows.

guillerp 3 Apr 27, 2022
CalFit tracks your weight and calculates a recommended daily calorie intake.

CalFit tracks your weight and calculates a recommended daily calorie intake. It also has a well-designed food diary and an exercise log.

null 1 Dec 21, 2021
A Pokemon cards website. There are 400+ pokemon sprites with their name, moves height, weight and picture

Hi ?? , I'm Rayan Hossain A passionate Full Stack developer with expertise in WordPress ?? I’m currently working on codes_tips ?? I regularly write ar

Rayan Hossain 2 Oct 5, 2022
A web viewer for Anime Girls Holding Programming Books made using React, Chakra UI and Vite.

A web viewer for Anime Girls Holding Programming Books made using React, Chakra UI and Vite.

ashish 67 Jan 1, 2023
This project was developed as a technical test for a Frontend JR Landing Page with dynamic data via .json

Healthy Foods ?? ?? Informações sobre o projeto Esse projeto foi desenvolvido como teste técnico para uma vaga Frontend JR Landing Page com dados dinâ

Victor H Correa 1 Jul 21, 2022
React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

null 2 Jul 14, 2022
☁️ Application using Redux, Redux-Saga, react-redux-toastr, React-Select, Immer, styled-components, customize-cra, react-app-rewired and consuming the features of the Node.js - SaaS API

☁️ Application using Redux, Redux-Saga, react-redux-toastr, React-Select, Immer, styled-components, customize-cra, react-app-rewired and consuming the features of the Node.js - SaaS API

null 3 Aug 19, 2022
Full React && Redux project builded as a group project where user can reserved rockets and missions from SpaceX API

Full React && Redux project builded as a group project where user can reserved rockets and missions from SpaceX API. This data will be updated and displayed in the profile section of the page

Nicolas Gonzalez 8 Mar 23, 2022
React Test Shop Using Remix

React Test Shop Using Remix Development Build React Test Shop makes API calls to an external server. First set up this server by cloning the React Tes

Naresh Bhatia 24 Dec 25, 2022