Un blog moderno e performante dedicato alla pasticceria professionale, costruito con Next.js 16, Sanity CMS e le ultime tecnologie web.

Live Demo: cristianspastry.vercel.app

• ✨ Caratteristiche
• 🚀 Tech Stack
• 📦 Prerequisiti
• 🛠️ Installazione
• ⚙️ Configurazione
• 🏃 Avvio
• 📁 Struttura del Progetto
• 🎨 Features Principali
• 📧 Form Contatti
• 🔄 Cache Components
• 🚀 Deploy
• 🧪 Testing
• 📝 Scripts Disponibili
• 🤝 Contribuire
• 📄 Licenza

• ⚡ Next.js 16 con Cache Components (Partial Prerendering)
• 🚀 ISR (Incremental Static Regeneration) per contenuti dinamici
• 📊 SEO ottimizzato con meta tags, Open Graph, JSON-LD
• 🖼️ Immagini ottimizzate con Next.js Image
• �� 100% Responsive e mobile-first
• ♿ Accessibile (WCAG 2.1 AA compliant)

• 🎨 Sanity CMS headless con Studio integrato
• ✍️ Portable Text per contenuti rich-text
• 📸 Image CDN automatico con trasformazioni
• 🔄 Real-time preview dei contenuti
• 📋 Workflow personalizzato per pubblicazione

• 💅 Tailwind CSS per styling modulare
• 🎭 Framer Motion per animazioni fluide
• 🎨 Design system consistente e scalabile
• 🌙 Tema personalizzato con palette colori dedicata
• 🔍 Ricerca full-text con autocomplete

• 📨 Form contatti con invio email (Resend)
• 🔐 Validazione server-side con Zod
• 🧮 Calcolatori per pasticceria professionale
• 🔖 Categorie e tag per organizzazione contenuti
• 📖 Articoli scientifici sulla pasticceria
• 🎓 Guide e tecniche passo-passo

• Framework: Next.js 16.0.1 (App Router + Turbopack)
• Linguaggio: TypeScript 5.x
• Styling: Tailwind CSS 3.4
• Animazioni: Framer Motion 12.x

• CMS: Sanity 3.x
• Database: Sanity Content Lake
• ORM: Prisma (optional, per features future)
• Auth: NextAuth.js 5.0 (beta)

• Email Service: Resend
• Validazione: Zod
• UI Components: Radix UI
• Icons: Lucide React
• Type Safety: T3 Env

• Hosting: Vercel
• CI/CD: GitHub Actions + Vercel
• Monitoring: Vercel Analytics
• Version Control: Git + GitHub

Assicurati di avere installato:

• Node.js: >= 18.17.0 (consigliato 20.x LTS)
• npm: >= 9.x o pnpm >= 8.x
• Git: Per clonare il repository

# Verifica versioni installate
node --version  # >= 18.17.0
npm --version   # >= 9.x

git clone https://github.com/Cristianspastry/cristianspastry.git
cd cristianspastry

# Con npm
npm install

# Oppure con pnpm (più veloce)
pnpm install

Nota: Il progetto usa legacy-peer-deps per risolvere conflitti tra Next.js 16 e alcune dipendenze. Questo è normale e non causa problemi.

Crea un file .env nella root del progetto:

cp .env.example .env

Compila le variabili richieste:

# ============================================
# NEXT.JS
# ============================================
NEXT_PUBLIC_SITE_URL="https://tuosito.com"

# ============================================
# SANITY CMS
# ============================================
NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"
NEXT_PUBLIC_SANITY_DATASET="production"
SANITY_API_WRITE_TOKEN="your-write-token"
SANITY_REVALIDATE_SECRET="your-secret-key"

# ============================================
# RESEND (Email Service - Form Contatti)
# ============================================
RESEND_API_KEY="re_xxxxxxxxxxxxx"
CONTACT_EMAIL="tua@email.com"

# ============================================
# EMAILOCTOPUS (Newsletter)
# ============================================
EMAILOCTOPUS_API_KEY="your-api-key"
EMAILOCTOPUS_LIST_ID="your-list-id"

# ============================================
# AUTH (Opzionale)
# ============================================
AUTH_SECRET="your-secret-key"
AUTH_DISCORD_ID="your-discord-client-id"
AUTH_DISCORD_SECRET="your-discord-client-secret"

# ============================================
# DATABASE (Opzionale)
# ============================================
DATABASE_URL="file:./db.sqlite"

# Installa Sanity CLI globalmente
npm install -g @sanity/cli

# Login (se non l'hai già fatto)
sanity login

# Crea un nuovo progetto
sanity init

Segui le istruzioni e copia il Project ID nel tuo .env.

1. Vai su sanity.io/manage
2. Seleziona il tuo progetto
3. Settings → API → Tokens
4. Crea un token con permessi Editor
5. Copia il token in SANITY_API_WRITE_TOKEN

1. Crea account su resend.com
2. Vai su API Keys → Create
3. Copia la chiave in RESEND_API_KEY
4. Imposta CONTACT_EMAIL con la tua email

Pro Tip: Verifica il tuo dominio su Resend per evitare che le email finiscano in spam!

1. Crea account su emailoctopus.com
2. Crea una nuova lista: Dashboard → Lists → Create a list
3. Copia il List ID dalle impostazioni
4. Vai su Dashboard → Settings → API → Create API key
5. Copia la chiave in EMAILOCTOPUS_API_KEY
6. Incolla il List ID in EMAILOCTOPUS_LIST_ID

Per maggiori dettagli, vedi il file .env.newsletter.example.

# Avvia il server di sviluppo con Turbopack
npm run dev

# Il sito sarà disponibile su:
# http://localhost:3000

# Avvia Sanity Studio (CMS)
# Studio disponibile su:
# http://localhost:3000/studio

