Voglio creare un'app di gestione task con le seguenti funzionalità:
- Aggiunta, modifica ed eliminazione di task
- Categorizzazione per priorità (alta, media, bassa)
- Filtri per stato (completati, in corso)
- Design moderno e responsive
- Statistiche sul completamento
- Dark mode

Crea un'applicazione React completa e funzionante.

import React, { useState } from 'react';
import { Plus, Trash2, Edit2, Check, Filter } from 'lucide-react';

export default function TaskManager() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');
  const [priority, setPriority] = useState('medium');
  const [filter, setFilter] = useState('all');
  const [darkMode, setDarkMode] = useState(false);

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, {
        id: Date.now(),
        text: newTask,
        priority,
        completed: false,
        createdAt: new Date()
      }]);
      setNewTask('');
    }
  };

  const toggleComplete = (id) => {
    setTasks(tasks.map(task => 
      task.id === id ? {...task, completed: !task.completed} : task
    ));
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  const filteredTasks = tasks.filter(task => {
    if (filter === 'completed') return task.completed;
    if (filter === 'active') return !task.completed;
    return true;
  });

  const stats = {
    total: tasks.length,
    completed: tasks.filter(t => t.completed).length,
    active: tasks.filter(t => !t.completed).length
  };

  return (
    <div className={`min-h-screen ${darkMode ? 'bg-gray-900' : 'bg-gray-50'} transition-colors`}>
      {/* Header con toggle dark mode */}
      <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
        <div className="max-w-4xl mx-auto px-4 py-6">
          <div className="flex justify-between items-center">
            <h1 className={`text-3xl font-bold ${darkMode ? 'text-white' : 'text-gray-900'}`}>
              Task Manager Pro
            </h1>
            <button
              onClick={() => setDarkMode(!darkMode)}
              className="px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600"
            >
              {darkMode ? '☀️' : '🌙'}
            </button>
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-4 py-8">
        {/* Statistiche */}
        <div className="grid grid-cols-3 gap-4 mb-8">
          <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} p-6 rounded-lg shadow`}>
            <div className={`text-2xl font-bold ${darkMode ? 'text-white' : 'text-gray-900'}`}>
              {stats.total}
            </div>
            <div className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>Totali</div>
          </div>
          <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} p-6 rounded-lg shadow`}>
            <div className="text-2xl font-bold text-green-500">{stats.completed}</div>
            <div className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>Completati</div>
          </div>
          <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} p-6 rounded-lg shadow`}>
            <div className="text-2xl font-bold text-blue-500">{stats.active}</div>
            <div className={`${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>In corso</div>
          </div>
        </div>

        {/* Form aggiunta task */}
        <div className={`${darkMode ? 'bg-gray-800' : 'bg-white'} p-6 rounded-lg shadow-lg mb-8`}>
          <div className="flex gap-4">
            <input
              type="text"
              value={newTask}
              onChange={(e) => setNewTask(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && addTask()}
              placeholder="Aggiungi un nuovo task..."
              className={`flex-1 px-4 py-2 rounded-lg border ${
                darkMode 
                  ? 'bg-gray-700 border-gray-600 text-white' 
                  : 'bg-white border-gray-300'
              } focus:outline-none focus:ring-2 focus:ring-blue-500`}
            />
            <select
              value={priority}
              onChange={(e) => setPriority(e.target.value)}
              className={`px-4 py-2 rounded-lg border ${
                darkMode 
                  ? 'bg-gray-700 border-gray-600 text-white' 
                  : 'bg-white border-gray-300'
              }`}
            >
              <option value="low">Bassa</option>
              <option value="medium">Media</option>
              <option value="high">Alta</option>
            </select>
            <button
              onClick={addTask}
              className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center gap-2"
            >
              <Plus size={20} />
              Aggiungi
            </button>
          </div>
        </div>

        {/* Filtri */}
        <div className="flex gap-2 mb-6">
          {['all', 'active', 'completed'].map(f => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className={`px-4 py-2 rounded-lg ${
                filter === f
                  ? 'bg-blue-500 text-white'
                  : darkMode
                  ? 'bg-gray-800 text-gray-300'
                  : 'bg-white text-gray-700'
              }`}
            >
              {f === 'all' ? 'Tutti' : f === 'active' ? 'Attivi' : 'Completati'}
            </button>
          ))}
        </div>

        {/* Lista task */}
        <div className="space-y-3">
          {filteredTasks.map(task => (
            <div
              key={task.id}
              className={`${darkMode ? 'bg-gray-800' : 'bg-white'} p-4 rounded-lg shadow flex items-center gap-4`}
            >
              <button
                onClick={() => toggleComplete(task.id)}
                className={`w-6 h-6 rounded border-2 flex items-center justify-center ${
                  task.completed ? 'bg-green-500 border-green-500' : 'border-gray-300'
                }`}
              >
                {task.completed && <Check size={16} className="text-white" />}
              </button>
              <div className="flex-1">
                <div className={`${task.completed ? 'line-through opacity-50' : ''} ${
                  darkMode ? 'text-white' : 'text-gray-900'
                }`}>
                  {task.text}
                </div>
                <div className="flex gap-2 mt-1">
                  <span className={`text-xs px-2 py-1 rounded ${
                    task.priority === 'high' 
                      ? 'bg-red-100 text-red-700' 
                      : task.priority === 'medium'
                      ? 'bg-yellow-100 text-yellow-700'
                      : 'bg-green-100 text-green-700'
                  }`}>
                    {task.priority === 'high' ? 'Alta' : task.priority === 'medium' ? 'Media' : 'Bassa'}
                  </span>
                </div>
              </div>
              <button
                onClick={() => deleteTask(task.id)}
                className="p-2 text-red-500 hover:bg-red-50 rounded"
              >
                <Trash2 size={18} />
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

npx create-react-app task-manager-pro
cd task-manager-pro
npm install lucide-react
```

3. **Sostituire** `src/App.js` con il codice generato

4. **Deploy su piattaforme gratuite**:
   - **Vercel**: `npm install -g vercel && vercel`
   - **Netlify**: drag & drop della build folder
   - **GitHub Pages**: configurazione nel repository

## Strategie di Monetizzazione

### 1. **Vendita su Marketplace di Codice**

**CodeCanyon (Envato Market)**
- Marketplace più popolare per script e app
- Commissione: 37.5% per autori nuovi
- Prezzo medio: $19-$59
- Esempio listing: "Task Manager Pro - React Application"

**Creative Market**
- Ideale per template e UI kit
- Commissione: 30%
- Pubblico designer e developer

**Gumroad**
- Setup semplicissimo
- Commissione: 10% + 30¢
- Ottimo per vendite dirette

### 2. **Freemium con Funzionalità Premium**

Offri una versione base gratuita e vendi:
- Temi premium aggiuntivi
- Integrazioni (Google Calendar, Trello)
- Export avanzati (PDF, Excel)
- Versione senza branding

**Prezzo suggerito**: $9-29 one-time o $4.99/mese

### 3. **Licenze per Aziende**

Crea pacchetti:
- **Personal**: $29 (1 sito)
- **Business**: $99 (5 siti)
- **Enterprise**: $299 (illimitato + supporto)

### 4. **Vendita come Template**

**ThemeForest/TemplateMonster**
- Converti l'app in template completo
- Aggiungi documentazione
- Prezzo: $39-$79

### 5. **Servizio Custom**

Usa l'app come portfolio per offrire:
- Personalizzazioni su richiesta
- Sviluppo di feature custom
- Consulenza implementazione

**Tariffa oraria**: $50-150/ora

## Best Practices per Aumentare le Vendite

### 1. **Documentazione Professionale**

Chiedi a Claude:
```
Crea una documentazione completa per questa app includendo:
- Guida installazione
- Spiegazione funzionalità
- FAQ
- Troubleshooting comune
```

### 2. **Demo Live Accattivante**

- Deploya una versione demo funzionante
- Crea screenshots professionali
- Video di presentazione (2-3 minuti)

### 3. **Codice Pulito e Commentato**

Claude può aiutarti:
```
Aggiungi commenti dettagliati al codice per facilitare 
la comprensione e la personalizzazione da parte degli acquirenti