Day -18 to 25 React With Me

Building a YouTube Clone Using React and Vite

In this project, we explore how to build a YouTube clone using React and Vite, leveraging the power of modern JavaScript frameworks and tools to create a high-performance, maintainable application.

Key Technologies and Tools

React :is the main library used for building the user interface. It allows for the creation of reusable components and efficient state management.

Vite: is a build tool that provides a faster and leaner development experience for modern web projects. It leverages native ES modules in the browser and provides fast HMR (Hot Module Replacement).

Tailwind CSS: is a utility-first CSS framework that provides low-level utility classes for building custom designs without writing CSS. It helps in quickly styling the components with a clean and maintainable approach.

Key Features

Context API:The Context API is used to manage global state across the application. For instance, user authentication status or theme settings can be managed centrally using context.

Routing:React Router is used for navigation within the application. It enables dynamic routing, allowing users to navigate to different parts of the application without a full page reload.

API Integration:The application integrates with external APIs to fetch video data, user information, and other relevant content, mimicking the functionality of YouTube.

Debouncing :Debouncing is a technique used to limit the rate at which a function is executed. It ensures that the function is only called after a certain period of inactivity. This is particularly useful in scenarios like search input, where you don't want to make a network request on every keystroke but rather wait until the user has stopped typing for a short period.

What is Polling and WebSockets:

Polling:

Polling is a method where a client repeatedly requests data from a server at regular intervals. It's used to check for updates or new data. While easy to implement, polling can be inefficient due to continuous network requests and server load, especially if updates are infrequent. ex-

Gmail: uses api polling since we do not require a continues connection to get gmail in real time at the very exact moment they are sent, a little seconds delay will work . Same happens in the Cricbuzz site the commentary data is fetched after every 25 seconds, since it takes close to that amount of time to complete a delivery.

Websockets:

WebSockets provide a way to establish a persistent connection between the client and server, allowing real-time, bidirectional communication. Unlike polling, WebSockets enable the server to push updates to the client as soon as they occur, making it more efficient for real-time applications like chat, notifications, and live updates. ex-

Whatsapp : you need to send and receive data on the very exact moment even a slight delay in text could cause miscommunication or confusion for the user. Same works for Trading app you cannot have any delay, in delivering data. Even a slight delay could cause a heavy loss to the user.

Comparing Polling and WebSockets

• Efficiency: WebSockets are generally more efficient for real-time updates as they avoid the constant overhead of repeated HTTP requests.

• Complexity: Polling is simpler to implement but less efficient, while WebSockets require setting up a persistent connection but offer better performance for high-frequency updates.

• Use Cases: Polling can be suitable for less frequent updates, whereas WebSockets are ideal for applications needing real-time interactions, such as live chats, gaming, or stock price updates.

In our Youtube Project we have used polling for our live chat messages. we are receiving random messages after every interval.

function for live chat

const dispatch = useDispatch();
  const liveChatMessages = useSelector((store) => store.chat.messages);

  useEffect(() => {
    const timer = setInterval(() => {
      //   console.log("appi");
      dispatch(
        addMessage({
          name: generateRandomName(), // gives a random name
          message: generateRandomString(25), //gives a random string of 25 length 
          imageUrl: `https://picsum.photos/seed/${Math.floor(
            Math.random() * 1000
          )}/200`, // gives a random image 
        })
      );
    }, 4000);
    return () => {
      clearInterval(timer);
    };
  }, [dispatch]);

Live chat Store using Redux

const chatSlice = createSlice({
  name: "chat",                 
  initialState: {
    messages: [],
  },
  reducers: {
    addMessage: (state, action) => {
      state.messages.splice(LIVE_CHAT_LIMIT, 1);//  keeps chat from getting more than 25 so it wont hangs the browser
      state.messages.unshift(action.payload);
    },
  },
});
export const { addMessage } = chatSlice.actions;
export default chatSlice.reducer;

for reference - https://github.com/piyusss11/my-youtube

https://ably.com/blog/websockets-vs-long-polling