Nota: Lo Studio è già integrato nella route /studio del progetto!

# Build per produzione
npm run build

# Avvia server produzione
npm run start

# Build + Start in un comando
npm run preview

cristianspastry/
├── public/                 # Assets statici
│   ├── logo.svg
│   ├── favicon.ico
│   └── images/
│
├── src/
│   ├── app/                # Next.js App Router
│   │   ├── (routes)/       # Route pubbliche
│   │   ├── api/            # API Routes
│   │   ├── studio/         # Sanity Studio integrato
│   │   ├── layout.tsx      # Layout root
│   │   └── page.tsx        # Homepage
│   │
│   ├── components/         # React Components
│   │   ├── layout/         # Header, Footer, etc.
│   │   ├── recipes/        # Componenti ricette
│   │   ├── science/        # Componenti articoli
│   │   ├── technique/      # Componenti tecniche
│   │   ├── shared/         # Componenti riutilizzabili
│   │   └── ui/             # UI primitives (Radix)
│   │
│   ├── lib/                # Utilities & Helpers
│   │   ├── actions/        # Server Actions
│   │   ├── data/           # Data fetching functions
│   │   ├── config.ts       # Configurazione sito
│   │   └── utils.ts        # Helper functions
│   │
│   ├── sanity/             # Sanity Configuration
│   │   ├── lib/            # Client & queries
│   │   ├── schemaTypes/    # Content schemas
│   │   └── structure.ts    # Studio structure
│   │
│   ├── styles/             # Global styles
│   │   ├── globals.css     # Tailwind + custom CSS
│   │   └── animations.css  # Animazioni custom
│   │
│   └── env.js              # Env variables validation
│
├── .env                    # Variabili d'ambiente (git-ignored)
├── .env.example            # Template variabili
├── .gitignore
├── .npmrc                  # npm configuration
├── next.config.js          # Next.js configuration
├── tailwind.config.ts      # Tailwind configuration
├── tsconfig.json           # TypeScript configuration
├── package.json
└── README.md

• Lista ricette con filtri avanzati (categoria, difficoltà, tempo)
• Dettaglio ricetta con ingredienti, istruzioni, note
• Informazioni nutrizionali calcolate automaticamente
• Ricette correlate basate su categoria/tag
• Ricerca full-text con suggerimenti

• Articoli scientifici su ingredienti, processi, reazioni
• Livelli di complessità (base, intermedio, avanzato)
• Esperimenti pratici con foto e video
• Glossario tecnico integrato
• Bibliografia e riferimenti

• Guide step-by-step con foto/video
• Tips e troubleshooting
• Variazioni e adattamenti
• Attrezzatura richiesta
• Livello di difficoltà

• Idratazione impasto
• Baker's Percentage
• Conversione unità di misura
• Forza della farina (W)
• Tempi di lievitazione
• Scaling ricette
• Conversione bloom gelatina
• Temperature impasto
• Proporzioni teglie
• Lievito madre

Il sito include un form contatti completamente funzionale con:

• ✅ Validazione server-side con Zod
• ✅ Invio email tramite Resend API
• ✅ Template HTML professionale e responsive
• ✅ Gestione errori user-friendly
• ✅ Loading states durante l'invio
• ✅ Auto-reset dopo invio successo

{
  name: string (min 2, max 100 caratteri)
  email: email valida
  subject: string (min 5, max 200 caratteri)
  message: string (min 10, max 5000 caratteri)
}

Il progetto usa Next.js Cache Components (Partial Prerendering) per performance ottimali.

• ⚡ Rendering ultra-veloce di parti statiche
• 🔄 Streaming di parti dinamiche
• 💾 Cache intelligente a livello di funzione
• 🎯 Invalidazione granulare con revalidatePath

// Funzione con cache
export async function getRecipes() {
  'use cache'
  // cacheLife({ hours: 1 })

  return await client.fetch(RECIPES_QUERY)
}

// Invalidazione cache
import { revalidatePath } from 'next/cache'

revalidatePath('/ricette')
revalidatePath('/ricette/[slug]')

1. Crea progetto su Vercel

   npm install -g vercel
   vercel login
   vercel

2. Aggiungi variabili d'ambiente

   • Dashboard → Settings → Environment Variables
   • Copia tutte le variabili dal tuo .env

3. Deploy

   # Deploy automatico su ogni push a main
   git push origin main

Il progetto è compatibile con:

• Netlify: Richiede config per App Router
• Cloudflare Pages: Supporto Next.js experimental
• Self-hosted: Docker container disponibile

# Verifica TypeScript
npm run typecheck

# Lint del codice
npm run lint

# Lint con auto-fix
npm run lint:fix

# Verifica formattazione
npm run format:check

# Formatta codice
npm run format:write

I contributi sono benvenuti! Segui questi passi:

1. Fork il repository
2. Crea un branch per la tua feature

   git checkout -b feature/amazing-feature

3. Commit le modifiche

   git commit -m "feat: add amazing feature"

4. Push al branch

   git push origin feature/amazing-feature

5. Apri una Pull Request

Usa Conventional Commits:

feat: nuova feature
fix: bug fix
docs: documentazione
style: formattazione
refactor: refactoring
test: test
chore: manutenzione

Questo progetto è privato e proprietario. Tutti i diritti riservati © 2025 Cristian's Pastry.

Questo progetto è stato sviluppato con l'aiuto di:

• Next.js - Framework React incredibile
• Sanity - CMS headless potente
• Vercel - Platform di deploy eccezionale
• Tailwind CSS - Utility-first CSS
• Claude Code - AI Assistant per sviluppo

• Website: cristianspastry.vercel.app
• Email: contact@cristianspastry.com
• Instagram: @cristianspastry
• GitHub: @Cristianspastry