Welcome to my YouTube Clone project! This dynamic, full-stack video streaming platform mimics key features of YouTube, built using modern web technologies. It includes functionalities such as video search, playback, user authentication, playlists, and more, providing a seamless and engaging user experience.
- User Authentication: Secure user sign-up and login functionality via OAuth (Google).
- Video Streaming: High-quality video playback with controls like play, pause, seek, and volume adjustments.
- Live Search with Auto-Suggest & Debouncing: Instant video search with real-time suggestions and optimized performance using debouncing.
- Dark/Light Mode: Toggle between dark and light mode for a more customized viewing experience based on user preference.
- Category-Based Filters: Easily filter videos by categories like AI, Coding, News, Music, Sport, Development, and more.
- Personalized Recommendations: Personalized video recommendations based on user interactions.
- Responsive Design: Fully responsive UI optimized for both desktop and mobile devices, ensuring a seamless experience across platforms.
- Video Uploads: Authenticated users can upload their own videos and manage them in a personal library.
- Comments & Likes: Engage with videos by liking and commenting (available for authenticated users).
- Playlists: Create, manage, and organize video playlists for a personalized viewing experience.
- Real-Time Chat: Add a chat section for live videos using WebSocket.
- More Advanced Recommendation System: Further improve recommendation algorithms based on user preferences and video metadata.
- Optimized Performance: Built with performance in mind, ensuring quick load times and smooth media streaming.
You can check out the live demo of the YouTube Clone project at: Live Demo
- React.js with TypeScript – for building a scalable, maintainable, and type-safe user interface.
- Vite – a fast build tool for development, ensuring quick reloads and a smooth developer experience.
- Styled-Components – for modular and dynamic styling that enhances the user experience.
- React Router – for client-side routing and smooth page transitions.
- React Query – for fetching, caching, and syncing data from the YouTube Data API efficiently.
- YouTube Data API – to fetch video data (e.g., video search, trending videos, etc.) and handle searches.
- Debouncing Techniques – to optimize search performance and ensure smooth user interactions.
- Firebase – for authentication, real-time database, and file storage (e.g., videos, user data).
- Vercel/Netlify – for front-end hosting, providing fast and reliable content delivery.
- Firebase Hosting – for hosting both front-end and back-end in a serverless environment.
- Prettier – for code formatting to maintain consistent code style across the project.
- ESLint – for ensuring consistent code quality and identifying potential issues during development.
This project is developed by:
Follow these instructions to set up the project locally.
- Node.js (v18 or higher) - You can download it from here.
To get started, clone the repository to your local machine using the following command:
git clone https://github.com/saddamarbaa/Youtube-clone-app-react-vite-typescript.gitcd Youtube-clone-app-react-vite-typescriptOnce you’ve cloned the repository, navigate to the project folder and install the required dependencies:
npm installOnce you’ve cloned the repository, navigate to the project folder and install the required dependencies:
Copy .env.example to .env and update the necessary values.
For user authentication, you'll need to set up Firebase:
- Go to the Firebase Console.
- Create a new project or select an existing project.
- Enable Firebase Authentication (Email/Password and Google).
- Copy the Firebase config and add it to the
.envfile in your project.
To fetch video data, you'll need to set up the YouTube Data API:
- Go to the Google Cloud Console.
- Create a new project or select an existing project.
- Enable the YouTube Data API v3.
- Generate an API key and add it to the
.envfile in your project.
Once the setup is complete, you can run the project locally using:
npm run devThis will start the development server, and you can view the app in your browser at http://localhost:3000.
The project uses the YouTube Data API for fetching video data. You can check the official documentation here.
- /videos – Fetch a list of popular videos.
- /watch?v=videoId – Fetch video details for a specific video.
- /search – Search for videos based on a query.
- /comments – Fetch and post comments for a video.
- /suggestions – Fetch search suggestions based on the query.
├── public
│ ├── index.html
│ ├── assets/
│ │ └── logo.png
│ └── favicon.ico
├── src
│ ├── assets
│ │ ├── logo.png
│ │ └── thumbnail.jpg
│ ├── components
│ │ ├── VideoCard.tsx
│ │ ├── VideoPlayer.tsx
│ │ ├── Header.tsx
│ │ ├── Sidebar.tsx
│ │ └── SearchBar.tsx
│ ├── config
│ │ └── youtubeApiConfig.ts
│ ├── constants
│ │ └── actionTypes.ts
│ ├── custom-hooks
│ │ └── useAuth.tsx
│ ├── globalStates
│ │ └── AppContext.tsx
│ ├── layout
│ │ ├── Navbar.tsx
│ │ └── Footer.tsx
│ ├── screens
│ │ ├── HomePage.tsx
│ │ ├── WatchPage.tsx
│ │ └── LoginPage.tsx
│ ├── styles
│ │ ├── theme.ts
│ │ └── globalStyles.ts
│ ├── types
│ │ ├── video.ts
│ │ └── user.ts
│ ├── utils
│ │ ├── formatDate.ts
│ │ └── debounce.ts
│ ├── App.tsx
│ └── index.tsx
└── dbConfig.js
To configure the project, you'll need to add the necessary environment variables. Follow these steps:
- Copy
.env.exampleto.env. - Add your Firebase, Google API keys to the
.envfile.
Here are the environment variables you need to set:
# Firebase Configuration
VITE_REACT_APP_FIREBASE_API_KEY=""
VITE_REACT_APP_AUTH_DOMAIN=""
VITE_REACT_APP_PROJECT_ID=""
VITE_REACT_APP_STORAGE_BUCKET=""
VITE_REACT_APP_MESSAGING_SENDER_ID=""
VITE_REACT_APP_APP_ID=""
# Yotube API Configuration
VITE_REACT_GOOGLE_API_KEY=""
To deploy this application, follow these steps:
-
Prepare Environment Variables: Ensure that the necessary environment variables are set up in your production environment. For this project, you will need:
VITE_REACT_APP_FIREBASE_API_KEY: Your Firebase API Key.VITE_REACT_APP_AUTH_DOMAIN: Firebase Auth Domain.VITE_REACT_APP_PROJECT_ID: Firebase Project ID.VITE_REACT_APP_STORAGE_BUCKET: Firebase Storage Bucket.VITE_REACT_APP_MESSAGING_SENDER_ID: Firebase Messaging Sender ID.VITE_REACT_APP_APP_ID: Firebase App ID.VITE_REACT_GOOGLE_API_KEY: Google API Key.
Important: Copy the provided
.env.examplefile to a new.envfile, and fill in the necessary values for your production environment. -
Push your code to a Git repository: If you are using a service like GitHub, GitLab, or Bitbucket, push your code to a remote repository.
-
Set up a Hosting Service: You can deploy the app on platforms like:
- Install the Vercel CLI and log in.
npm i -g vercel vercel login
- Create a production build of your app.
npm run build
- Deploy the app using the Vercel CLI.
vercel --prod
- Set the necessary environment variables in the Vercel dashboard under the Environment Variables section.
- To enable automatic deployment whenever you push code to the repository, check the Vercel documentation for instructions on setting up Automatic Deployment.
- Install the Netlify CLI and log in.
npm i -g netlify-cli netlify login
- Build the project for production.
npm run build
- Deploy the app using the Netlify CLI.
netlify deploy --prod
- Set the environment variables in the Netlify dashboard under the Site Settings > Build & Deploy > Environment Variables section.
- To enable automatic deployment whenever you push code to the repository, check the Netlify documentation for instructions on setting up Auto Deployment.
- Install the Vercel CLI and log in.
-
Set up Firebase:
- Ensure that your Firebase project is properly configured. This includes enabling Firebase Authentication, Firestore, and Storage as needed.
- Use Firebase Console to manage the environment and production configuration.
- Ensure the environment variables are correctly set in your deployment platform for Firebase services to function properly.
-
Additional Considerations:
- Security: Ensure that sensitive information (like API keys) is stored securely using environment variables on your hosting platform.
- Build Process: Always run
npm run buildbefore deploying to production to generate optimized production-ready code.
Once deployed, your application will be live, and you can access it through the provided URL from Vercel or Netlify.
Contributions make the open-source community an amazing place to learn, inspire, and create. We deeply appreciate all contributions, whether it's fixing bugs, adding features, or suggesting improvements. Thank you for being a part of our community! 🥰
-
Fork the repository
Click the Fork button on GitHub. -
Clone the repository
git clone https://github.com/saddamarbaa/Youtube-clone-app-react-vite-typescript
-
Create a new branch
git checkout -b your-feature-branch
-
Make your changes
Implement your changes with clear commit messages. -
Test your changes
Run tests to ensure everything works. -
Commit your changes
git add . git commit -m "Add/Update feature description"
-
Push your changes
git push origin your-feature-branch
-
Create a Pull Request (PR)
Go to the Pull Requests tab, click New Pull Request, and submit it for review.
Please be respectful and kind to other contributors. By participating, you agree to abide by the project's Code of Conduct.
- Check existing issues: Ensure the problem or feature request hasn't been reported yet.
- Report a bug/feature: If not, create a new issue with:
- Steps to reproduce (if applicable)
- Expected vs actual behavior
- Any error messages/logs
- Document new features in README.md.
- Update API docs for any changes.
Your contributions improve this project for everyone. Thank you! 🙏
- Current Status: This project is in active development.
This project was inspired by YouTube's platform, with an additional focus on building a modern, feature-rich web application using React. The goal is to replicate core features while adding enhancements like dark mode.
If you encounter any issues while setting up or using the app, feel free to raise an issue on the GitHub repository, and we will do our best to assist you. Alternatively, you can contact us via email or through social media.
We value your feedback and would love to hear from you! If you have any suggestions, improvements, or bugs to report, please feel free to:
- Open an issue on the [GitHub Issues page].
- Send us an email at [[email protected]].
Your feedback helps us improve the project and provide a better experience for everyone.
This project is licensed under the MIT License.
You are free to use, modify, and distribute the code, but please ensure you follow the terms of the license. See the LICENSE file for more details.
- GitHub Repo
- A fully functional Netflix clone built with React, TypeScript, and Vite. This project features:
- User authentication for secure sign-in and sign-up.
- Profile management for personalized content.
- Movie browsing with detailed information and trailers.
- Search functionality powered by ChatGPT, enabling intelligent recommendations and content discovery.
- Responsive design for a seamless experience across devices.
- Additional features like favorites, video streaming, and more!
- GitHub Repo
- A powerful RESTful API built with Node.js, Express, MongoDB, and TypeScript for managing blog posts, user authentication, and content moderation. Includes features like filtering, pagination, sorting, and full-text search. Easily customizable and scalable for various use cases.
- GitHub Repo
- A modern web application built with React, Vite, and TypeScript, integrated with the Developer Match API. It enables users to register, create and manage their profiles, and connect with other developers based on skills, interests, and technologies.
- GitHub Repo
- A movie discovery app built with React.js, Next.js, TypeScript, and Tailwind CSS, replicating the functionality of TMDB. It allows users to browse, search, and view details of movies and TV shows using TMDB's public API.
Hulu Clone App built with React Js, Next Js, TypeScript, Redux, Tailwind CSS, Vercel Hosting, with complete user authentication
- GitHub Repo
- A clone of Hulu's frontend with features like user authentication, TV show/movie management, and search functionality.
Front-End Mentor Rest Countries API Challenge app built with React Js + Next Js + TypeScript + Tailwind CSS + Vercel Hosting
- GitHub Repo
- An app displaying country data using the Rest Countries API, built with Next.js, React, and TypeScript.
- GitHub Repo
- A Google homepage clone with search functionality and responsive design, built with React, Next.js, and TypeScript.
- GitHub Repo
- A realtor platform clone with property listings, user authentication, and Firebase backend.
- GitHub Repo
- A Twitter clone app with tweet management, user authentication, and real-time updates, built with React and Next.js.
LinkedIn Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting
- GitHub Repo
- A LinkedIn clone with user authentication, profile management, and job posting features, using React and Firebase.
- GitHub Repo
- A clone of Instagram with features like image upload, user authentication, and post interactions built with React and Next.js.
- GitHub Repo
- A Facebook clone with user authentication, post creation, and social interaction features, using React and Redux.
- GitHub Repo
- A real-time messaging app clone with user authentication and message functionality, built with React, Next.js, and Material-UI.
Gmail Clone App built with React Js + Next Js + TypeScript + Styled Components + Material-UI + Firebase Realtime Database + Vercel Hosting
- GitHub Repo
- A Gmail clone with email management, inbox UI, and user authentication, built with React and Firebase.
Signal Clone App built with React Native + TypeScript + Expo + React Navigation + Firebase Realtime Database + User Authentication + Passwordless Authentication with Magic Link
- GitHub Repo
- A Signal clone app with secure messaging, user authentication, and passwordless login using Magic Link, built with React Native.
WhatsApp Clone App built with React Js + React Context API + Styled Components + Material-UI + Firebase Realtime Database + Firebase Hosting
- GitHub Repo
- A WhatsApp clone featuring real-time messaging, user authentication, and Firebase backend, built with React.
- GitHub Repo
- A Slack clone with channel management, real-time messaging, and user authentication, built with React, Next.js, and Firebase.
- GitHub Repo
- A clone of Airbnb with property listings, booking functionality, and responsive design, built with React and Next.js.
- GitHub Repo
- A clone of Amazon's frontend with product listings, cart management, and user authentication, built with React and TypeScript.
Tesla Clone App built with React Js + TypeScript + Redux + Styled Components + Material-UI + Vercel Hosting
- GitHub Repo
- A Tesla clone with car management, user authentication, and an interactive UI, built with React and TypeScript.