Full Stack Youtube Clone using React Native — Part 0

Note

This project will be shown in 5 parts as this is a large project and it will be quite difficult to explain all things in 1 article and also I don't wanna make this article 1 hr long 🙂🙂. Also, this article is not for complete beginners. You should have some good knowledge about redux, react-navigation, etc. Though I will try my best to explain all the things. Also, I recommend you to go over some tutorials on udemy if you are a complete beginner.

Bonjour everyone!!! recently I created my own Youtube Clone using React native and Youtube API. Before getting any further, let's show you what are we going to build and some features of this project.

So after watching this video, you might have got an idea of all the features of this project, but these are some features of this project

Features of App

1. 1st when the app starts we see Random videos
2. Based on which type of video the user sees, the data on the home screen is replaced accordingly(similar videos).
3. Unlimited Scrolling in all screens(User can see more videos when he reaches the end).
4. Search Videos
5. All the basic youtube functions

This project will be a great project as well as a practice too as we will implement many important concepts of the react-native like

Some Important Things we will be Doing

1. Various React hooks (useState,useCallback,useEffect, useRef)
2. React navigation (createStackNavigator,createBottomTabNavigator)
   (You could use various other navigations too but I wanted to create a format of the real Youtube)
3. FlatList
4. React Redux
5. Modals

We will be using various important models that are commonly used. Also for example when we will create our search screen we will be using a module

react-native-search-header

which is used to display a header that shows similar search results and if you want to not use any additional modules, I have created my own component(without any module) that shows the same functionality.

Btw, as you have seen in the note, this is Part 0(introduction) of this project and this will be what we will be doing in different parts.

How article will Proceed

Part 0 (This article)

Intro to the article

Part 1 (Link)

Doing the navigation work for the project and creating the Headers and Tabs(Bottom)

Part 2

Working on the Search Screen (Header and the content). We will be creating the Home Screen at the end because the main data that we show will be related to the video we play.

Part 3

Working on the Screen that will play videos and also showing the comments. By the way work like ‘Unlimited Scrolling’ will be done at that screen only in which we do the work.

Part 4

Creating the Home Screen

Part 5

Adding redux, doing some styling changes, checking for errors, and explaining how to build apps without expo and how you can expand this project.

Explanation and Installation for different modules will be shown in that particular part only. So, I think this is for Part 0 of this project and Part 1 will be released in no time.

Till then stay safe, stay healthy

Thank you