https://github.com/saketkothari/streamwave-video-streaming-webapp
Streamwave - Your go-to destination for seamless video streaming and an interactive YouTube-like experience
https://github.com/saketkothari/streamwave-video-streaming-webapp
context-api light-dark-mode live-chat nested-comments optimized-search-engine reactjs redux-toolkit tailwindcss video-streaming-application
Last synced: 6 months ago
JSON representation
Streamwave - Your go-to destination for seamless video streaming and an interactive YouTube-like experience
- Host: GitHub
- URL: https://github.com/saketkothari/streamwave-video-streaming-webapp
- Owner: SaketKothari
- Created: 2023-10-15T05:05:57.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-18T12:20:17.000Z (9 months ago)
- Last Synced: 2025-03-27T06:22:27.970Z (7 months ago)
- Topics: context-api, light-dark-mode, live-chat, nested-comments, optimized-search-engine, reactjs, redux-toolkit, tailwindcss, video-streaming-application
- Language: JavaScript
- Homepage: https://streamwave-sk.vercel.app
- Size: 242 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# streamwave
Streamwave is a video streaming web app akin to YouTube, leveraging the power of React. Viewers can explore a vast library of content, enjoy high-quality streaming, and interact through comments, likes, and subscriptions. The application boasts an intuitive user interface, responsive design, and robust video playback capabilities, delivering an engaging and immersive video-sharing experience.
### [Live Site](https://streamwave-sk.vercel.app/)
#
### Features
- **Embedded YouTube API:** Seamlessly integrated YouTube's API for real-time content updates and an immersive user experience.
- **Dynamic Routing with React Router:** Enabled smooth and seamless navigation without page reloads using `react-router-dom`.
- **Efficient State Management with Redux:** Utilized Redux and Redux Toolkit for synchronized data and UI interactions.
- **Enhanced UX with Debouncing:** Implemented a 200ms debounce for lag-free, lightning-fast interactions.
- **Optimized Caching:** Employed clever caching strategies for faster search results and suggestions.
- **Sleek Design with Tailwind CSS:** A visually stunning, modern design created with Tailwind CSS.
- **Real-time Chat with API Polling:** Engage in real-time conversations without refreshing the page.
- **Nested Comment System:** Join organized, interactive discussions seamlessly.
- **Efficient Live Chat:** Auto-deleting messages after 20 entries to keep the chat streamlined and optimized.
- **Streamlined Navigation:** Easily explore video categories via the left navigation bar.
- **Full Video Playback Controls:** Enjoy video playback with comprehensive controls similar to YouTube.
- **Smart Suggestions:** Receive curated video suggestions while watching content.
- **Seamless Offline Experience:** Stay informed with a user-friendly UI notifying you of internet connection interruptions.
- **Automatic Redirection:** Effortlessly return to your content once the internet connection is restored.
- **Universal Compatibility:** Experience our fully responsive design, ensuring compatibility across all devices.
- **Shimmering UI:** It employs the Shimmer UI effect for subtle yet captivating content loading animations, enhancing user experience and visual appeal.
- **Adaptive Theme Modes:** Offers both Light and Dark mode options that automatically match your browser's theme preference, with a toggle for personalized viewing.
#
### Installation Steps
You need to install the dependencies:
```
npm install
```
### Available Scripts
In the project directory, you can run:
```
npm run dev
```