🎥 WebApp - YouTube UI Clone 📺

This is a YouTube UI Clone project built with React.js as part of my learning journey from the Namaste React course by Akshay Saini. This project focuses on applying Core React concepts, effective state management with Redux, and practical techniques like Debouncing, Shimmer UI, and Tailwind CSS for styling.

---

🚀 Key Features

• 📂 Core React Concepts

  • Functional Components
  • React Hooks (useState, useEffect, useRef)
  • React Router for navigation
  • Component-based architecture

• 🧑‍💻 State Management

  • Global state handling with Redux Toolkit
  • Clean store structure with slices and reducers

• 🎨 UI/UX & Styling

  • Tailwind CSS for responsive, utility-first styling
  • Shimmer UI for modern skeleton loading screens
  • Dynamic Sidebar, Header, Video List, and Watch Pages

• ⚙️ Performance Techniques

  • Debouncing for optimized API search calls
  • Lazy loading components
  • Efficient API integration & data caching

---

📚 Core Concepts Covered (from Namaste React)

✅ React Hooks & Lifecycle
✅ Debouncing Search Input
✅ Shimmer UI / Skeleton Screens
✅ Redux for State Management
✅ Tailwind CSS Styling
✅ React Router v6
✅ Conditional Rendering
✅ Caching with Redux
✅ Reusable Component Patterns

---

🛠️ Tech Stack

Technology	Usage
React	Frontend Library
Redux Toolkit	State Management
TailwindCSS	Styling
JavaScript	Programming Language
React Router	Routing

---

📂 Folder Structure

src/
├── components/
├── data/
├── utils/
├── App.js
└── index.js

---

🔧 Installation & Running Locally

# Clone the repository
git clone https://github.com/your-username/webapp-youtube-UI-clone.git

# Navigate to the project directory
cd webapp-youtube-UI-clone

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:5173 in your browser.

---

📸 Demo Preview

---

🏆 Learning Source

• This project is part of my learning from Namaste React by Akshay Saini.

---

⭐ Show Your Support

If you found this project useful, consider ⭐ starring this repo and following me for more projects!

🐞 Bugs I Faced and Solutions

1. TailwindCSS Not Supported

• Issue: Tailwind wasn't working as expected.
• Cause: We're using create-react-app, which does not support Tailwind v4+ well.
• Solution: Downgrade to Tailwind v3.4.1.
• Alternative: Migrate the project to Vite, which fully supports Tailwind v4+.

2. Redux useReducer Problem

• Issue: Error when using useReducer with Redux store configuration.
• Cause: Exported the default slice and destructured it in configureStore, causing incorrect usage.
• Solution: Import the slice normally without destructuring.

---

📌 Project Overview

Header.js

• Layout: Uses CSS Grid.
• Search Feature:
  • Debouncing implemented for better UX and optimized API calls.
  • Debounce delay: 200ms
  • Explanation: Every time the input changes, the previous timeout is cleared. After 200ms of no typing, the search function runs.
• Caching:
  • Search results are cached to avoid redundant API calls and improve performance.