Youtube Clone Project

A Youtube clone coding project that built with React and hosted with Netlify.

Click here to see the demo!

Table of content

• About
• Features
• Things I've learned
• Installation
• Todo

About

Goal

The main goal of this project was to apply the concepts and lessons I learned about React and Frontend Development in general. I wanted to challenge myself and see if I could recreate some of the features from Youtube on my own, without relying on any tutorials

Following are the areas that I wanted to focus on practicing:

• Implementing clean, polished, and responsive user interface
• Managing color scheme and themes effectively to achieve consistent look and feel of the overall design
• Data fetching and handling API endpoints efficiently in the application
• Apply React Context API and useReducer to handle complicated state management

Tech Stack

Frameworks & Libraries

• Netlify
• Vite
• React

Styling

• TailwindCSS

Data Fetching

• react-query
• axios

Features

Following are the list of features within the scope of this project:

Responsive Grid Layout

Dark Mode

• Includes option for user's device theme

Browsing & Streaming

• Search clips
• Click on the video cards to play the clips
• Display list of related videos (update: replaced w/ channel videos)
• Display channel info and subscriber counts
• Show more info card

*The features of this project is based on Youtube on March 7th, 2023.

Things I've learned

Key Takeaways

📍 Separating API Layer from the app to improve maintainability

• Use Dependency Injection pattern & React Context API to loosen up dependency between API layer and the application
  

• Use ReactQuery to handle data fetching, providing eaiser way to manage loading state and error

  

📍 Importance of carefully organized color scheme

• Although Youtube's color scheme may seem fairly simple at a first glance, it turns out that Youtube's color palette is a lot more

• Reduce maintenance cost and allow quick modification while preserving consistency in look

  

📍 Compound component pattern to enhance reusability and scalability

• Created reusable <Card /> component that can be composed into different variations
  

• <Card /> has been used to build <RelatedCard>, <ChannelCard />, and other cards used through out the app.

  

📍 "Use device setting" option for dark mode

Installation

1. Install the required node packages for the project using yarn.

   yarn add
   

2. Once finished, be sure to add .env.local to the root directory of the project. Within the .env.local file, add following code and save it. (make sure that .gitignore file ignore any .env or .local file format)

   VITE_YOUTUBE_API_BASE_URL=https://youtube.googleapis.com/youtube/v3
   VITE_YOUTUBE_API_KEY='[Paste your personal Youtube API Key here]'
   

   This information required to successfully pull the data from Youtube Data API endpoints. If you don't have your own youtube api key, follow the instruction here.

3. To start the project run:

   yarn dev
   

TODO

• Replace deprecated API parameter(relatedToVideoId)
  • As of August 7th, 2023, Youtube have discontinued their support for relatedToVideoId parameter from search.list method and it's no longer part of public API. Due to this change, I've redirected API call to retrieve a list of videos from a given channel with channelId instead of relatedToVideoId.
• Add proper loading fallback and 404 page
• Fix encoding issues "&#39" on video title