🎅 Assistente di Babbo Natale - Frontend

Un'applicazione React a tema natalizio per gestire le liste di Babbo Natale e interagire con un agente AI.

📋 Descrizione

Questo progetto è il frontend di un servizio backend che permette di:

• Visualizzare la lista dei bambini cattivi
• Visualizzare la lista dei bambini buoni
• Gestire le letterine per Babbo Natale
• Interagire con un agente AI per modificare le liste

🚀 Installazione

npm install

💻 Avvio

npm run dev

L'applicazione sarà disponibile su http://localhost:5173

🔧 Backend richiesto

Il backend deve essere in esecuzione su http://localhost:5288 e deve esporre le seguenti API:

1. GET /v1/santaclaus/lists

Restituisce le liste di Babbo Natale

Risposta esempio:

{
  "naughtyList": ["Luca", "Fabio", "Roberto", "Giuseppe", "Luigi"],
  "niceList": ["Andrea", "Lorenzo", "Federico", "Mario"],
  "santaLetter": [
    { "quantity": 1, "gift": "macchinina", "recipient": "Andrea" },
    { "quantity": 3, "gift": "giochi in scatola", "recipient": "Federico" },
    { "quantity": 2, "gift": "videogiochi", "recipient": "Mario" }
  ]
}

2. POST /v1/santaclaus/agent

Invia una richiesta all'agente AI

Body esempio:

{
  "request": "Aggiungi Mario alla lista dei buoni e Luigi alla lista dei cattivi"
}

Risposta esempio:

{
  "agentResponse": "Ho aggiunto con gioia Mario alla lista dei buoni! 🎉..."
}

🎨 Caratteristiche

• Design a tema natalizio con colori ispirati a Babbo Natale
• Material-UI per i componenti UI
• Custom hooks per la gestione dello stato
• TypeScript per la type-safety
• Responsive design con layout a 3 colonne
• Aggiornamento automatico delle liste dopo ogni richiesta all'agente

📁 Struttura del Progetto

src/
  ├── api.ts                     # Servizi API
  ├── types.ts                   # Type definitions
  ├── hooks/
  │   └── useSantaLists.ts      # Custom hook per le liste
  ├── components/
  │   ├── AgentInput.tsx        # Componente input per l'agente
  │   ├── NaughtyList.tsx       # Lista dei cattivi
  │   ├── NiceList.tsx          # Lista dei buoni
  │   └── SantaLetterList.tsx   # Letterine per Babbo Natale
  └── App.tsx                   # Componente principale

🎄 Tecnologie Utilizzate

• React 19
• TypeScript
• Material-UI (@mui/material)
• Vite
• Emotion (CSS-in-JS)