🎬 Streaming Launcher

A modern, Progressive Web App (PWA) for managing your streaming services, watchlists, and subscriptions.

Features

🏠 Dashboard

• Quick access to major streaming platforms:
  • YouTube
  • Twitch
  • Netflix
  • Amazon Prime
• Beautiful card-based interface with direct links
• Responsive design for all devices

📺 Watchlist

• Track shows and content you want to watch
• Mock data included (YouTube API integration ready)
• View platform, duration, and ratings
• Easy management with add/remove functionality

💳 Subscriptions

• Track all your streaming subscriptions
• Monitor monthly costs and total expenses
• Set expiration dates and auto-renew status
• Get alerts for expiring subscriptions
• Manual input for custom services

📱 PWA Features

• Install as standalone app on mobile/desktop
• Offline access to links and cached content
• Fast loading with service worker
• App-like experience with custom icons
• Home screen shortcuts

Tech Stack

• Framework: Next.js 16 (App Router)
• Styling: Tailwind CSS 4
• Icons: Lucide React
• Language: TypeScript
• PWA: Custom Service Worker + Manifest

Getting Started

Installation

npm install

Development

npm run dev

Open http://localhost:3000 to view the app.

Build

npm run build
npm start

PWA Testing

1. Build the production version
2. Serve it locally or deploy
3. Open in Chrome/Edge DevTools
4. Go to Application > Service Workers
5. Check "Offline" and test functionality

Project Structure

streaming-launcher/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout with sidebar
│   │   ├── page.tsx            # Dashboard page
│   │   ├── watchlist/
│   │   │   └── page.tsx        # Watchlist management
│   │   ├── subscriptions/
│   │   │   └── page.tsx        # Subscription tracking
│   │   └── globals.css         # Global styles
│   └── components/
│       ├── Sidebar.tsx         # Navigation sidebar
│       └── ServiceCard.tsx     # Streaming service cards
├── public/
│   ├── manifest.json           # PWA manifest
│   ├── sw.js                   # Service worker
│   ├── register-sw.js          # SW registration
│   ├── icon-192.png            # App icon (192x192)
│   ├── icon-512.png            # App icon (512x512)
│   └── favicon.ico             # Favicon
└── next.config.ts              # Next.js configuration

Features Roadmap

• YouTube API integration for real watchlists
• Twitch API for live channel tracking
• Calendar integration for release dates
• Push notifications for new content
• Dark mode toggle
• Export/import subscription data
• Multi-user support
• Mobile app wrapper (Capacitor/React Native)

YouTube API Integration

To enable real YouTube watchlist integration:

1. Get API key from Google Cloud Console
2. Enable YouTube Data API v3
3. Add to .env.local:

   NEXT_PUBLIC_YOUTUBE_API_KEY=your_key_here
   

4. Update watchlist page to fetch from YouTube API

License

MIT

Author

Built with ❤️ as a personal streaming management tool.