YouTube Clone

A React-based clone of YouTube, demonstrating debouncing, Redux state management, and modern front-end architecture using Vite and Tailwind CSS.

🚀 Features

• Debounced Search: Efficient API calls while typing (see below for details).
• Modern React Structure: Organized components, hooks, and state slices.
• Global State Management: Redux Toolkit for scalable and maintainable state.
• Chat & Search Slices: Modular chat and search management.
• Reusable Utilities: Constants and helpers for DRY code.
• Responsive Design: Styled with Tailwind CSS for a mobile-first experience.
• FontAwesome Integration: Rich iconography.

📁 Project Structure

/
├── index.html
├── package.json
├── vite.config.js
├── eslint.config.js
├── /src
│   ├── App.jsx
│   ├── main.jsx
│   ├── index.css
│   ├── /assets
│   └── /components
├── /utils
│   ├── appSlice.jsx
│   ├── chatSlice.jsx
│   ├── searchSlice.jsx
│   ├── constants.jsx
│   ├── helper.jsx
│   └── store.jsx

Key Files

• src/App.jsx: Main application component.
• src/main.jsx: App entry point.
• src/components/: UI React components.
• utils/appSlice.jsx, chatSlice.jsx, searchSlice.jsx: Redux slices.
• utils/store.jsx: Redux store setup.
• utils/constants.jsx: Shared constants.
• utils/helper.jsx: Utility functions.
• index.html: HTML entry.
• vite.config.js: Vite configuration.
• eslint.config.js: Linting.

⚡ Debouncing Example

This project showcases debouncing for search input, reducing unnecessary API calls:

• Without debouncing: 1000 queries × 14 characters = 14,000 API calls on iPhone Pro Max.
• With debouncing (200ms): Only ~3 API calls per 1000 queries.
• If the interval between keystrokes is less than 200ms, API call is skipped.

🛠️ Tech Stack

• React 18
• Redux Toolkit
• Vite
• Tailwind CSS
• React Router DOM
• FontAwesome
• ESLint

🏗️ Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm

Installation

git clone https://github.com/realgenes/youTube_Clone.git
cd youTube_Clone
npm install
npm run dev

Visit http://localhost:5173 to view the app.

📑 Scripts

• npm run dev — Start development server
• npm run build — Production build
• npm run preview — Preview production build
• npm run lint — Lint the codebase

🤝 Contributing

Contributions welcome! Please open issues or pull requests.

📜 License

MIT

---

Developed by realgenes