YOUTUBE Clone using React, Typescript, MUI, and Redux toolkit with All best practices.

Hey Developers, hope all of you are doing well. Today I am going to share how I created a minimal YOUTUBE clone using react and MUI from scratch.

What we are gonna explore in this blog

• Folder structure
• Best Practices
• Problems faced during the deployment phase

Folder structure

Why your react application must have a good folder structure? We all know that React is a frontend library and it comes with an ample amount of benefits out of the box. As it's a library we don't have any specific folder structure or rule to follow while creating our project, hence it's of utmost importance to understand what a good folder structure can look like.

I have created the folder structure as follows, remember it can be very different and can change keeping in mind the size of the app, complexity, etc.

Components

Why Components folder is needed? As the name suggests you are gonna put react components inside this folder but I would suggest only putting the components which are very common throughout the application.

for ex. Header, Footer, Sidebar, Loader.

Now, whenever there is a UI change that is not related to any specific functionality or pages you know where to get common components even if your app size is large.

Layouts

Your application might be huge in the longer run, you never know what and how business requirements will change. This folder is not necessary if you know that your app is gonna have only one layout, you could manage that using the routing.

What if your app has a dashboard layout, login/register layout, and main app layout all of these are different. A better way of solving this problem is to have a layout folder and whenever there is a requirement for a new layout you could easily add it.

Pages

Now, what the heck is the Pages folder your question? Right!
let me tell you any web application is all about having different pages. If you consider this YOUTUBE clone here we have 3 pages.

1. Home Page
2. Channel Page
3. Watch Video Page

These are the root-level components for every page. For example, when you check out Watch Video Page, you will find out that there is Video Component and a Comment List component. Every component related to the page would go inside the Pages/ and their components.

Doing it this way makes developers' life pretty easy as they would find every component related to that page inside.

Types

This one is a specific folder that you can include if you have to define Typescript/Types. Also, you can put static values such as Menu Items List inside them to make your component code clean.

Redux

Here we are using the Redux toolkit for state management, thus this folder. It must have a store.js file for all store configurations. For the reducer, actions you can check out the code.

Helpers

You would find the helpers folder everywhere in most of the repos. I am using this folder to put in the helper functions which are used throughout the application and that makes the code cleaner.

The abstraction we say, here (timeAgo) function would take date-time as a parameter and convert it into days ago, years ago under the hood.

*Best Practices *

We have learned about how you can create a React JS Folder structure that is scalable. It's time for us to go through some of the best practices we should follow to make our development phase super easy.

1. Prop types are a great way to validate your props for a component. But if you want to make a scalable web application. As per 2022, you can go with React + Typescript.

2. Always keep all the files related to a component in a separate folder. When you go through the code base you will find that I have created component-specific folders. ex. for the Header, and Sidebar components I have a separate folder so all the CSS, test files, and smaller sub-components could stay there.

3. Always have a services folder in your app, and try not to write API logic inside components. Inside the component, you should only call the functions and that should be enough to call APIs and get data for you. The benefit of doing it that way is if at some point in time my API base endpoint changes I don't need to change it in every component But I can make just 1 change in the API config file.

4. Try to make your component as small as possible with Proper Names. ex. if your component is responsible for loading Comments It makes more sense to name them as CommentList.

Problems faced during the deployment phase

I Have used Netlify to host this web app and I thought It would be a seamless process but when I started pushing the code I got weird errors in the build logs. When I checked on my local everything was looking good and even though react Build was successful without any errors.

There were some errors related to @MUI/styles not compatible with React version (18). After a good amount of google searching, I found that there is a conflicting peer dependency that is needed for @MUI/styles which is ( React version 17 ).

As I had used @MUI/styles all over the application It was almost impossible to go without @MUI/styles. Now I had only 1 choice to degrade my React version from 18 to 17.

This is how you have to make changes to your index.js file to go from React 18 to 17.

After Resolving this peer dependency issue build was successful and the site was published.

I did not research much about @MUI/styles package and
started with the project. I would recommend always
researching the package you are adding to your
project. Don't rely much on any package because if that 1 package would go down or does not work it can break the whole application.

In my case, had I not resolved the peer dependency issue with React. I could have lost all of the CSS within the app.

Bye, Keep learning.

GitHub Link - https://github.com/avi1737/youtube-clone

Live Link - https://youtube-clone-avinash.netlify.app/