← Tutte le idee Studio e formazione

Xikipedia

Wikipedia da scorrere come un social network

Cosa fa

Mostra le voci di Wikipedia come un feed da scorrere all'infinito, con immagini e brevi estratti: lo stesso gesto dei social, ma si impara qualcosa.

Come guadagna

Presentato su Hacker News dal suo creatore, che non dichiara incassi. Idee nostre per guadagnare con un progetto simile: donazioni, versione senza pubblicità, versione per scuole.

Rendilo tuo

  • In italiano, con filtri per argomento: storia, scienza, curiosità della tua regione.
  • Un'app da proporre ai genitori come alternativa ai social per i ragazzi.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Scorri e Impara": mostra le voci di Wikipedia in italiano come un feed da scorrere all'infinito, con immagini e brevi estratti: lo stesso gesto dei social, ma si impara qualcosa. Il feed si adatta a ciò che piace. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Il feed: una voce per schermata, immagine grande, titolo ed estratto
2. Voce aperta con il testo completo e il link a Wikipedia
3. Salvati: le voci che vuoi leggere dopo
4. Interessi: argomenti preferiti e da evitare
5. Statistiche: voci lette, argomenti scoperti

Stile: da social ma calmo: sfondo nero per le immagini, testo bianco, accento blu Wikipedia #3366CC, carattere "Inter" per il testo e "Linux Libertine" o "Georgia" per i titoli. 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 account necessario: interessi e salvati stanno nel browser
- "profili": piano, per chi vuole sincronizzare tra dispositivi
- "salvati": voci salvate, per gli utenti registrati

Regole di sicurezza obbligatorie:
- i contenuti vengono da Wikipedia in tempo reale, con licenza CC BY-SA e link alla voce
- ogni utente vede solo i suoi 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. Un feed da Wikipedia

Le voci si caricano dall'API ufficiale di Wikipedia in italiano: voci casuali, voci collegate a quelle piaciute, e la "voce del giorno" (codice nei Dettagli tecnici). Si mostrano solo quelle con un'immagine e un estratto di almeno 200 caratteri.

Scorrendo verso l'alto si passa alla voce successiva; doppio tocco = mi piace, che aggiunge agli interessi le voci collegate. Il feed alterna voci collegate ai mi piace e voci a sorpresa, per non chiudersi in una bolla.

Ogni voce mostra "Da Wikipedia, l'enciclopedia libera — CC BY-SA" e il link alla pagina originale. Nessuna pubblicità tra le voci.

4. Salvati e Pro

Salvati per leggere dopo, interessi modificabili, e un contatore gentile ("Oggi hai scoperto 23 voci, 4 su argomenti nuovi"). Limite di tempo facoltativo, con un promemoria per fare una pausa.

Pro: sincronizzazione tra dispositivi, feed per argomento (solo storia, solo scienza...), e lettura senza connessione delle voci salvate.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di 2,99 € una volta sola. Il pagamento sblocca la sincronizzazione, i feed per argomento e la lettura offline.

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. Attribuzione: controlla che ogni voce nel feed mostri la licenza CC BY-SA e il link a Wikipedia.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Voci casuali e voci collegate

Due fonti per il feed: voci casuali dall'API REST e voci collegate a quelle piaciute dall'API dei collegamenti, tenendo solo quelle con immagine ed estratto.

const REST = "https://it.wikipedia.org/api/rest_v1";
const API = "https://it.wikipedia.org/w/api.php";

type Voce = { titolo: string; estratto: string; immagine: string; link: string };

function aVoce(p: any): Voce | null {
  if (!p.thumbnail?.source || (p.extract ?? "").length < 200) return null;
  return { titolo: p.title, estratto: p.extract, immagine: p.originalimage?.source ?? p.thumbnail.source, link: p.content_urls.mobile.page };
}

export async function voceCasuale(): Promise<Voce | null> {
  const r = await fetch(REST + "/page/random/summary");
  return aVoce(await r.json());
}

// Voci collegate a una voce piaciuta (da cui il feed pesca)
export async function collegate(titolo: string, quante = 10): Promise<string[]> {
  const p = new URLSearchParams({
    action: "query", format: "json", origin: "*",
    prop: "links", titles: titolo, plnamespace: "0", pllimit: "max",
  });
  const dati = await fetch(API + "?" + p).then((r) => r.json());
  const pagina = Object.values(dati.query.pages)[0] as { links?: { title: string }[] };
  const link = (pagina.links ?? []).map((l) => l.title);
  return link.sort(() => Math.random() - 0.5).slice(0, quante);
}

export async function riassunto(titolo: string): Promise<Voce | null> {
  const r = await fetch(REST + "/page/summary/" + encodeURIComponent(titolo));
  return r.ok ? aVoce(await r.json()) : null;
}

Pezzi comuni a tutti i progetti

Glossario

CC BY-SA
La licenza dei testi di Wikipedia: si possono riusare citando la fonte e con la stessa licenza.
Bolla
Quando un feed ti mostra solo cose simili a quelle che già ti piacciono, e smetti di scoprire altro.