{"id":22383393,"url":"https://github.com/anas727189/mediahub","last_synced_at":"2026-04-09T17:09:54.133Z","repository":{"id":259950561,"uuid":"870130896","full_name":"ANAS727189/MediaHub","owner":"ANAS727189","description":"MediaHub is a robust platform designed for video streaming, media editing, and user management. It combines seamless streaming capabilities with a powerful media editor, responsive design, and secure user authentication, offering a smooth experience across devices.","archived":false,"fork":false,"pushed_at":"2025-02-11T13:58:18.000Z","size":81851,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T20:16:51.411Z","etag":null,"topics":["clerk-auth","cloudinary","cloudinary-react","express","ffmpeg","headless-ui","lucide-react","multer","nodejs","reactjs","sharp","tailwindcss","toastify","video-streaming","videojs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ANAS727189.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-10-09T13:51:19.000Z","updated_at":"2025-02-11T13:58:21.000Z","dependencies_parsed_at":"2025-02-11T14:46:13.522Z","dependency_job_id":null,"html_url":"https://github.com/ANAS727189/MediaHub","commit_stats":null,"previous_names":["anas727189/mediahub"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ANAS727189%2FMediaHub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ANAS727189%2FMediaHub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ANAS727189%2FMediaHub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ANAS727189%2FMediaHub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ANAS727189","download_url":"https://codeload.github.com/ANAS727189/MediaHub/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245727722,"owners_count":20662557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["clerk-auth","cloudinary","cloudinary-react","express","ffmpeg","headless-ui","lucide-react","multer","nodejs","reactjs","sharp","tailwindcss","toastify","video-streaming","videojs"],"created_at":"2024-12-05T01:13:27.176Z","updated_at":"2025-12-30T20:33:12.900Z","avatar_url":"https://github.com/ANAS727189.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🎥 MediaHub\n[![React](https://img.shields.io/badge/React-20232A?style=flat\u0026logo=react\u0026logoColor=61DAFB)](https://reactjs.org/)\n[![Node.js](https://img.shields.io/badge/Node.js-43853D?style=flat\u0026logo=node.js\u0026logoColor=white)](https://nodejs.org/)\n[![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?style=flat\u0026logo=mongodb\u0026logoColor=white)](https://www.mongodb.com/)\n[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=flat\u0026logo=tailwind-css\u0026logoColor=white)](https://tailwindcss.com/)\n[![Cloudinary](https://img.shields.io/badge/Cloudinary-3448C5?style=flat\u0026logo=cloudinary\u0026logoColor=white)](https://cloudinary.com/)\n[![FFmpeg](https://img.shields.io/badge/FFmpeg-007808?style=flat\u0026logo=ffmpeg\u0026logoColor=white)](https://ffmpeg.org/)\n\n🚀 **A comprehensive platform for video streaming, media editing, and content management**\n\n\u003c/div\u003e\n\n---\n\n## 🌟 Features\n\n### 🎬 **Video Streaming \u0026 Management**\n- 📹 **HLS Video Streaming** - Upload and stream videos with adaptive bitrate\n- 🖼️ **Smart Thumbnails** - Auto-generated thumbnails with FFmpeg\n- 📊 **View Analytics** - Real-time view tracking and engagement metrics\n- 🎯 **Video Gallery** - Professional grid and list views with search/filter\n- ⏱️ **Duration Detection** - Automatic video length extraction and display\n\n### 🖼️ **Professional Media Editor**\n- **🖼️ Image Tools:**\n  - ✂️ **Smart Crop** - Interactive cropping with aspect ratio controls\n  - 📏 **Resize** - Intelligent resizing with quality preservation\n  - 🎨 **Effects** - Filters, brightness, contrast, saturation adjustments\n  - 🗜️ **Compression** - Advanced compression with quality controls\n  - 🔄 **Rotation** - Precise rotation and flip operations\n\n- **🎥 Video Tools:**\n  - ✂️ **Video Trimming** - Precise timeline-based video cutting\n  - 🎬 **Video Effects** - Color grading, filters, and visual enhancements\n  - � **Audio Management** - Audio track editing and replacement\n\n- **🔄 Format Conversion:**\n  - 🖼️ **Image Formats** - Support for JPG, PNG, WebP, AVIF, GIF, TIFF, BMP, ICO\n  - 🎥 **Video Formats** - MP4, WebM, AVI, MOV, MKV, FLV, OGV conversion\n  - ⚙️ **Quality Control** - Customizable compression and optimization settings\n\n### 🔐 **Authentication \u0026 User Management**\n- 🔒 **Secure Authentication** - Powered by Clerk with multiple sign-in options\n- 👤 **User Profiles** - Personalized user experiences and content management\n- �️ **Protected Routes** - Role-based access control for sensitive features\n\n### 🎨 **User Interface \u0026 Experience**\n- 📱 **Fully Responsive** - Optimized for desktop, tablet, and mobile devices\n- 🌓 **Dark/Light Mode** - System-aware theme switching with user preferences\n- ⚡ **Modern UI** - Built with Tailwind CSS and Lucide React icons\n- � **Interactive Components** - Smooth animations and hover effects\n- 🎯 **Intuitive Navigation** - Clean, accessible interface design\n\n### 🛠️ **Developer Experience**\n- 🔥 **Hot Module Replacement** - Lightning-fast development with Vite\n- 📚 **Comprehensive Documentation** - Built-in docs with interactive examples\n- 🐛 **Error Handling** - Robust error boundaries and user feedback\n- 📊 **Performance Optimized** - Code splitting and lazy loading\n\n## 🚀 Quick Start\n\n### 📋 Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- **Node.js** (v18 or later) - [Download here](https://nodejs.org/)\n- **npm** or **yarn** package manager\n- **MongoDB** (v5.0 or later) - [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) or local installation\n- **FFmpeg** - Required for video processing ([Download here](https://ffmpeg.org/download.html))\n\n### ⚡ Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/ANAS727189/MediaHub.git\n   cd MediaHub\n   ```\n\n2. **Install dependencies for both client and server**\n   ```bash\n   # Install client dependencies\n   cd client\n   npm install\n\n   # Install server dependencies\n   cd ../server\n   npm install\n   ```\n\n3. **Environment Configuration**\n   \n   **Client Environment Variables** (create `client/.env`):\n   ```env\n   VITE_BACKEND_URI=http://localhost:8000\n   VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key\n   ```\n\n   **Server Environment Variables** (create `server/.env`):\n   ```env\n   PORT=8000\n   DATABASE_URI=mongodb://localhost:27017/mediahub\n   CLIENT_URI=http://localhost:5173\n   ```\n\n4. **Start the development servers**\n   ```bash\n   # Terminal 1 - Start the backend server\n   cd server\n   npm start\n\n   # Terminal 2 - Start the frontend client  \n   cd client\n   npm run dev\n   ```\n\n5. **Access the application**\n   - Frontend: [http://localhost:5173](http://localhost:5173)\n   - Backend API: [http://localhost:8000](http://localhost:8000)\n\n## � Documentation\n\n### 🎯 Core Features\n\n| Feature | Description | Status |\n|---------|-------------|--------|\n| 🏠 **Landing Page** | Modern hero section with feature showcase | ✅ Complete |\n| 📺 **Video Streaming** | HLS streaming with professional video player | ✅ Complete |\n| 🖼️ **Media Editor** | Comprehensive image and video editing tools | ✅ Complete |\n| 🔄 **Format Conversion** | Multi-format image and video conversion | ✅ Complete |\n| � **Documentation** | Interactive documentation with examples | ✅ Complete |\n| 🔐 **Authentication** | Secure user management with Clerk | ✅ Complete |\n\n### 🎨 Media Editor Tools\n\n#### Image Editing Tools\n- **Resize Tool** - Intelligent resizing with aspect ratio preservation\n- **Crop Tool** - Interactive cropping with preset ratios\n- **Effects Tool** - Brightness, contrast, saturation, and filter adjustments\n- **Compression Tool** - Smart compression with quality control\n- **Rotation Tool** - Precise rotation and flip operations\n\n#### Video Editing Tools  \n- **Trim Tool** - Timeline-based video trimming and cutting\n- **Effects Tool** - Color grading and visual enhancements\n- **Audio Tool** - Audio track management and replacement\n\n#### Format Conversion\n- **Image Formats**: JPG, PNG, WebP, AVIF, GIF, TIFF, BMP, ICO\n- **Video Formats**: MP4, WebM, AVI, MOV, MKV, FLV, OGV\n- **Quality Control**: Customizable compression and optimization\n\n### 🛠️ API Documentation\n\n#### Video Management Endpoints\n\n```javascript\n// Get all videos\nGET /api/videos\nResponse: Array of video objects with metadata\n\n// Get specific video  \nGET /api/videos/:id\nResponse: Video object with full details\n\n// Upload new video\nPOST /api/upload\nBody: FormData with video file\nResponse: Uploaded video with HLS segments\n\n// Increment view count\nPOST /api/videos/:id/view  \nResponse: Updated video with new view count\n```\n\n#### Video Object Structure\n\n```javascript\n{\n  _id: \"unique_video_id\",\n  title: \"Video Title\", \n  description: \"Video Description\",\n  videoPath: \"/uploads/videos/uuid/index.m3u8\",\n  thumbnailPath: \"/uploads/videos/uuid/thumbnail.jpg\",\n  duration: \"5:23\", // MM:SS format\n  views: 1250, // Real-time view count\n  uploadDate: \"2025-01-01T00:00:00.000Z\",\n  metadata: {\n    width: 1920,\n    height: 1080, \n    fileSize: 15728640, // bytes\n    bitrate: 2500000 // bits per second\n  }\n}\n```\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **⚛️ React 18** - Modern React with hooks and concurrent features\n- **🛣️ React Router** - Client-side routing and navigation\n- **🎨 Tailwind CSS** - Utility-first CSS framework for rapid UI development\n- **⚡ Vite** - Lightning-fast build tool and dev server\n- **🌟 Lucide React** - Beautiful, customizable icons\n- **🖼️ React Image Crop** - Interactive image cropping component\n- **🎬 Video.js** - Professional HTML5 video player\n- **📱 React Toastify** - Elegant notification system\n\n### Backend\n- **🟢 Node.js** - JavaScript runtime for server-side development\n- **🚀 Express.js** - Fast, unopinionated web framework\n- **🍃 MongoDB** - NoSQL database for flexible data storage\n- **🍃 Mongoose** - MongoDB object modeling for Node.js\n- **📤 Multer** - Multipart/form-data handling for file uploads\n- **🎥 FFmpeg** - Video processing and conversion\n- **🖼️ Sharp** - High-performance image processing\n- **☁️ Cloudinary** - Cloud-based image and video management\n\n### Authentication \u0026 Security\n- **🔐 Clerk** - Complete user management and authentication\n- **🛡️ CORS** - Cross-origin resource sharing security\n- **🔒 Private Routes** - Protected route components\n\n### Development \u0026 Deployment\n- **📦 npm/yarn** - Package management\n- **🔄 Hot Module Replacement** - Instant development feedback\n- **🐳 Docker** - Containerization support\n- **☁️ Render** - Cloud deployment platform\n\n### Database Schema\n\n```javascript\n// Video Schema\nconst videoSchema = {\n  title: String,\n  description: String,\n  videoPath: String,        // HLS playlist path\n  thumbnailPath: String,    // Auto-generated thumbnail\n  uploaderId: String,       // Clerk user ID\n  uploadDate: Date,         // Auto-generated timestamp\n  duration: String,         // MM:SS format from FFprobe\n  views: Number,            // Real-time view tracking\n  metadata: {\n    width: Number,          // Video resolution width\n    height: Number,         // Video resolution height  \n    fileSize: Number,       // File size in bytes\n    bitrate: Number         // Bitrate in bits/second\n  }\n}\n```\n\n## 🔧 Configuration\n\n### Required Services Setup\n\n#### 1. MongoDB Setup\n```bash\n# Local MongoDB (recommended for development)\nbrew install mongodb/brew/mongodb-community\nbrew services start mongodb/brew/mongodb-community\n\n# Or use MongoDB Atlas (recommended for production)\n# Sign up at https://www.mongodb.com/cloud/atlas\n```\n\n#### 2. Cloudinary Setup\n```bash\n# Sign up at https://cloudinary.com\n# Get your credentials from the dashboard\n# Add to your .env files\n```\n\n#### 3. Clerk Authentication Setup\n```bash\n# Sign up at https://clerk.dev\n# Create a new application\n# Get your publishable key from the dashboard\n```\n\n#### 4. FFmpeg Installation\n```bash\n# macOS\nbrew install ffmpeg\n\n# Ubuntu/Debian\nsudo apt update \u0026\u0026 sudo apt install ffmpeg\n\n# Windows\n# Download from https://ffmpeg.org/download.html\n```\n\n### 🚀 Deployment\n\n#### Deploy to Render (Recommended)\n\n1. **Backend Deployment**\n   ```bash\n   # Push code to GitHub\n   # Connect Render to your GitHub repository\n   # Set environment variables in Render dashboard\n   # Deploy from server/ directory\n   ```\n\n2. **Frontend Deployment**  \n   ```bash\n   # Build the client\n   cd client \u0026\u0026 npm run build\n   \n   # Deploy to Render static site\n   # Or use Vercel, Netlify for frontend hosting\n   ```\n\n#### Environment Variables for Production\n```env\n# Server Production Variables\nNODE_ENV=production\nPORT=10000\nDATABASE_URI=mongodb+srv://username:password@cluster.mongodb.net/mediahub\nCLIENT_URI=https://your-frontend-domain.com\n\n# Client Production Variables  \nVITE_BACKEND_URI=https://your-backend-domain.com\nVITE_CLERK_PUBLISHABLE_KEY=pk_live_your_clerk_key\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help improve MediaHub:\n\n### 🐛 Bug Reports\n1. Check existing [issues](https://github.com/ANAS727189/MediaHub/issues)\n2. Create a new issue with detailed reproduction steps\n3. Include screenshots/videos if applicable\n\n### 💡 Feature Requests\n1. Check [discussions](https://github.com/ANAS727189/MediaHub/discussions) for existing requests\n2. Create a detailed feature request with use cases\n3. Consider contributing the implementation\n\n### 🔧 Code Contributions\n1. **Fork the repository**\n   ```bash\n   git clone https://github.com/your-username/MediaHub.git\n   cd MediaHub\n   ```\n\n2. **Create a feature branch**\n   ```bash\n   git checkout -b feature/amazing-feature\n   ```\n\n3. **Make your changes**\n   - Follow existing code style and conventions\n   - Add comments for complex logic\n   - Update documentation if needed\n\n4. **Test your changes**\n   ```bash\n   # Run client tests\n   cd client \u0026\u0026 npm run lint\n   \n   # Test server functionality\n   cd server \u0026\u0026 npm start\n   ```\n\n5. **Commit and push**\n   ```bash\n   git commit -m \"feat: add amazing new feature\"\n   git push origin feature/amazing-feature\n   ```\n\n6. **Open a Pull Request**\n   - Provide clear description of changes\n   - Include screenshots/GIFs for UI changes\n   - Reference related issues\n\n### 📝 Documentation\n- Help improve README, code comments, and documentation\n- Create tutorials or example projects\n- Report documentation bugs or inconsistencies\n\n### 🎨 Design Contributions\n- UI/UX improvements and suggestions\n- Icon and graphic contributions\n- Accessibility enhancements\n\n\u003cdiv align=\"center\"\u003e\n\n**🌍 Live Demo**: [https://media-hub-xi.vercel.app](https://media-hub-xi.vercel.app)\n\n**Made with ❤️ by [Anas](https://github.com/ANAS727189)**\n\n[⬆ Back to Top](#mediahub) | [🌟 Give it a Star!](https://github.com/ANAS727189/MediaHub)\n\n**If you found this project helpful, please consider giving it a ⭐!**\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanas727189%2Fmediahub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanas727189%2Fmediahub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanas727189%2Fmediahub/lists"}