Step by Step Crochet

Schemi per l'uncinetto e strumenti utili per chi lavora a maglia

Cosa fa

Sito per appassionati di uncinetto: schemi per ogni livello, strumenti per i PDF degli schemi e un contatore dei giri da usare mentre si lavora.

Come guadagna

Il progetto è presentato in vetrina su SideProjectors; come guadagna non è indicato pubblicamente.

Rendilo tuo

• Lo stesso per un altro hobby con una comunità appassionata: modellismo, punto croce, pesca.
• Contatore dei giri che funziona anche a voce, con le mani occupate.

Le frasi da scrivere all'AI

1. Base del sito e grafica

Crea un'app web in italiano chiamata "Punto e Giro": un sito per chi fa l'uncinetto: schemi per ogni livello, un lettore di schemi PDF con l'evidenziatore della riga a cui sei arrivata, e un contagiri grande da usare mentre si lavora. Usa React, Vite, TypeScript e Tailwind CSS.

Pagine da creare:
1. Pagina iniziale con schemi in evidenza, livelli e prezzo
2. Catalogo degli schemi con filtri (amigurumi, coperte, abbigliamento, livello)
3. Lettore dello schema con riga evidenziata e contagiri
4. I miei progetti in corso, con il punto a cui sei arrivata
5. Glossario dei punti con video

Stile: caldo e fatto a mano: sfondo panna #FFFBF5, rosa antico #D4A5A5, verde salvia #9CAF88, carattere "Quicksand", pulsanti del contagiri enormi. 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:
- "schemi": titolo, livello, categoria, filato e uncinetto consigliati, PDF o testo, gratuito o Pro, autrice
- "progetti": schema o PDF caricato, giro attuale, riga evidenziata, note, collegati all'utente

Regole di sicurezza obbligatorie:
- gli schemi gratuiti sono pubblici, quelli Pro solo per gli abbonati
- i PDF caricati dall'utente sono privati
- 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. Contagiri e lettore dello schema

Il contagiri è pensato per le mani occupate: pulsante enorme per +1 (anche toccando qualsiasi punto dello schermo), pulsante piccolo per −1, vibrazione a ogni giro e un suono diverso ogni 10. Lo schermo resta acceso (Wake Lock) e il conteggio si salva subito nel telefono e poi sul server, così non si perde mai (codice nei Dettagli tecnici).

Il lettore dello schema mostra il PDF (proprio o del catalogo) con una barra colorata trascinabile che evidenzia la riga attuale: avanza da sola quando il contagiri arriva al giro successivo, se lo schema è nel catalogo con i giri numerati.

Più contatori per progetto (giri e ripetizioni), con un nome ciascuno.

4. Progetti e catalogo

"I miei progetti" mostra i lavori in corso con foto, schema e il punto esatto a cui si è arrivati, da riprendere con un tocco su qualsiasi dispositivo.

Catalogo di schemi originali scritti da autrici che ricevono una parte dell'abbonamento in base ai download. Glossario dei punti con brevi video.

5. Pagamenti con Stripe

Aggiungi un abbonamento a 3,99 € al mese. Gratis l'utente ha: contagiri e lettore per un progetto, schemi gratuiti. Con il piano Pro sblocca: progetti illimitati, tutti gli schemi Pro, più contatori e sincronizzazione tra dispositivi.

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. Contagiri: conta 50 giri, chiudi di colpo il browser e riaprilo senza connessione: il numero deve essere ancora 50.
Correggi quello che non va e scrivimi cosa hai cambiato.

Dettagli tecnici

Contagiri che non perde mai il conto

Ogni tocco salva subito il numero nel telefono; il salvataggio sul server parte un secondo dopo l'ultimo tocco, così non si fa una richiesta per ogni giro.

import { supabase } from "./supabase";

export function creaContagiri(progettoId: string, onCambio: (n: number) => void) {
  const chiave = "giri-" + progettoId;
  let giri = Number(localStorage.getItem(chiave) ?? 0);
  let attesa: ReturnType<typeof setTimeout> | undefined;
  onCambio(giri);

  function cambia(delta: number) {
    giri = Math.max(0, giri + delta);
    localStorage.setItem(chiave, String(giri));           // salvato subito nel telefono
    navigator.vibrate?.(giri % 10 === 0 ? [60, 40, 60] : 30);
    onCambio(giri);

    clearTimeout(attesa);                                  // al server dopo 1 secondo di pausa
    attesa = setTimeout(() => {
      void supabase.from("progetti").update({ giro: giri }).eq("id", progettoId);
    }, 1000);
  }

  (navigator as any).wakeLock?.request("screen").catch(() => {});
  return { piu: () => cambia(1), meno: () => cambia(-1) };
}

Schemi Pro e progetti

Gli schemi Pro si leggono solo con l'abbonamento; i progetti sono privati.

create table schemi (
  id uuid primary key default gen_random_uuid(),
  titolo text not null,
  livello text not null check (livello in ('principiante', 'intermedio', 'esperto')),
  categoria text not null,
  autrice text not null,
  pdf_path text not null,
  pro boolean not null default false
);
alter table schemi enable row level security;
create policy "schemi visibili" on schemi for select using (true);   -- titolo e anteprima per tutti
-- Il PDF degli schemi Pro si scarica con un link temporaneo creato dalla Edge Function
-- solo se l'utente ha il piano Pro

create table progetti (
  id uuid primary key default gen_random_uuid(),
  utente_id uuid not null references auth.users(id) on delete cascade,
  schema_id uuid references schemi(id),
  titolo text not null,
  giro int not null default 0,
  riga_evidenziata int not null default 0,
  note text not null default ''
);
alter table progetti enable row level security;
create policy "le mie righe" on progetti
  for all using (auth.uid() = utente_id) with check (auth.uid() = utente_id);

Pezzi comuni a tutti i progetti

• Pagamenti con Stripe
• Profili, piano e crediti
• Controllo finale prima di pubblicare

Glossario

Storage

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

Contagiri

Il contatore dei giri (o delle righe) già lavorati, fondamentale per non perdere il segno.

Wake Lock

La funzione che impedisce allo schermo di spegnersi mentre si lavora.