Nocodable Components

Pezzi di interfaccia già pronti da copiare dentro le app fatte con Bubble

Incasso mensile: 788 USD (fonte indicata nella scheda)

Cosa fa

Una libreria di oltre 450 componenti grafici (menu, schede, moduli) per chi costruisce app con Bubble: si scelgono e si incollano nel proprio progetto tramite un'estensione di Chrome.

Come guadagna

Abbonamento, con circa 110 abbonati.

Rendilo tuo

La stessa idea per gli strumenti che crescono adesso: componenti e modelli pronti per Lovable o Bolt.
Modelli di pagine complete in italiano (prenotazioni, listino, contatti) per attività locali.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Pezzi Pronti": una libreria di componenti grafici pronti (menu, card, prezzi, moduli, sezioni di pagina) da copiare in progetti React e Tailwind, anche quelli creati con Lovable e Bolt. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con le categorie e i componenti più usati
2. Catalogo con filtri e anteprima dal vivo di ogni componente
3. Scheda del componente: anteprima chiara/scura, telefono/computer, codice da copiare, frase per l'AI
4. Registrazione e Pro
5. Pannello amministratori per caricare componenti

Stile: da strumento per sviluppatori: sfondo bianco, nero #09090B, accento verde lime #84CC16, carattere "Geist" o "Inter", anteprime dentro cornici con interruttore chiaro/scuro. 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:
- "componenti": nome, categoria, anteprima, codice, frase per l'AI, gratuito o Pro

Regole di sicurezza obbligatorie:
- tutti vedono nomi e anteprime
- il codice dei componenti Pro lo leggono solo gli utenti Pro: lo decide il database
- solo gli amministratori aggiungono componenti

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. Catalogo e copia

Crea il catalogo per categorie (navigazione, sezioni iniziali, prezzi, testimonianze, moduli, tabelle, pannelli, footer) con ricerca. Ogni componente ha un'anteprima dal vivo in un iframe, con interruttori chiaro/scuro e telefono/computer.

Nella scheda del componente due schede da copiare con un clic: "Codice" (React + Tailwind, accessibile, senza librerie esterne) e "Frase per Lovable/Bolt" (descrizione precisa per farlo ricreare all'AI nel proprio progetto).

Il codice dei componenti Pro non arriva mai al browser di chi non è Pro: lo blocca una regola del database (codice nei Dettagli tecnici).

4. Licenza e Pro

Pagina della licenza chiara: i componenti si possono usare in progetti propri e dei clienti, non rivendere come libreria.

Gli utenti Pro hanno tutti i componenti, le nuove uscite ogni settimana (con un'email) e i "kit" di pagina completa. Contatore delle copie per vedere quali componenti piacciono di più.

5. Pagamenti con Stripe

Aggiungi un abbonamento a 9 € al mese o 79 € all'anno. Gratis l'utente ha: 30 componenti gratuiti. Con il piano Pro sblocca: tutti gli oltre 300 componenti, i kit di pagina e le nuove uscite.

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. Paywall: da un account gratuito, prova a leggere il codice di un componente Pro chiamando direttamente il database: deve arrivare vuoto.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Codice Pro protetto dal database

Le informazioni pubbliche e il codice stanno in due tabelle diverse: il codice Pro si legge solo con il piano Pro.

create table componenti (
  id uuid primary key default gen_random_uuid(),
  slug text not null unique,
  nome text not null,
  categoria text not null,
  anteprima_url text not null,
  pro boolean not null default false,
  copie int not null default 0
);

create table codici (
  componente_id uuid primary key references componenti(id) on delete cascade,
  codice text not null,
  frase_ai text not null
);

alter table componenti enable row level security;
alter table codici enable row level security;

create policy "catalogo pubblico" on componenti for select using (true);

create policy "codice gratuito o pro" on codici for select using (
  not (select c.pro from componenti c where c.id = componente_id)
  or exists (select 1 from profili p where p.id = auth.uid() and p.piano = 'pro')
);

-- Conta una copia (chiunque, ma solo +1 alla volta)
create function conta_copia(componente uuid) returns void
language sql security definer set search_path = public as $
  update componenti set copie = copie + 1 where id = componente;
$;

Pulsante Copia

Copia il testo negli appunti e mostra "Copiato!" per due secondi, con un ripiego per i browser che non permettono l'accesso agli appunti.

import { useState } from "react";

export function BottoneCopia({ testo, onCopia }: { testo: string; onCopia?: () => void }) {
  const [copiato, setCopiato] = useState(false);

  async function copia() {
    try {
      await navigator.clipboard.writeText(testo);
    } catch {
      // Ripiego: area di testo nascosta + comando di copia
      const area = document.createElement("textarea");
      area.value = testo;
      area.style.position = "fixed";
      area.style.opacity = "0";
      document.body.appendChild(area);
      area.select();
      document.execCommand("copy");
      area.remove();
    }
    setCopiato(true);
    onCopia?.();
    setTimeout(() => setCopiato(false), 2000);
  }

  return (
    <button type="button" onClick={copia} aria-live="polite">
      {copiato ? "Copiato!" : "Copia"}
    </button>
  );
}

Pezzi comuni a tutti i progetti

Glossario

Slug: La parte finale e leggibile dell'indirizzo di una pagina, es. /pizzeria-da-mario.
Componente: Un pezzo di interfaccia riutilizzabile, come un menu o una card, da inserire in più pagine.