harshitbalodi / my-youtube

A Full fledged Youtube clone with all the Youtube functionality implemented using React and Redux.

Youtube Project

Introduction

The Youtube project, implemented during the Namaste React course taught by Akshay Saini, serves as a demonstration on how to tackle machine coding rounds during interviews. This proposal outlines additional features, technology stack updates, challenges, and justifications.

Here is the link for demo - YouTube Clone

Additional Features

1. Hamburger Menu

   • implemented a hamburger menu with a home icon, providing a seamless navigation experience. Clicking the home icon redirects users to the home page without triggering a full page reload, enhancing the overall responsiveness and user interface of the project

2. Search Box

   • Utilizes a live API from YouTube for real-time search results.
   • Implements debouncing to optimize search requests.
   • Includes caching mechanisms for improved performance.

3. Video Cards

   • Utilizes a live API from YouTube for real-time data for thumbnails, description, viewcount etc.
   • incorporated the YouTube embed functionality to seamlessly integrate and display videos within the project interface upon clicking on any video cards

4. Comments Section

   • Implements a comments section with hard-coded comments due to YouTube API limitations on nested comments.
   • Utilizes the concept of recursion to display nested comments.

5. Live Chat

   • Implements a real-time live chat feature.
   • Challenges addressed in the "Challenges" section below.

Challenges

Data Layer

• Getting Live Data
  • Explore options for handling live or near real-time data.
  • Consider using:
    • Web Sockets for applications like trading platforms (e.g., Zerodha, Binance, WhatsApp).
    • API Polling for applications like Gmail, Cricbuzz.

UI Layer

• Updating the UI
  • Address challenges related to displaying live or near real-time data in the user interface.
  • Discuss potential solutions such as efficient rendering mechanisms.

Technology Stack Updates

Frontend

• React.js: A declarative, efficient, and flexible JavaScript library for building user interfaces.
• Redux: A predictable state container for managing the application's state.
• React-router-dom: A standard library for routing in React.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.

Testing

• Jest: A JavaScript testing framework for unit and integration testing.

Bundler

• Parcel: Parcel is a blazing-fast, zero-configuration web application bundler that simplifies the process of building modern web applications by automatically handling tasks such as code bundling, minification, and asset optimization.

Chat Feature Implementation

• Utilizes Redux store for managing live chat data.
  • Creates a chatSlice.js to handle chat-related state and logic.
  • Adds chatSlice to the Redux store (e.g., store.js).
  • Enables the sending of custom messages within the live chat.

Estimated Time

I anticipate spending approximately 5 minutes discussing the outlined features, technology stack updates, challenges, and justifications with the interviewer.