HN.watch

Tutti i post di una comunità online, trasformati in video

Cosa fa

Trasforma i post di Hacker News in brevi video da guardare, invece che da leggere.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: sponsor nei video e canale YouTube monetizzato.

Rendilo tuo

• Lo stesso per le notizie di un settore italiano: le novità della settimana per agenti immobiliari, avvocati, ristoratori.
• Video brevi verticali per TikTok e Reels.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Notizie in Video": trasforma le notizie più votate di una comunità online (es. Hacker News) in brevi video verticali di 60 secondi con voce e sottotitoli, per chi preferisce guardare invece che leggere, sempre con il link alla fonte. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con i video di oggi in verticale, da scorrere
2. Pagina del video con la fonte originale e la discussione
3. Argomenti seguiti e preferenze
4. Pannello di produzione (amministratori): notizie scelte, testi, rendering
5. Pagina Pro

Stile: da video breve: sfondo nero, testo bianco, arancione #FF6600 come accento, carattere "Inter" extra grassetto per i sottotitoli dei video. 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:
- "notizie": id originale, titolo, link, punti, data
- "video": notizia, testo letto, file video nello Storage, durata, stato (da fare, pronto, pubblicato)

Regole di sicurezza obbligatorie:
- i video pubblicati sono pubblici
- solo gli amministratori creano e pubblicano video
- ogni video mostra sempre la fonte e il link originale

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. Dalla notizia al video

Ogni mattina una funzione legge le notizie più votate dall'API pubblica di Hacker News (codice nei Dettagli tecnici) e le salva. Per ognuna, Claude scrive un testo da leggere di 120–150 parole in italiano: cos'è successo, perché interessa, e cosa ne pensa la discussione. Il testo non copia l'articolo: lo riassume con parole proprie e cita la fonte.

Un servizio di sintesi vocale crea l'audio; il video verticale si genera con Remotion (React che diventa video): titolo, schermata della pagina, sottotitoli parola per parola, link alla fonte in chiaro.

Un amministratore controlla testo e video prima della pubblicazione.

4. Pubblicazione e Pro

I video si pubblicano sul sito in un feed verticale da scorrere e, se si vuole, sui canali social del progetto con la fonte nella descrizione.

Pro: video di tutte le notizie del giorno (non solo le prime 10), argomenti personalizzati, podcast audio del giorno e nessuna pubblicità.

5. Pagamenti con Stripe

Aggiungi un abbonamento a 3 € al mese. Gratis l'utente ha: i 10 video del giorno con pubblicità. Con il piano Pro sblocca: tutti i video, argomenti personalizzati, podcast del giorno e nessuna pubblicità.

A pagamento riuscito il webhook porta l'utente al piano Pro; se l'abbonamento viene disdetto o non rinnovato lo riporta al piano gratuito.

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. Fonti: controlla 10 video: ognuno deve avere titolo e link della fonte visibili nel video e nella pagina, e il testo non deve copiare frasi dell'articolo.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Le notizie più votate da Hacker News

L'API pubblica di Hacker News (su Firebase) restituisce gli id delle notizie in prima pagina; poi si leggono i dettagli di ognuna.

const API = "https://hacker-news.firebaseio.com/v0";

type Notizia = { id: number; title: string; url?: string; score: number; descendants?: number; time: number };

export async function notizieDelGiorno(quante = 10, puntiMinimi = 150): Promise<Notizia[]> {
  const ids: number[] = await fetch(API + "/topstories.json").then((r) => r.json());
  const dettagli = await Promise.all(
    ids.slice(0, 60).map((id) => fetch(API + "/item/" + id + ".json").then((r) => r.json() as Promise<Notizia>)),
  );
  const unGiornoFa = Date.now() / 1000 - 86_400;
  return dettagli
    .filter((n) => n && n.url && n.score >= puntiMinimi && n.time > unGiornoFa)
    .sort((a, b) => b.score - a.score)
    .slice(0, quante);
}

// Link alla discussione originale, da mostrare sempre nel video
export const linkDiscussione = (id: number) => "https://news.ycombinator.com/item?id=" + id;

Il video con Remotion

Remotion trasforma componenti React in video: qui titolo, sottotitoli a tempo e fonte sempre visibile, in formato verticale 1080x1920.

import { AbsoluteFill, Audio, Sequence, useCurrentFrame, useVideoConfig } from "remotion";

type Parola = { testo: string; inizio: number; fine: number };   // secondi, dalla sintesi vocale

export function VideoNotizia({ titolo, fonte, audio, parole }: {
  titolo: string; fonte: string; audio: string; parole: Parola[];
}) {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const t = frame / fps;
  const attuale = parole.find((p) => t >= p.inizio && t < p.fine);

  return (
    <AbsoluteFill style={{ background: "#000", color: "#fff", fontFamily: "Inter", padding: 80 }}>
      <Audio src={audio} />
      <Sequence durationInFrames={fps * 3}>
        <h1 style={{ fontSize: 72, lineHeight: 1.1 }}>{titolo}</h1>
      </Sequence>
      <div style={{ position: "absolute", top: "55%", width: "100%", left: 0, textAlign: "center",
                    fontSize: 96, fontWeight: 900, color: "#FF6600" }}>
        {attuale?.testo}
      </div>
      <div style={{ position: "absolute", bottom: 80, fontSize: 32, opacity: 0.85 }}>Fonte: {fonte}</div>
    </AbsoluteFill>
  );
}
// Composizione: <Composition id="Notizia" component={VideoNotizia} width={1080} height={1920} fps={30} durationInFrames={1800} />

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Profili, piano e crediti
• Controllo finale prima di pubblicare

Glossario

Storage

Lo spazio di Supabase dove si salvano i file, come foto e audio, con le sue regole di accesso.

Remotion

Una libreria che crea video scrivendo componenti React, come se fossero pagine web.