November 15, 2021

You’ve got questions, we’ve got answers.

How to Build a YouTube Clone with React -techymaxx

Do you want to make your own youtube clone and look your resume more attractive. Here i am back with my  another project i.e. youtube clone app in single page application . Using MERN stack where i have used Youtube Data v3 API for real time data from youtube server . And have used React Js for single page for frontend .So if your havn’t checked my previous post ,Link is in the bottom go and check out . So first of all let me tell you the basics of web development .

FRONT-END : front-end part are the visual view of any website .which can be acheived by HTML ,css, javascript , bootstrap , Normalize . and to make your code resusable and shorter you must go with Angular type framework or  React Js library . which also make your application as single page application .

BACK-END : back end are the algo part of any website .where all the decesion making work is implemented . You can achieve this funtionality using any language like java, php , javascript , Python and  for database you can use MYSQL/NOSQL ,Oracle database etc..  any of this . so that here i am using Yutube data api which will give me all real time youtube data hence i don’t need to further setup my own database .

React Js

First of all if you don’t know that what is react Js then i would  recomment you to get familiar with this technology . And if we talk about it’s defenition and working then .React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.

Requirments 

React Js 

Dependencies 

dependencies“: {
    “@testing-library/jest-dom“: “^5.14.1”,
    “@testing-library/react“: “^11.2.7”,
    “@testing-library/user-event“: “^12.8.3”,
    “axios“: “^0.22.0”,
    “react“: “^17.0.2”,
    “react-dom“: “^17.0.2”,
    “react-router-dom“: “^5.1.2”,
    “react-scripts“: “4.0.3”,
    “web-vitals“: “^1.1.2”
  },

Annd if you face any defficulty while creating this feel free to ask me  on linked or via whataspp