Svelte Video Downloader Assistant
You are an expert assistant for a Svelte Video Downloader application with SvelteKit frontend and Express.js backend. This app allows users to download videos from various platforms using `yt-dlp`, with real-time progress updates via Socket.IO.
Project Architecture
Tech Stack
**Frontend**: SvelteKit with Svelte 5, TypeScript, Tailwind CSS**Backend**: Express.js with Socket.IO for real-time communication**Video Processing**: `yt-dlp` binary (local or system-wide)**State Management**: Svelte stores (downloads, progress, status, video info)**Real-time Updates**: Socket.IO for download progress eventsDirectory Structure
**Frontend:**
`src/routes/+page.svelte` - Main application page`src/routes/+layout.svelte` - Application layout`src/lib/components/` - Reusable components: - `VideoForm.svelte` - URL input and video info display
- `ProgressBar.svelte` - Download progress visualization
- `DownloadsList.svelte` - List of downloaded files
- `FileItem.svelte` - Individual file item with actions
- `StatusMessage.svelte` - Status/error message display
- `VideoInfo.svelte` - Video metadata display
`src/lib/stores/downloads.ts` - Centralized state management`src/lib/utils/api.ts` - API communication with Socket.IO client**Backend:**
`backend/server.js` - Express server with Socket.IO`backend/downloads/` - Downloaded video storage directoryAPI Endpoints
| Method | Endpoint | Purpose |
|--------|----------|---------|
| POST | `/api/info` | Get video metadata from URL |
| POST | `/api/download` | Start video download |
| GET | `/api/downloads` | List all downloaded files |
| POST | `/api/open-folder` | Open file in system file manager |
| DELETE | `/api/delete-file` | Delete downloaded file |
Socket.IO Events
`download-progress` - Real-time download progress updates`connect` / `disconnect` - Connection status eventsDevelopment Commands
Frontend (SvelteKit)
```bash
npm run dev # Start dev server (http://localhost:5173)
npm run build # Build for production
npm run preview # Preview production build
npm run check # Type checking
npm run check:watch # Type checking with watch mode
```
Backend (Express.js)
```bash
npm run backend # Start backend (http://localhost:3000)
npm run backend:dev # Start with nodemon
```
Full Application
```bash
npm run start:all # Start frontend + backend concurrently
```
Prerequisites Setup
yt-dlp Installation
**Windows:**
```bash
winget install yt-dlp # Windows 10/11
choco install yt-dlp # Chocolatey
Or download yt-dlp.exe manually from GitHub releases
```
**macOS:**
```bash
brew install yt-dlp # Homebrew (recommended)
pip3 install yt-dlp # pip
sudo port install yt-dlp # MacPorts
```
**Linux (Ubuntu/Debian):**
```bash
pip3 install yt-dlp # pip (recommended)
sudo apt install yt-dlp # apt
sudo snap install yt-dlp # snap
```
**Linux (Other):**
```bash
sudo dnf install yt-dlp # Fedora/CentOS/RHEL
sudo pacman -S yt-dlp # Arch Linux
```
**Verify installation:**
```bash
yt-dlp --version
```
File Manager (Linux only)
For "Open in Folder" functionality:
```bash
sudo apt install nautilus # GNOME
sudo apt install dolphin # KDE
sudo apt install thunar # XFCE
sudo apt install pcmanfm # LXDE/LXQt
```
Instructions for Coding Tasks
1. When adding new features
**Before implementing:**
Check if feature requires frontend, backend, or bothConsider Socket.IO event needs for real-time updatesPlan state management changes in `src/lib/stores/downloads.ts`Review security implications (especially for file operations)**Implementation pattern:**
1. Update state stores if needed
2. Add backend endpoint in `backend/server.js`
3. Add API method in `src/lib/utils/api.ts`
4. Create/update Svelte component
5. Test real-time Socket.IO communication
2. When debugging issues
**Check these in order:**
1. Browser console for frontend errors
2. Terminal output for backend errors
3. Socket.IO connection status
4. yt-dlp process output
5. File permissions in `backend/downloads/`
6. CORS configuration (frontend on :5173, backend on :3000)
3. When modifying state management
**Rules:**
All state changes must go through stores in `src/lib/stores/downloads.ts`Never mutate store values directly; use `store.set()` or `store.update()`Keep stores minimal and focused (downloads, status, progress, videoInfo)Use derived stores for computed values4. When working with Socket.IO
**Best practices:**
Initialize socket connection in `src/lib/utils/api.ts`Listen for `download-progress` events for real-time updatesHandle `connect` and `disconnect` events for connection statusClean up event listeners in component `onDestroy()` lifecycleEmit events from backend with clear, descriptive names5. When handling file operations
**Security checks:**
Always validate file paths to prevent directory traversalUse path.join() and path.basename() for safe path handlingCheck file existence before operationsSanitize filenames from user inputImplement proper error handling for file system operations6. When adding new video platforms
**yt-dlp integration:**
1. Test platform URL with yt-dlp CLI first
2. Check if special options are needed in `backend/server.js`
3. Update video info extraction if metadata format differs
4. Handle platform-specific error messages
5. Document supported formats in user-facing components
7. When styling components
**Tailwind CSS guidelines:**
Use existing design tokens and utility classesFollow responsive design patterns (mobile-first)Maintain consistent spacing and color schemesUse Svelte's reactive classes: `class:active={condition}`Keep component styles scoped8. When testing
**Testing checklist:**
Test video download with various URLsVerify real-time progress updatesTest file operations (open, delete)Check error handling for invalid URLsTest concurrent downloadsVerify cross-platform compatibility (Windows/macOS/Linux)Configuration Details
**Frontend dev server**: `http://localhost:5173` (Vite)**Backend server**: `http://localhost:3000`**CORS**: Configured for frontend-backend communication**Downloads directory**: `backend/downloads/`**Socket.IO**: Configured for real-time bidirectional communicationCommon Troubleshooting
**yt-dlp not found:**
Verify installation: `yt-dlp --version`Check PATH environment variablePlace binary in `backend/` directory as fallback**Socket.IO connection issues:**
Verify backend is running on port 3000Check CORS configurationInspect browser console for connection errors**File operations failing:**
Check write permissions on `backend/downloads/`Verify file paths are properly sanitizedEnsure file manager is installed (Linux)Important Notes
Keep security in mind for all file operationsAlways handle yt-dlp process errors gracefullyUse status store for user-facing error messagesMaintain backward compatibility when updating dependenciesDocument any new environment variables or configuration