https://github.com/akhil07-ctrl/youtube-clone
This project is a YouTube-like video streaming app built with React + Vite. It features authentication, protected routes, theme switching (dark/light mode), and functionalities like saving, liking, and disliking videos using global state via React Context. The app includes pages like Home, Trending, Gaming, Saved Videos, and individual Video view.
https://github.com/akhil07-ctrl/youtube-clone
js-cookie protected-route react-context react-hooks react-icons react-router-dom reactjs-popup styled-components
Last synced: 15 days ago
JSON representation
This project is a YouTube-like video streaming app built with React + Vite. It features authentication, protected routes, theme switching (dark/light mode), and functionalities like saving, liking, and disliking videos using global state via React Context. The app includes pages like Home, Trending, Gaming, Saved Videos, and individual Video view.
- Host: GitHub
- URL: https://github.com/akhil07-ctrl/youtube-clone
- Owner: Akhil07-ctrl
- Created: 2025-04-06T12:05:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-02T06:04:39.000Z (12 months ago)
- Last Synced: 2025-07-11T20:41:49.065Z (11 months ago)
- Topics: js-cookie, protected-route, react-context, react-hooks, react-icons, react-router-dom, reactjs-popup, styled-components
- Language: JavaScript
- Homepage: https://akhil07-ctrl.github.io/Youtube-Clone/
- Size: 355 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nxt Watch - YouTube Clone
A modern YouTube clone application built with React and Vite, featuring video streaming, user authentication, and a responsive design with dark/light theme support.
## 🚀 Live Demo
Check out the live demo: [Nxt Watch](https://akhil07-ctrl.github.io/Youtube-Clone/login)
## ✨ Features
- **User Authentication**: Secure login system with protected routes
- **Video Streaming**: Watch videos with React Player integration
- **Multiple Sections**:
- Home: Browse all videos
- Trending: Discover popular content
- Gaming: Gaming-specific videos
- Saved Videos: Personal video collection
- **Interactive Features**:
- Like/Dislike videos
- Save videos for later
- Search functionality
- **Theme Support**: Toggle between light and dark themes
- **Responsive Design**: Optimized for all device sizes
- **Ad Banner**: Dismissible promotional banner
## 🛠️ Tech Stack
- **Frontend**: React 19, React Router DOM
- **Styling**: Styled Components, CSS
- **Build Tool**: Vite
- **HTTP Client**: Axios
- **Video Player**: React Player
- **Icons**: React Icons
- **Popup**: ReactJS Popup
- **Date Handling**: date-fns
- **Cookies**: js-cookie
- **Deployment**: GitHub Pages
## 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/Akhil07-ctrl/Youtube-Clone.git
cd Youtube-Clone/client
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. Open your browser and navigate to `http://localhost:5173`
## 🏗️ Available Scripts
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run lint` - Run ESLint
- `npm run deploy` - Deploy to GitHub Pages
## 📁 Project Structure
```
client/
├── public/
│ ├── 404.html
│ └── vite.svg
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── FailureView/
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── GameItemCard/
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── Gaming/
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── Header/
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── Home/
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── HomeVideoItemCard/
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── Loader/
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── Login/
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── NavigationMenu/
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── NavigationMenuContainer/
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── NotFound/
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── ProtectedRoute/
│ │ │ └── index.jsx
│ │ ├── SavedVideoItemCard/
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── SavedVideos/
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── Trending/
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ ├── TrendingVideoItemCard/
│ │ │ ├── index.css
│ │ │ ├── index.jsx
│ │ │ └── styledComponents.js
│ │ └── Video/
│ │ ├── index.css
│ │ ├── index.jsx
│ │ └── styledComponents.js
│ ├── context/
│ │ └── NxtWatchContext.jsx
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── README.md
└── vite.config.js
```
## 🎯 Key Components
- **App.jsx**: Main application component with routing and state management
- **Header**: Navigation bar with search and theme toggle
- **Home**: Main video feed
- **Trending**: Popular videos section
- **Gaming**: Gaming videos collection
- **SavedVideos**: User's saved video collection
- **Video**: Individual video player page
- **Login**: Authentication component
## 🔧 Configuration
The application uses:
- **Vite** for fast development and building
- **ESLint** for code quality
- **React Router** for client-side routing
- **Context API** for state management
- **Styled Components** for component styling
## 🌐 Deployment
The application is configured for deployment on GitHub Pages. Use the following command to deploy:
```bash
npm run deploy
```
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📄 License
This project is open source and available under the [MIT License](LICENSE).
## 🧑💻 Developer
- **Kundena Akhil** - [Portfolio](https://portfolio-nine-flax-29.vercel.app/) - [GitHub](https://github.com/Akhil07-ctrl) - [LinkedIn](https://www.linkedin.com/in/kundena-akhil-4b7073170/)
---
Built with ❤️ using React and Vite