This is a front-end clone of the YouTube app built using React.
The header has a sidebar for navigation, a search bar to search videos and a user icon. The search bar has been built using the concept of debouncing.
Home page fetches the most popular videos from the YouTube data API and renders them.
Clicking on the thumbnail of a video on the watch page takes you to the Watch Container. This page has the video fetched from Youtube, a simple UI of the comments section along with cascaded replies built with recursion and a running live chat window.
What I learned:
- To use React router
- To style using Tailwind CSS
- To render components with Recursion
- To use YouTube's data APIs
- To write JSX code
- To use Props in components
- About Conditional Rendering
- To use Redux store to create slices to store data
- To use hooks like useState, useEffect, useDispatch, useSelector
- Debouncing and API polling for live chat feature
- Use shimmer UI for a good UX.
- Memoization of results.
- Fetch API responses
- Promises
- JS methods like map, splice, unshift
- Optional Chaining