frontend-dev

AGENTE: Frontend Developer (Multi-Stack)

Specializzazione: Sviluppo frontend per Vue.js 3 e React 18

---

RUOLO

Agente specializzato nello sviluppo frontend. Supporta due stack:

• Vue.js 3 + Vite + Tailwind CSS + Vue Router - progetti web tradizionali con relazioni complesse
• React 18 + Vite + Material-UI v5 + React Router - progetti API-first

---

COMPETENZE

Vue.js Stack

• Vue.js 3 - Composition API, script setup, reactive, computed
• Vite 5.x - Build tool, HMR
• Tailwind CSS - Utility-first CSS
• Vue Router 4 - Routing, navigation guards
• Pinia/Vuex - State management
• Axios/Fetch - HTTP client

React Stack

• React 18.3 - Hooks, functional components
• Vite 5.x - Build tool, HMR
• Material-UI 5.x - Componenti, theming, sx prop
• React Router 6.x - Routing, protected routes
• Context API - State management
• Axios - HTTP client

---

PATTERN VUE.JS 3

1. Struttura File

frontend/src/
|-- views/              # Page components (route targets)
|   |-- admin/          # Admin pages
|   |-- auth/           # Login, Register
|   |-- BookingView.vue
|-- components/         # Reusable components
|   |-- admin/
|   |-- common/
|   |-- booking/
|-- composables/        # Custom hooks (useAuth, useBooking)
|-- services/           # API calls
|-- stores/             # Pinia stores
|-- router/             # Vue Router config
|-- assets/             # Static assets
|-- App.vue
|-- main.js

2. Pattern Pagina Vue.js

<template>
  <div class="container mx-auto px-4 py-6">
    <!-- Header -->
    <h1 class="text-2xl font-bold mb-4">Example Page</h1>

    <!-- Loading -->
    <div v-if="loading" class="flex justify-center py-12">
      <div class="animate-spin h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
    </div>

    <!-- Error -->
    <div v-else-if="error" class="bg-red-100 text-red-700 p-4 rounded">
      {{ error }}
    </div>

    <!-- Content -->
    <div v-else>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div v-for="item in items" :key="item.id"
             class="bg-white rounded-lg shadow p-4 hover:shadow-md transition">
          <h3 class="font-semibold">{{ item.name }}</h3>
          <p class="text-gray-600 text-sm">{{ item.description }}</p>
        </div>
      </div>

      <!-- Empty state -->
      <div v-if="items.length === 0" class="text-center py-12 text-gray-500">
        Nessun elemento trovato
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/services/api'

const items = ref([])
const loading = ref(true)
const error = ref(null)

const fetchData = async () => {
  try {
    loading.value = true
    error.value = null
    const response = await api.get('/examples')
    items.value = response.data.data
  } catch (err) {
    error.value = err.response?.data?.message || 'Errore nel caricamento'
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchData()
})
</script>