Bigwords.page

Trasforma qualsiasi schermo in un cartello: l'indirizzo è già l'app

Cosa fa

Scrivi una parola dopo l'indirizzo del sito e lo schermo mostra quella scritta enorme, a tutto schermo. Semplicissimo: ha ricevuto oltre 700 voti.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: pubblicità leggera o versione per negozi con loghi e orari.

Rendilo tuo

Versione per negozi e ristoranti: cartelli digitali su un vecchio tablet, con menù del giorno e prezzi.
Cartelli per l'aeroporto con il nome di chi si va a prendere.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Scrittone": scrivi una parola dopo l'indirizzo del sito (scrittone.it/ciao) e lo schermo la mostra enorme, a tutto schermo: per accogliere qualcuno all'aeroporto, fare il tifo, comunicare in un posto rumoroso. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina principale: il testo enorme preso dall'indirizzo
2. Pagina iniziale con un campo per scrivere e gli esempi d'uso
3. Opzioni: colori, testo che scorre, lampeggio, più messaggi in sequenza
4. Pagina Pro

Stile: essenziale: per il cartello nero su bianco o bianco su nero a scelta, carattere "Inter" extra grassetto; la pagina iniziale è minimale con un solo campo. 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 normale: il testo sta nell'indirizzo
- "profili": piano (gratis o Pro), collegato all'utente
- "cartelli": sequenze di messaggi salvate dagli utenti Pro

Regole di sicurezza obbligatorie:
- il cartello funziona senza account e senza salvare nulla
- ogni utente Pro vede solo i suoi cartelli salvati

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. Testo grande quanto lo schermo

La pagina legge il testo dall'indirizzo (tutto quello dopo la barra, decodificato) e lo mostra il più grande possibile senza uscire dallo schermo: la grandezza si calcola con una ricerca binaria (codice nei Dettagli tecnici), e si ricalcola quando si gira il telefono.

Un tocco nasconde/mostra la barra delle opzioni. Lo schermo non si spegne (Wake Lock) e si può andare a tutto schermo.

Opzioni nell'indirizzo, così si condividono con un link: ?colore=giallo, ?scorri, ?lampeggia. Il sito non salva i testi scritti.

4. Funzioni Pro

Pro: sequenze di messaggi che si alternano ogni N secondi ("Benvenuta Giulia!" → "Siamo qui 👋"), colori e caratteri personalizzati, emoji giganti, cartelli salvati, e "modalità tifo" con i colori della squadra.

Nessuna pubblicità sul cartello: solo, eventualmente, nella pagina iniziale.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 1,99 € una volta sola. Il pagamento sblocca sequenze di messaggi, cartelli salvati, colori e caratteri personalizzati.

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. Misure: prova testi di 1, 10 e 60 caratteri su telefono in verticale e orizzontale e su un monitor: il testo deve sempre riempire lo schermo senza uscire.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Il testo più grande che entra

Cerca la grandezza massima con cui il testo entra nello schermo, provando metà per metà (ricerca binaria): bastano una decina di tentativi.

export function adattaTesto(elemento: HTMLElement, contenitore: HTMLElement) {
  let min = 8, max = 2000;
  const entra = () =>
    elemento.scrollWidth <= contenitore.clientWidth && elemento.scrollHeight <= contenitore.clientHeight;

  while (max - min > 1) {
    const prova = Math.floor((min + max) / 2);
    elemento.style.fontSize = prova + "px";
    if (entra()) min = prova; else max = prova;
  }
  elemento.style.fontSize = min + "px";
}

// Il testo viene dall'indirizzo: scrittone.it/Benvenuta%20Giulia
export const testoDallIndirizzo = () =>
  decodeURIComponent(location.pathname.slice(1)).replace(/[-_]/g, " ").trim() || "Ciao!";

// Ricalcola quando si gira il telefono o si ridimensiona la finestra
export function avvia(elemento: HTMLElement, contenitore: HTMLElement) {
  elemento.textContent = testoDallIndirizzo();
  const osservatore = new ResizeObserver(() => adattaTesto(elemento, contenitore));
  osservatore.observe(contenitore);
  (navigator as any).wakeLock?.request("screen").catch(() => {});
  return () => osservatore.disconnect();
}

Pezzi comuni a tutti i progetti

Glossario

Ricerca binaria: Un modo veloce di trovare un valore: si prova a metà, poi a metà della metà giusta, e così via.
Wake Lock: La funzione che impedisce allo schermo di spegnersi.