← Tutte le idee Giochi e hobby

Channel Surfer

Guarda YouTube come se fosse la TV via cavo

Cosa fa

Trasforma YouTube in canali televisivi: si fa zapping tra canali a tema che trasmettono di continuo, senza dover scegliere cosa guardare.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: sponsor dei canali, versione premium con canali personalizzati.

Rendilo tuo

  • Canali italiani a tema: cucina della nonna, calcio anni '90, documentari.
  • Per anziani: un telecomando semplicissimo, senza dover cercare.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Zapping": trasforma YouTube in canali televisivi a tema (documentari, cucina, musica anni '80, viaggi): ogni canale "trasmette" di continuo e tutti vedono la stessa cosa nello stesso momento, si fa zapping invece di scegliere. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. La TV: video a tutto schermo, numero e nome del canale, cosa c'è adesso e dopo
2. Guida dei programmi a griglia
3. Elenco dei canali per tema
4. I miei canali personalizzati (Pro)
5. Informazioni e crediti

Stile: TV anni '90: sfondo nero, scritte del canale in verde fosforo #22C55E, effetto disturbo tra un canale e l'altro, carattere "VT323" per i numeri e "Inter" per il resto. Nessuna immagine generica di stock.

Tutto deve funzionare perfettamente da telefono. Tutti i testi in italiano, chiari e senza parole tecniche.

2. Database, account e sicurezza

Collega il progetto a Supabase e attiva la registrazione con email e password.

Crea queste tabelle:
- "canali": numero, nome, tema, elenco di video (id YouTube e durata), creato da
- "profili": piano

Regole di sicurezza obbligatorie:
- i canali pubblici li vedono tutti
- i canali personalizzati li vede e modifica solo chi li ha creati
- si usano solo video incorporabili, con il player ufficiale di YouTube

Usa esattamente il codice SQL che trovi nei "Dettagli tecnici" di questa scheda: eseguilo nel SQL Editor di Supabase prima di continuare, poi collega le pagine alle tabelle.

3. Tutti vedono la stessa cosa

Ogni canale è una lista di video con la loro durata, ripetuta all'infinito a partire da una data fissa. Dall'ora attuale si calcola quale video è in onda e da quale secondo (codice nei Dettagli tecnici): così chiunque accenda il canale lo trova nello stesso punto, come in TV.

Il video si mostra con il player ufficiale di YouTube (IFrame API), che rispetta pubblicità e regole di YouTube; si usano solo video che i loro autori permettono di incorporare. Frecce su/giù o scorrimento per cambiare canale, con un breve effetto di disturbo.

La guida dei programmi a griglia mostra cosa va in onda nelle prossime ore su ogni canale.

4. Canali personalizzati

Pro: l'utente crea i suoi canali incollando playlist o video di YouTube; il sito legge titoli e durate con l'API ufficiale YouTube Data. Può condividere il canale con un link.

Canali pubblici curati dalla redazione per tema, aggiornati ogni settimana con video nuovi.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 3,99 € una volta sola. Il pagamento sblocca i canali personalizzati e la loro condivisione.

A pagamento riuscito il webhook imposta "piano" a "pro" nella tabella "profili", sulla riga dell'utente indicata in client_reference_id.

Per la sessione di pagamento e il webhook segui la guida "Pagamenti con Stripe" di Fattibile.

6. Controlli specifici di questo progetto

Oltre ai controlli della guida "Controllo finale", verifica in particolare:
1. Sincronia: apri lo stesso canale su due dispositivi: devono mostrare lo stesso video nello stesso punto, con al massimo un paio di secondi di differenza.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Cosa va in onda adesso

Dalla data di partenza del canale e dalla durata totale della lista si calcola il video in onda e il secondo da cui partire. Poi il player di YouTube parte da lì.

type Video = { id: string; secondi: number };

const PARTENZA = Date.UTC(2026, 0, 1) / 1000;   // il canale "trasmette" da questa data

export function inOnda(lista: Video[], adesso = Date.now() / 1000) {
  const totale = lista.reduce((s, v) => s + v.secondi, 0);
  let posizione = (adesso - PARTENZA) % totale;   // dove siamo nel giro della lista
  for (let i = 0; i < lista.length; i++) {
    if (posizione < lista[i].secondi) {
      return { video: lista[i], daSecondo: Math.floor(posizione), poi: lista[(i + 1) % lista.length] };
    }
    posizione -= lista[i].secondi;
  }
  return { video: lista[0], daSecondo: 0, poi: lista[1] };
}

// Con il player ufficiale (YouTube IFrame API già caricata)
export function sintonizza(player: YT.Player, lista: Video[]) {
  const { video, daSecondo } = inOnda(lista);
  player.loadVideoById({ videoId: video.id, startSeconds: daSecondo });
}

Pezzi comuni a tutti i progetti

Glossario

IFrame API
Il modo ufficiale di inserire e comandare il player di YouTube dentro un altro sito.