{"id":28752338,"url":"https://github.com/awalhossainofficial/video-streaming-client","last_synced_at":"2026-03-07T18:31:19.451Z","repository":{"id":199427544,"uuid":"702808816","full_name":"awalhossainofficial/video-streaming-client","owner":"awalhossainofficial","description":"MERN Video Streaming Platform is a user-friendly interface for video upload and playback.","archived":false,"fork":false,"pushed_at":"2025-04-13T17:01:32.000Z","size":2272,"stargazers_count":9,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"newone","last_synced_at":"2025-06-16T23:39:21.614Z","etag":null,"topics":["draggable","formik","hls-stream","mui-material","react-player","reactjs","rtk-query","socket-io","yup"],"latest_commit_sha":null,"homepage":"https://reely.tech","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/awalhossainofficial.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-10T04:03:44.000Z","updated_at":"2025-05-15T06:13:16.000Z","dependencies_parsed_at":"2024-01-06T07:26:28.933Z","dependency_job_id":"354d8699-d8fd-479c-a1e0-6d09c251bbe3","html_url":"https://github.com/awalhossainofficial/video-streaming-client","commit_stats":null,"previous_names":["awalhossain/video_streaming_server","awalhossain/video-streaming-client","awalhossainofficial/video-streaming-client"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/awalhossainofficial/video-streaming-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awalhossainofficial%2Fvideo-streaming-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awalhossainofficial%2Fvideo-streaming-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awalhossainofficial%2Fvideo-streaming-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awalhossainofficial%2Fvideo-streaming-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/awalhossainofficial","download_url":"https://codeload.github.com/awalhossainofficial/video-streaming-client/tar.gz/refs/heads/newone","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awalhossainofficial%2Fvideo-streaming-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30226246,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T18:12:09.766Z","status":"ssl_error","status_checked_at":"2026-03-07T18:11:58.786Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["draggable","formik","hls-stream","mui-material","react-player","reactjs","rtk-query","socket-io","yup"],"created_at":"2025-06-16T23:33:50.469Z","updated_at":"2026-03-07T18:31:19.395Z","avatar_url":"https://github.com/awalhossainofficial.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎬 React Video Streaming Client 📺 (Work in Progress!)\r\n\r\n[![React](https://img.shields.io/badge/React-18.2.0-61DAFB?logo=react)](https://reactjs.org/) [![Vite](https://img.shields.io/badge/Vite-5.4-646CFF?logo=vite)](https://vitejs.dev/) [![MUI](https://img.shields.io/badge/MUI-5.15-007FFF?logo=mui)](https://mui.com/) [![Redux Toolkit](https://img.shields.io/badge/Redux_Toolkit-2.1-764ABC?logo=redux)](https://redux-toolkit.js.org/) [![Socket.IO](https://img.shields.io/badge/Socket.IO-4.7-010101?logo=socketdotio)](https://socket.io/)\r\n\r\nThis repository contains the frontend client for the Video Streaming Platform, built with **React**, **Vite**, and **Material UI (MUI)**. It provides the user interface for interacting with the backend services, allowing users to upload, browse, and watch videos seamlessly.\r\n\r\n**➡️ Check out the Backend Code:** [video-streaming-server](https://github.com/AwalHossain/video-streaming-server)\r\n\r\n## 🖼️ System Architecture \u0026 Flow\r\n\r\nVisualizing how the frontend fits into the larger system:\r\n\r\n**Overall Architecture:**\r\n![System Architecture](./Architecture.png)\r\n\r\n**Upload \u0026 Streaming Sequence:**\r\n![Streaming Sequence Diagram](./stream-diagram.png)\r\n\r\n*(Ensure `architecture.png` and `stream-diagram.png` are present in the root directory)*\r\n\r\n## ✨ Frontend Key Features\r\n\r\nThis client application leverages modern frontend technologies to deliver a rich user experience:\r\n\r\n*   **⚡ Blazing Fast Development \u0026 Builds:** Uses **Vite** for near-instant Hot Module Replacement (HMR) and optimized production builds.\r\n*   **🎨 Modern \u0026 Responsive UI:** Crafted with **React** and **Material UI (MUI)**, providing a sleek, intuitive, and adaptable interface across devices. Includes custom theming (`src/theme`).\r\n*   **▶️ Smooth Video Playback:** Integrates robust video players like **Vidstack**, **React Player**, and potentially **HLS.js/Plyr** to handle efficient streaming (including HLS adaptive bitrate streaming served by the backend).\r\n*   **🔄 Real-time Updates:** Uses **Socket.IO Client** (`src/redux/features/socket/socketApi.js`) to connect with the API Gateway's WebSocket, enabling features like:\r\n    *   Live video processing progress updates.\r\n    *   Real-time notifications (e.g., upload complete).\r\n*   **💾 Efficient State Management:** Leverages **Redux Toolkit** (`src/redux`) for predictable and centralized application state. Includes:\r\n    *   **RTK Query (`apiSlice.js`):** Simplifies data fetching, caching, and synchronization with the backend API, reducing boilerplate.\r\n*   **🧭 Seamless Navigation:** Implements client-side routing using **React Router DOM v6** (`src/routes.jsx`), allowing users to navigate between pages without full page reloads.\r\n*   **☁️ Direct Cloud Upload:** Communicates with the API Gateway to obtain pre-signed URLs, enabling direct-to-cloud storage uploads for better performance and scalability (as shown in the sequence diagram).\r\n*   **🎣 Custom Hooks (`src/hooks`):** Encapsulates reusable logic (e.g., interacting with APIs, managing component state) for cleaner code.\r\n*   **📄 Form Handling:** Likely utilizes libraries like **Formik** or **React Hook Form** (both listed in `package.json`) along with **Yup** for robust form creation and validation (e.g., search, login/signup, video metadata input).\r\n*   **📈 API Communication:** Uses **Axios** for making HTTP requests to the backend API Gateway.\r\n*   **Infinite Scrolling:** Implements infinite scrolling (`react-infinite-scroll-component`) for efficiently loading lists of videos or other content.\r\n*   **✨ Code Quality:** Enforced using **ESLint** and **Prettier** for consistent and clean code.\r\n\r\n## 🛠️ Frontend Tech Stack\r\n\r\n*   **Framework/Library:** React 18\r\n*   **Build Tool:** Vite\r\n*   **UI:** Material UI (MUI) v5, Emotion\r\n*   **State Management:** Redux Toolkit (including RTK Query)\r\n*   **Routing:** React Router DOM v6\r\n*   **HTTP Client:** Axios\r\n*   **Real-time:** Socket.IO Client\r\n*   **Video Playback:** Vidstack, React Player, HLS.js (potentially)\r\n*   **Forms:** Formik / React Hook Form, Yup\r\n*   **Utilities:** Lodash, date-fns, simplebar-react\r\n*   **Linting/Formatting:** ESLint, Prettier\r\n*   **Development:** TypeScript (type definitions present), JavaScript (JSX)\r\n\r\n## 🚀 Getting Started\r\n\r\nTo run the frontend client locally:\r\n\r\n**1. Prerequisites:**\r\n\r\n*   **Node.js:** Version 18 or higher (`node -v`)\r\n*   **Yarn:** (`yarn -v`) or npm (`npm -v`) - Yarn is used in `package.json` scripts.\r\n*   **Git:** (`git --version`)\r\n*   **(Optional but Recommended):** Running Backend Services (API Gateway, etc.). See the [backend README](https://github.com/AwalHossain/video-streaming-server) for instructions.\r\n\r\n**2. Clone the Repository:**\r\n\r\n```bash\r\ngit clone https://github.com/AwalHossain/video-streaming-client.git\r\ncd video-streaming-client\r\n```\r\n\r\n**3. Install Dependencies:**\r\n\r\n```bash\r\nyarn install\r\n# OR if you prefer npm:\r\n# npm install\r\n```\r\n\r\n**4. Configure Environment Variables:**\r\n\r\n*   Create a `.env` file in the root directory (copy `.env.example` if it exists).\r\n*   Add necessary environment variables, especially the URL for the backend API Gateway:\r\n    ```env\r\n    VITE_API_BASE_URL=http://localhost:8000 # Or your actual API Gateway URL\r\n    # Add other variables like WebSocket URL if needed\r\n    ```\r\n    *(Note: Vite requires variables exposed to the client to be prefixed with `VITE_`)*\r\n\r\n**5. Run the Development Server:**\r\n\r\n```bash\r\nyarn dev\r\n# OR\r\n# npm run dev\r\n```\r\n\r\n*   This will start the Vite development server.\r\n*   Open your browser to the local URL provided (usually `http://localhost:5173` or `http://localhost:3000` - check the terminal output).\r\n*   The app will automatically reload when you make changes.\r\n\r\n**6. Build for Production:**\r\n\r\n```bash\r\nyarn build\r\n# OR\r\n# npm run build\r\n```\r\n\r\n*   This creates an optimized production build in the `dist` (or `build`) directory.\r\n\r\n**7. Preview Production Build:**\r\n\r\n```bash\r\nyarn preview\r\n# OR\r\n# npm run preview\r\n```\r\n\r\n*   This command serves the production build locally for testing.\r\n\r\n## 📁 Folder Structure\r\n\r\nA brief overview of the `src` directory:\r\n\r\n```\r\n/src\r\n|-- assets/       # Static files (images, fonts, etc.)\r\n|-- components/   # Small, reusable UI components\r\n|-- contexts/     # React Context API providers (if used)\r\n|-- helpers/      # Standalone helper functions\r\n|-- hooks/        # Custom React Hooks (reusable logic)\r\n|-- layouts/      # Structural components (e.g., MainLayout, DashboardLayout)\r\n|-- _mock/        # Mock data for development/testing (if used)\r\n|-- pages/        # Components representing application pages/views\r\n|-- redux/        # Redux Toolkit setup (store, slices, API slices)\r\n|   |-- app/      # Store configuration\r\n|   |-- features/ # Feature-based slices (e.g., auth, video, apiSlice, socketApi)\r\n|-- routes/       # Route configuration (using React Router)\r\n|-- sections/     # Larger UI sections composed of multiple components (page-specific)\r\n|-- theme/        # MUI theme customization (palette, typography, overrides)\r\n|-- utils/        # General utility functions\r\n|-- App.jsx       # Root application component, sets up routing/providers\r\n|-- main.jsx      # Application entry point (renders App into the DOM)\r\n|-- index.css     # Global CSS styles\r\n```\r\n\r\n## 📝 Project Status\r\n\r\nThis project is actively **under development**. Features and code are subject to change.\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! Please follow standard Git workflow (Fork, Branch, Commit, Push, Pull Request). Adhere to the existing code style enforced by ESLint/Prettier.\r\n\r\n## 📜 License\r\n\r\nDistributed under the MIT License. See `LICENSE` file for more information (if available).\r\n\r\n## 📧 Contact\r\n\r\nYour Name / Project Maintainer - awalhossainofficial@gmail.com\r\n\r\nProject Link: [https://github.com/AwalHossain/video-streaming-client](https://github.com/AwalHossain/video-streaming-client)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawalhossainofficial%2Fvideo-streaming-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fawalhossainofficial%2Fvideo-streaming-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawalhossainofficial%2Fvideo-streaming-client/lists"}