Skip to content

README.md

Latest commit

 

History

History
193 lines (142 loc) · 4.58 KB

README.md

File metadata and controls

193 lines (142 loc) · 4.58 KB

YouTube Clone 🎬

A modern YouTube replica built with React.js, HTML, CSS, and JavaScript.

React JavaScript HTML5 CSS3

🚀 Overview

YouTube Clone replicates core features of YouTube—video browsing, search, and playback—in a clean and responsive React.js application. It's perfect for learning and demonstrating modern UI patterns, component architecture, and API handling.

✨ Features

  • 📺 Homepage with responsive video grid
  • 🔍 Search bar for instant video lookup
  • 🗂️ Sidebar navigation (Home, Subscriptions, Trending, etc.)
  • 🎥 Single video page (player, details, comments, likes)
  • 🌓 Dark/Light mode toggle
  • 🖱️ Interactive UI with animated components
  • 🔑 Authentication (optional/dummy)
  • ⚡ Fast & responsive (mobile-friendly design)

🛠 Tech Stack

Technology Role
React.js UI & routing
HTML5 Structure
CSS3 Styling
JavaScript Logic, state management
React Router Page navigation
Material UI/Tailwind Components

📁 Project Structure

src/
├── components/
│   ├── Navbar.js
│   ├── Sidebar.js
│   ├── VideoGrid.js
│   ├── VideoPlayer.js
│   ├── CommentSection.js
├── pages/
│   ├── HomePage.js
│   ├── VideoPage.js
├── App.js
├── index.js
public/
│   ├── images/
│   └── favicon.ico

⚡ Getting Started

Prerequisites

  • Node.js (v14.0 or later)
  • npm or yarn package manager

Installation

  1. Clone the repo

    git clone https://github.com/LoganthP/YoutubeClone-using-HTML-CSS-JAVASCRIPT-React.js.git
cd YoutubeClone-using-HTML-CSS-JAVASCRIPT-React.js

  2. Install dependencies

    npm install

  3. Start the local server

    npm start

  4. Visit http://localhost:3000

🚦 Scripts

  • npm start — Run development mode
  • npm run build — Build for production
  • npm test — Run tests
  • npm run eject — Eject from Create React App

🌟 Key Components

Navbar Component

  • Search functionality
  • User profile menu
  • Notifications
  • Upload button

Sidebar Component

  • Navigation menu
  • Subscriptions list
  • Library sections
  • Settings

Video Grid Component

  • Responsive video thumbnails
  • Video metadata display
  • Infinite scrolling
  • Loading states

Video Player Component

  • HTML5 video player
  • Like/dislike functionality
  • Subscribe button
  • Video description

🎨 Design Features

  • Responsive Design: Mobile-first approach
  • Dark/Light Theme: Toggle between modes
  • Smooth Animations: CSS transitions and animations
  • Modern UI: Clean, YouTube-inspired interface
  • Accessibility: ARIA labels and keyboard navigation

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

REACT_APP_API_KEY=your_youtube_api_key_here
REACT_APP_BASE_URL=https://www.googleapis.com/youtube/v3

API Integration

This project can be configured to use:

  • YouTube Data API v3
  • Mock JSON data
  • Local video files

📱 Responsive Breakpoints

  • Mobile: < 768px
  • Tablet: 768px - 1024px
  • Desktop: > 1024px

🚀 Deployment

Netlify

  1. Build the project: npm run build
  2. Deploy the build folder to Netlify

Vercel

  1. Connect your GitHub repository
  2. Vercel will automatically build and deploy

GitHub Pages

  1. Install gh-pages: npm install --save-dev gh-pages
  2. Add to package.json: "homepage": "https://yourusername.github.io/repository-name"
  3. Deploy: npm run deploy

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request