Bento

Un'intera presentazione in un solo file HTML, da modificare e condividere

Cosa fa

Una presentazione che sta tutta in un file: si apre nel browser, si modifica, contiene i dati dei grafici e permette di lavorare insieme. Oltre mille voti.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: versione per aziende con modelli e marchio aziendale, condivisione con statistiche.

Rendilo tuo

Per insegnanti: lezioni in un file da mandare agli studenti, che funziona anche senza internet.
Modelli pronti per pitch di startup in italiano.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Slide in un File": crea presentazioni che stanno tutte in un unico file HTML: si aprono in qualsiasi browser senza programmi, si modificano dentro il file stesso, contengono i dati dei grafici, e si possono mandare per email. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con un esempio da scaricare e il prezzo
2. Editor delle slide: testi, immagini, grafici con i dati in tabella
3. Modalità presentazione a schermo intero
4. Salvataggio: scarica il file o salva sopra quello aperto
5. Pagina Pro (collaborazione in tempo reale)

Stile: elegante e minimale: editor bianco con barra nera #111111, accento corallo #F43F5E, carattere "Inter"; temi delle slide tra cui scegliere. 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:
- nessun dato per l'uso base: la presentazione vive nel file
- "presentazioni_condivise": per la collaborazione Pro, contenuto in JSON e chi può modificarlo
- "profili": piano

Regole di sicurezza obbligatorie:
- senza account il file resta solo sul computer dell'utente
- le presentazioni condivise le vedono solo gli invitati
- il piano non si modifica dal browser

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. Un file che contiene tutto

Il file HTML contiene: il programma dell'editor e del presentatore, i testi delle slide, le immagini (incorporate), e i dati dei grafici. Si apre con un doppio clic in qualsiasi browser, anche senza internet.

Quando si salva, il file riscrive se stesso con i nuovi contenuti (codice nei Dettagli tecnici): su Chrome ed Edge può salvare direttamente sopra il file aperto (File System Access API), sugli altri browser scarica la nuova versione.

I grafici (barre, linee, torta) si creano da una tabella modificabile; i dati restano nel file, così chi riceve la presentazione può controllarli.

4. Presentare e collaborare

Modalità presentazione con frecce, note per chi parla in una seconda finestra, e timer. Esportazione in PDF.

Pro: collaborazione in tempo reale (la presentazione si carica online e più persone la modificano insieme con Supabase Realtime), commenti sulle slide e cronologia delle versioni.

5. Pagamenti con Stripe

Aggiungi un abbonamento a 6 € al mese. Gratis l'utente ha: uso completo in file singolo, senza collaborazione online. Con il piano Pro sblocca: collaborazione in tempo reale, commenti, cronologia delle versioni e temi Pro.

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. Portabilità: crea una presentazione con immagini e grafici, mandala per email, aprila su un altro computer senza internet: deve funzionare uguale.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Il file che salva se stesso

I dati della presentazione stanno in un tag script dentro la pagina. Al salvataggio si ricrea l'HTML della pagina con i dati nuovi e lo si scrive sul file aperto o lo si scarica.

// Nel file: <script id="dati" type="application/json">{ ...slide... }</script>
export const leggiDati = () => JSON.parse(document.getElementById("dati")!.textContent!);

function htmlConDati(dati: unknown): string {
  const copia = document.documentElement.cloneNode(true) as HTMLElement;
  copia.querySelector("#dati")!.textContent = JSON.stringify(dati).replace(/</g, "\\u003c");   // niente </script> nei dati
  copia.querySelectorAll("[data-temporaneo]").forEach((el) => el.remove());              // interfaccia dell'editor aperta
  return "<!doctype html>\n" + copia.outerHTML;
}

let fileAperto: any = null;   // maniglia del file (File System Access API)

export async function salva(dati: unknown, nome = "presentazione.html") {
  const contenuto = htmlConDati(dati);
  if ("showSaveFilePicker" in window) {
    fileAperto ??= await (window as any).showSaveFilePicker({
      suggestedName: nome, types: [{ description: "Presentazione", accept: { "text/html": [".html"] } }],
    });
    const scrittore = await fileAperto.createWritable();
    await scrittore.write(contenuto);
    await scrittore.close();                         // salvato sopra il file
  } else {
    const a = document.createElement("a");           // altri browser: scarica la nuova versione
    a.href = URL.createObjectURL(new Blob([contenuto], { type: "text/html" }));
    a.download = nome;
    a.click();
  }
}

Pezzi comuni a tutti i progetti

Glossario

JSONB: Un tipo di colonna che contiene dati strutturati flessibili, come un piccolo documento.
File System Access API: Una funzione di Chrome ed Edge che permette a una pagina, con il tuo permesso, di salvare direttamente su un file del computer.
File autonomo: Un unico file che contiene tutto ciò che serve per funzionare, senza dipendere da internet o da altri file.