MyTube is a modern YouTube-inspired web application built with React, TypeScript, and Tailwind CSS. It provides a seamless user experience for browsing videos, managing subscriptions, and exploring categories.
Live Demo: https://my-tube-omega-lime.vercel.app/
- Responsive Design – Optimized for all screen sizes
- Dynamic Sidebar – Expandable sections for categories, playlists, and subscriptions
- Video Grid – Thumbnails, GIF previews, and metadata
- Search Functionality – Text or voice input powered by the Web Speech API
- Subscriptions Management – View and navigate to subscribed channels
- Playlists – Access and manage your favorite playlists
- Explore Section – Discover trending, music, sports, and more
- Dark Mode Ready – Easily switchable or extendable to dark mode
- Frontend: React, TypeScript, Tailwind CSS
- State Management: React Context API
- Utilities: clsx, tailwind-merge
- APIs: Web Speech API (for voice search)
- Hosting: Vercel
├── src/
│ ├── components/
│ │ ├── Sidebar.tsx # Dynamic sidebar UI
│ │ ├── PageHeader.tsx # Header with text + voice search
│ ├── context/
│ │ └── SidebarContext.tsx # Sidebar state management
│ ├── data/
│ │ ├── home.ts # Static video & category data
│ │ └── sideBar.ts # Sidebar data (subscriptions, playlists)
│ ├── hooks/
│ │ └── useScreenSize.ts # Custom hook for screen size detection
│ ├── utils/
│ │ └── format.ts # Helper functions (duration, views, time)- Node.js (v16 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/your-username/mytube.git
cd mytube- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open your browser and visit:
http://localhost:5173
This project currently does not include automated tests. You can add tests using Jest or React Testing Library.
This project is licensed under the MIT License.
- Inspired by YouTube’s UI/UX
- Built using React, TypeScript, and Tailwind CSS
- Contributions are welcome. Feel free to open issues or submit pull requests.