React JS Youtube Clone EducationTools

Firstly install npm packages to use :

npm i react-bootstrap node-sass react-icons bootstrap react-router-dom firebase redux react-redux redux-thunk redux-devtools-extension axios numeral moment react-infinite-scroll-component react-loading-skeleton react-lazy-load-image-component react-show-more-text

Almost every new component use this short cut (vs.code):

rafce

Apps features :

Array Mapping :{ […Array(20)].map( ()=> ( <Comment />))}

• Scss,
• list-map,
• sidebar-open:click,
• Responsivity,
• useState,
• useEffect,
• Router-Switch(with child prop.)
• Layoutizing Pages,
• Firebase Youtube API,
• Redux,
• Google Login with redux library(Firebase& console.developers & developers.google),
• Fetch props of youtube videos,
• Google API Services,
• Lazy load with spinner,
• Fetch categorizing videos,
• skeleton image lazy load,
• show more text property on comments
• display comments and post new comment as user
• Continuous Integration with Firebase & Github https://yt-clone-11a2e.web.app/
• Continuous Integration workflow :

Firebase process :

• npm i -g-firebase-tools,
• firebase login:ci (you will get an token, copy token, go to github yt repo, click settings -> environments ->new repo secret ->set credentials name: FIREBASE_TOKEN and token : 1….232….ljk, go to terminal in your root project-> write firebase init firebase login — answers : build, no yes, yes, yes, npm run build, yes, main, git add ., git commit -m “CLI READY”, git push, now go to github repo and click actions and watch process and enjoy :) )

Github Link :

bartukocakara/youtube-clone-react-js

Source :

https://www.youtube.com/watch?v=Mos5QJAje28&list=LL&index=2&t=7276s&ab_channel=BackbenchCoder