This project is a YouTube clone built with React and Material-UI. It allows users to browse and watch videos, search for videos by keywords, and view video details and related videos.
- Home Feed: Users can browse a feed of videos on the home page.
- Video Detail: Users can view the details of a specific video, including its title, channel information, view count, and likes. They can also watch the video.
- Channel Detail: Users can view details about a specific YouTube channel, including the channel name and the list of videos uploaded by the channel.
- Search: Users can search for videos by entering keywords in the search bar. The search results will display a list of videos related to the search query.
- Responsive Design: The application is responsive and provides an optimal viewing experience across a wide range of devices.
The project is structured as follows:
src/components
: Contains the React components used in the application, such as the Navbar, Feed, VideoDetail, and Sidebar.src/utils
: Contains utility functions and constants used throughout the project, such as API fetching functions and constant data.src/App.js
: The main entry point of the application, where the routes and main components are defined.
To run the project locally, follow these steps:
- Clone the repository:
git clone https://github.com/maazrehman99/youtube_clone>
- Install the dependencies:
npm install
- Start the development server:
npm start
- Open your browser and visit
http://localhost:3000
to see the application.
The project relies on the following dependencies:
react
: JavaScript library for building user interfaces.react-router-dom
: Routing library for React applications.@mui/material
: Material-UI library for styling and UI components.react-player
: React component for playing videos.@mui/icons-material
: Material-UI icons library.
This project was developed as a practice exercise to learn and showcase React and Material-UI skills. It is not affiliated with or endorsed by YouTube.
Feel free to explore, modify, and use this project as a learning resource or starting point for your own applications. Happy coding!