Negozio di timbri personalizzati

Un negozio online di timbri personalizzati per le aziende

Incasso mensile: 62.400 USD (fonte indicata nella scheda)

Cosa fa

Un negozio Shopify che vende timbri su misura per attività e aziende, prodotti su ordinazione. Nell'annuncio dichiara oltre 800.000 $ di incassi negli ultimi 12 mesi.

Come guadagna

Vendita online di prodotti fatti su ordinazione, con pubblicità a pagamento. Dati dall'annuncio di vendita su Flippa, con dati verificati dalla piattaforma.

Rendilo tuo

• Produzione affidata a un laboratorio: tu curi il sito e i clienti.
• Altri prodotti personalizzati per aziende: targhe, adesivi, biglietti da visita.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Timbrificio": un negozio online dove le aziende disegnano e ordinano il proprio timbro personalizzato, vedendo l'anteprima mentre scrivono. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con i modelli di timbro più venduti, prezzi da/a, tempi di consegna e recensioni
2. Configuratore del timbro: forma, misura, righe di testo, logo, colore dell'inchiostro, con anteprima dal vivo
3. Carrello e riepilogo dell'ordine
4. Area cliente con gli ordini e il pulsante "Riordina"
5. Pagina di gestione ordini per il negozio (solo amministratori)

Stile: artigianale ma professionale: sfondo bianco carta #FAFAF7, inchiostro blu #1E3A8A come colore principale, rosso timbro #B91C1C per le offerte, carattere "Source Sans 3", anteprime del timbro grandi e nitide. 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:
- "ordini": cliente, stato (in attesa di pagamento, pagato, in produzione, spedito), totale, indirizzo di spedizione
- "timbri_ordinati": i timbri di ogni ordine con forma, misura, righe di testo, logo e anteprima

Regole di sicurezza obbligatorie:
- ogni cliente vede solo i propri ordini
- il prezzo e lo stato dell'ordine non si possono modificare dal browser
- solo gli amministratori del negozio vedono tutti gli ordini e cambiano lo stato

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. Il configuratore con anteprima

Crea il configuratore del timbro con anteprima dal vivo disegnata in SVG:
- forme: rettangolare (es. 47x18 mm, 58x22 mm, 70x30 mm), rotonda (30 e 40 mm), quadrata;
- da 1 a 5 righe di testo, ognuna con grandezza, grassetto e allineamento; il testo si restringe da solo se è troppo lungo e mostra un avviso;
- caricamento del logo (PNG o SVG), convertito in bianco e nero per l'anteprima;
- colore dell'inchiostro: nero, blu, rosso, verde;
- tipo: autoinchiostrante, a legno, tascabile.

Il prezzo si aggiorna mentre si sceglie, ma quello vero lo calcola sempre il server (codice nei Dettagli tecnici). Al salvataggio crea un'immagine PNG dell'anteprima e allegala all'ordine: è il file che il laboratorio userà per produrre il timbro.

4. Gestione ordini e riordino

Nell'area cliente mostra gli ordini con stato e numero di spedizione, e un pulsante "Riordina" che crea un nuovo ordine identico in un clic.

Crea la pagina amministratori: elenco ordini filtrabile per stato, scheda dell'ordine con anteprima grande del timbro, file da scaricare per il laboratorio, cambio di stato (pagato → in produzione → spedito) e campo per il numero di spedizione. A ogni cambio di stato il cliente riceve un'email.

5. Pagamenti con Stripe

Aggiungi un pagamento singolo di il totale dell'ordine calcolato dal server. Dopo il pagamento l'ordine passa da "in attesa" a "pagato" e arriva al laboratorio.

A pagamento riuscito il webhook imposta "stato" a "pagato" nella tabella "ordini", sulla riga del ordine 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. Prezzo: prova a modificare il prezzo dal browser prima del pagamento: Stripe deve sempre ricevere il prezzo calcolato dal server.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Tabelle del database

Ordini e timbri ordinati. Il totale e lo stato li cambia solo il server.

create table ordini (
  id uuid primary key default gen_random_uuid(),
  utente_id uuid not null references auth.users(id),
  stato text not null default 'in_attesa'
    check (stato in ('in_attesa', 'pagato', 'in_produzione', 'spedito')),
  totale_centesimi int not null check (totale_centesimi > 0),
  indirizzo jsonb not null,
  numero_spedizione text,
  creato_il timestamptz not null default now()
);

create table timbri_ordinati (
  id uuid primary key default gen_random_uuid(),
  ordine_id uuid not null references ordini(id) on delete cascade,
  configurazione jsonb not null,       -- forma, misura, righe, colore, tipo
  anteprima_path text not null,        -- PNG nello Storage
  prezzo_centesimi int not null
);

alter table ordini enable row level security;
alter table timbri_ordinati enable row level security;

-- Il cliente legge i suoi ordini; li crea e modifica solo la Edge Function
create policy "i miei ordini" on ordini
  for select using (auth.uid() = utente_id);
create policy "i miei timbri" on timbri_ordinati
  for select using (exists (
    select 1 from ordini o where o.id = ordine_id and o.utente_id = auth.uid()
  ));

Prezzo calcolato dal server

Il listino vive sul server: anche se qualcuno manomette il browser, il prezzo pagato è sempre quello giusto.

// Usato dalla Edge Function che crea l'ordine e la sessione Stripe
const LISTINO: Record<string, number> = {      // prezzi in centesimi
  "rettangolare-47x18": 1490,
  "rettangolare-58x22": 1790,
  "rettangolare-70x30": 2190,
  "rotonda-30": 1690,
  "rotonda-40": 1990,
  "quadrata-40": 1990,
};
const SUPPLEMENTI = { logo: 300, legno: -200, tascabile: 400 };

export function prezzoTimbro(c: {
  forma: string; misura: string; logo: boolean;
  tipo: "autoinchiostrante" | "legno" | "tascabile";
}): number {
  const base = LISTINO[`${c.forma}-${c.misura}`];
  if (!base) throw new Error("Forma o misura non valida");
  let prezzo = base;
  if (c.logo) prezzo += SUPPLEMENTI.logo;
  if (c.tipo === "legno") prezzo += SUPPLEMENTI.legno;
  if (c.tipo === "tascabile") prezzo += SUPPLEMENTI.tascabile;
  return prezzo;
}

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Controllo finale prima di pubblicare

Glossario

JSONB

Un tipo di colonna che contiene dati strutturati flessibili, come un piccolo documento.

Storage

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