Web development with React — Youtube Clone

Source: https://www.pyramidions.com/blog/wp-content/uploads/2018/07/9.jpg

The Journey of web development

Pretty done with some HTML and CSS and a little exploration with W3 schools or videos elsewhere, we started looking ourself as a good level web developer and web designer. Oh, wait — web designer🤦‍♂️. You just started with the basic web development bro✔.

Web design is totally a different field when compared to web development. A web designer designs the website, focusing on how the UI should look, where to place the search bar, where the icons and buttons, and of course, a web designer will tell the developers as to what colour must be chosen. Whereas, web developer codes the design delivered by the designer and adds functionality to it. Now, it’s your turn to become a web designer or web developer. Choose wisely😊.

Need to make more and more Clones

I, myself, prefer react.js over angular.js or vue.js. You may prefer another.

Now, what next!!!. You are still half-way. Create more and more website clones. How does it help me to code the same thing that already been coded? Well, you know the UI right, so it’s basically like you have the UI now you just need to code it and adds suitable functionality to it where-ever needed. This way, you can practice to code what is called real-life websites. Hence learn more deeply and enjoy along with new other frameworks to explore their advantages. Like, I prefer material-UI for icons. Hence coming through all this journey you need to create at least 2 clones a week in addition to this explore other edges of web development tools.

YouTube Clone

YouTube clone using React

Here I have shown the screenshot of the clone. Try to see things from my point of view. First is the header component consisting of some icons. Then there is this sidebar with different options to switch between and then the main body of YouTube consisting of recommended videos. I purposefully attached three videos remaining four with no wrong image URL and some with no URL and information. But just to get you to know how will it look like, the basic structure is there. Coming to the coding point of view, as I have cloned YouTube using React.js I think of everything as component and their collections. Starting with the header component, think how you can design the same header component as YouTube, that will at first, need some icons, so better import it from material-UI, then an input field and a logo of your account. Once done the header component will look like this.

Header Component

Unstructured Header component

Of course, as I said earlier, it ended up looking so ugly as compared to the actual YouTube header. Let me get you through the code once,

Not much code isn’t it?. But the question is, how to make it look pretty decent. So, there is where comes your CSS knowledge, try to give it some styles so that it can look like this.

Header Component with styling

The CSS code for the same is here.

CSS for Header Component

Now you do you think about making clones with React? Well, it’s pretty easy, which seems tough at first sight. The CSS display: flex property helps you to arrange items in row and align-items: center helps you align the center of the item aligned rest is some padding, margin and border properties and you are done with good output on your localhost😉.

Sidebar Component

Working on SIdebar

React code for the sidebar is pretty much simple but it needs something called a state which will be maintained by another component, you can call it anything, I call it the SidebarRow component.

Sidebar Component in React
SidebarRow component handling props

Here sidebar component is passing icons, title and a boolean selected, to identify which row is selected. The rendering work is mainly done by SidebarRow component and sidebar component is just passing state to SidebarRow. Well after being done with Sidebar and SidebarRow. Lets do some CSS. The effect should come out to be like this.

Sidebar with CSS

The CSS code for the same will be something like this

Sidebar CSS
SidebarRow CSS

Now that tough right? Well, practice makes the man perfect. So keep practicing. Now is the time for the main part of video rendering. What I have done here is have hardcoded the videos properties as the is no backend or database to manage it. Let’s dig it as well.

Video Component

Video Component with React

Following will the the code for the same.

Hard coded RecommendedVideo Component
VideoCard Component rendering view

As you can see from the code, properties that are passed are image, title, channel, views, timestamp, and channelImage. These will help the VideoCard Component to render each one of the videos in the desktop. If you want to know the CSS, the code will look like

Recommended Video CSS
VideoCard CSS

This will give the ultimate look, which is close to the actual YouTube look. You will end up getting something like.

YouTube Clone

Hurrahhh!!!!👏👏. You have done pretty much good with the clone and ended up getting good results. It may be time-consuming at first but you will enjoy it once you got the rhythm.

Conclusion

I'm student of IIIT Nagpur. I'm enthusiastic towards web development with React. I have made several clones with React and now I want to share my experience.