esadakman / reactjs-youtube-clone

Youtube Clone

Objective

Build a Youtube clone using ReactJS.

Description

• In this project, I learn:
  • React functional components and their reusability
  • React file and folder structure
  • Material UI (version 5)
  • Perfectly placed media queries for satisfactory responsiveness on all devices
  • And most importantly, fetching data from unlimited sources using RapidAPI.

Project Link

You can reach my project from here !

Built With

• HTML
• CSS
• JS
• ReactJS
• Axios
• Material UI
• RapidAPI

Project Skeleton

youtube_clone (folder)
|
|----readme.md
SOLUTION
├── public
│     ├── favicon.ico
│     ├── index.html
│     ├── logo.png
│     └── robots.txt
├── src
│    ├── components
│    │        ├── ChannelCard.jsx
│    │        ├── ChannelDetail.jsx
│    │        ├── Feed.jsx
│    │        ├── Loader.jsx
│    │        ├── Navbar.jsx
│    │        ├── SearchBar.jsx
│    │        ├── SearchFeed.jsx
│    │        ├── Sidebar.jsx
│    │        ├── VideoCard.jsx
│    │        ├── VideoDetail.jsx
│    │        ├── Videos.jsx
│    │        └── index.js
│    ├── utils
│    │     ├── fetchFromAPI.js.js
│    │     └── constants.js.jsx
│    ├── App.css
│    ├── App.js
│    └── index.js
├── package.json
└── yarn.lock
└── readme.md

Installation

To run this project, install it locally using npm or yarn:

$ git clone https://github.com/esadakman/reactjs-youtube-clone.git
$ cd youtube_clone/
$ npm install / yarn
$ npm start / yarn start

Preview of the Project