{"id":21646767,"url":"https://github.com/mk-manishkumar/watchwise","last_synced_at":"2025-12-31T00:10:00.126Z","repository":{"id":263038433,"uuid":"889067017","full_name":"mk-manishkumar/watchwise","owner":"mk-manishkumar","description":"WatchWise is a YouTube video duration analyzer that allows users to paste a YouTube video link and view its duration at various playback speeds. It efficiently fetches video metadata and displays formatted durations in a user-friendly interface.","archived":false,"fork":false,"pushed_at":"2024-12-02T11:32:02.000Z","size":100,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T05:08:03.462Z","etag":null,"topics":["css3","nodeexpress","react","reactjs"],"latest_commit_sha":null,"homepage":"https://watchwise-yt.vercel.app/","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/mk-manishkumar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-11-15T14:47:09.000Z","updated_at":"2024-12-02T11:32:05.000Z","dependencies_parsed_at":"2024-12-02T19:05:27.587Z","dependency_job_id":null,"html_url":"https://github.com/mk-manishkumar/watchwise","commit_stats":null,"previous_names":["mk-manishkumar/watchwise"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mk-manishkumar%2Fwatchwise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mk-manishkumar%2Fwatchwise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mk-manishkumar%2Fwatchwise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mk-manishkumar%2Fwatchwise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mk-manishkumar","download_url":"https://codeload.github.com/mk-manishkumar/watchwise/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244530996,"owners_count":20467388,"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":["css3","nodeexpress","react","reactjs"],"created_at":"2024-11-25T06:46:40.808Z","updated_at":"2025-12-31T00:10:00.114Z","avatar_url":"https://github.com/mk-manishkumar.png","language":"JavaScript","readme":"# **Watchwise**\n\n**WatchWise** is a YouTube video duration analyzer that allows users to paste a YouTube video link and view its duration at various playback speeds. It efficiently fetches video metadata and displays formatted durations in a user-friendly interface.\n\n\n---\n\n## **Deployment**\n\nThis project is deployed on and `Vercel` . [Click here](https://watchwise-yt.vercel.app) for live project.\n\n## **Technologies Used**\n\n### **Frontend**\n- **React**\n- **Tailwind CSS**\n\n### **Backend**\n- **Node.js + Express**\n- **YouTube Data API**\n\n---\n\n## **Project Structure**\n```plaintext\nwatchwise/\n├── api/                          # Backend folder\n│   ├── .env                      # Backend environment variables\n│   ├── .env.sample               # Sample backend env file\n│   ├── .gitignore                # Git ignored files for backend\n│   ├── package.json              # Backend dependencies and scripts\n│   ├── package-lock.json         # Backend lockfile\n│   ├── server.js                 # Express backend entry point\n│   └── vercel.json               # Vercel backend config\n│\n├── ui/                           # Frontend folder\n│   ├── src/                      # React source files\n│   │   ├── assets/               # Static assets (images, etc.)\n│   │   ├── components/           # React components\n│   │   ├── App.jsx               # Main App component\n│   │   ├── App.css               # App-specific styles\n│   │   ├── index.css             # Global styles\n│   │   └── main.jsx              # Entry point for React\n│   ├── .env                      # Frontend environment variables\n│   ├── .env.sample               # Sample frontend env file\n│   ├── .gitignore                # Git ignored files for frontend\n│   ├── eslint.config.js          # ESLint configuration\n│   ├── index.html                # HTML template\n│   ├── package.json              # Frontend dependencies and scripts\n│   ├── package-lock.json         # Frontend lockfile\n│   └── vite.config.js            # Vite configuration\n\n```\n\n---\n\n## **Getting Started**\n\n### **1. Prerequisites**\nEnsure the following software is installed on your machine:\n- **Node.js** (v16+ recommended)\n- **npm** (or **yarn**)\n\n### **2. Installation**\nClone the repository:\n```bash\ngit clone https://github.com/your-username/watchwise.git\ncd watchwise\n```\n\nInstall dependencies:\n```bash\n# Backend dependencies\nnpm install\n\n# Frontend dependencies\ncd client\nnpm install\n```\n\n---\n\n## **Environment Variables**\nCreate `.env` files for both the backend and frontend based on the provided `.env.sample`.  \n\n### Backend `.env` example:\n```env\nPORT=5000 (example)\nYOUTUBE_API_KEY=\"\"\nALLOWED_ORIGIN=\"\"\n```\n\n### Frontend `.env` example (`client/.env`):\n```env\nVITE_API_BASE_URL=\"\"\n```\n\n---\n\n## **Running the Application**\n\n### **1. Backend**\nStart the backend server:\n```bash\nnpm run dev\n```\nThe backend will run on `http://localhost:5000`.\n\n### **2. Frontend**\nStart the frontend development server:\n```bash\ncd client\nnpm run dev\n```\nThe frontend will run on `http://localhost:5173`.\n\n---\n\n## **API Endpoints**\n| **Method** | **Endpoint**              | **Description**             |\n| ---------- | ------------------------- | --------------------------- |\n| `GET`      | `/api/video-details?url=` | Fetch YouTube video details |\n\n**Example:**\n```bash\nGET http://localhost:5000/api/video-details?url=https://www.youtube.com/watch?v=exampleID\n```\n\n---\n\n## **Error Handling**\n- **Invalid URL**: Ensures that only valid YouTube URLs are processed.\n\n\n---\n\n\n---\n\n## **Contributing**\nContributions are welcome! Follow these steps:\n1. Fork the repository.\n2. Create a new branch:\n   ```bash\n   git checkout -b feature-name\n   ```\n3. Commit your changes:\n   ```bash\n   git commit -m \"Added feature-name\"\n   ```\n4. Push your branch:\n   ```bash\n   git push origin feature-name\n   ```\n5. Open a pull request.\n\n---\n\n## **License**\nThis project is licensed under the **MIT License**. See `LICENSE` for more details.\n\n---\n\n## **Contact**\n\nIf you have any queries mail me at `manish.login01@gmail.com` or ping me on [Twitter/X](https://x.com/_manishmk).","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmk-manishkumar%2Fwatchwise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmk-manishkumar%2Fwatchwise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmk-manishkumar%2Fwatchwise/lists"}