ScommettiApp/frontend-angular/CHANGELOG.md

Changelog - Frontend Angular

Tracciamento modifiche specifiche del frontend Angular.

---

✅ Completato

Setup Iniziale

• Inizializzazione progetto Angular 20
• Configurazione Vite come bundler
• Configurazione Tailwind CSS
• Setup TypeScript 5.8
• Configurazione RxJS 7.8

Architettura & Struttura

Servizi

• ApiService (services/api.service.ts)

  • Comunicazione HTTP con backend
  • Base URL configurabile
  • Metodi per tutte le entità (users, groups, bets, friends)
  • Gestione errori HTTP

• DataService (services/data.service.ts)

  • State management con RxJS signals
  • Cache dati utente corrente
  • Cache amici, gruppi, scommesse
  • Metodi per refresh dati
  • Observable streams per reactive updates

Modelli TypeScript

• Bet Model (models/bet.model.ts)

  • Interface Bet completa
  • Enum BetStatus (ACTIVE, AWAITING_VALIDATION, COMPLETED)
  • Enum ParticipantRole (PARTICIPANT, OBSERVER)
  • Type BetParticipant

• User Model (inline nei servizi per ora)

• Group Model (inline nei servizi per ora)

Componenti Implementati

App Component

• AppComponent (app.component.ts)
  • Layout principale con navigation bar
  • Gestione routing tra viste con signal
  • Bottom navigation responsive
  • 5 sezioni: Home, Scopri, Crea Scommessa, Gruppi, Profilo
  • FAB centrale per creazione scommessa

Home Section

• HomeComponent (components/home/home.component.ts)

  • Dashboard principale
  • Visualizzazione scommesse attive/passate
  • Toggle tra filtri temporali e per gruppo
  • Integrazione con sotto-componenti

• BetsByTimeComponent (components/home/bets-by-time/bets-by-time.component.ts)

  • Filtro scommesse per periodo temporale
  • Periodi: Oggi, Questa Settimana, Questo Mese
  • Indicatore visuale periodo selezionato
  • Fetch dati da API con filtri

• BetsByGroupComponent (components/home/bets-by-group/bets-by-group.component.ts)

  • Filtro scommesse per gruppo
  • Selezione gruppo da dropdown
  • Opzione "Tutti i Gruppi"
  • Fetch dati da API per gruppo specifico

Discover Section

• DiscoverComponent (components/discover/discover.component.ts)
  • Esplorazione scommesse pubbliche
  • Lista scommesse scopribili
  • Possibilità di entrare come observer

Create Bet Section

• CreateBetComponent (components/create-bet/create-bet.component.ts)
  • Form creazione nuova scommessa
  • Campi: titolo, descrizione, posta in gioco, data fine, gruppo, visibilità
  • Validazione form
  • Event emitter per chiusura
  • Integrazione con API

Groups Section

• GroupsComponent (components/groups/groups.component.ts)

  • Lista tutti i gruppi dell'utente
  • Navigazione verso dettaglio gruppo
  • Creazione nuovo gruppo
  • Badge contatore membri

• GroupDetailComponent (components/groups/group-detail/group-detail.component.ts)

  • Dettaglio singolo gruppo
  • Lista membri con avatar
  • Aggiunta membri al gruppo
  • Rimozione membri (se admin)
  • Eliminazione gruppo

Profile Section

• ProfileComponent (components/profile/profile.component.ts)

  • Visualizzazione profilo utente
  • Avatar, nome, email, punteggio
  • Statistiche personali
  • Lista richieste di amicizia pending
  • Bottone modifica profilo

• EditProfileComponent (components/profile/edit-profile/edit-profile.component.ts)

  • Form modifica dati profilo
  • Campi: nome, email, avatar URL
  • Validazione input
  • Save/Cancel actions

Shared Components

• BetCardComponent (components/bet-card/bet-card.component.ts)
  • Card riutilizzabile per visualizzare scommesse
  • Badge stato scommessa (Attiva, In Attesa, Completata)
  • Informazioni partecipanti con avatar
  • Posta in gioco
  • Date inizio/fine
  • Responsive design

UI/UX

Design System

• Tema dark con palette:
  • Background: slate-900
  • Cards: slate-800
  • Accenti: cyan-400/cyan-500
  • Testo: white/slate-300
• Tailwind CSS utilities
• Responsive layout mobile-first
• Icone SVG per navigation

Navigation

• Bottom navigation bar sticky
• 5 tab con icone e label
• Indicatore visuale tab attiva (color cyan)
• FAB centrale per azione primaria (Crea Scommessa)
• Hover states e transitions

Interazioni

• Click handlers per navigazione
• Form submissions
• Toggle filters
• Dropdown selects
• Event emitters tra parent/child components

Configurazione

• package.json - Dipendenze e scripts
• angular.json - Configurazione Angular CLI
• tsconfig.json - TypeScript configuration
• tailwind.config.js (implicito con Tailwind)
• vite.config (gestito da Angular)

---

📋 Da Fare

Funzionalità Core Mancanti

Scommesse

• Visualizzazione dettaglio scommessa completo
  • Modal o pagina dedicata
  • Cronologia eventi
  • Commenti (se implementati)
• Modifica scommessa esistente
• Eliminazione scommessa con conferma
• Dichiarazione vincitore
• Sistema di votazione vincitore
• Join scommessa pubblica come observer
• Leave scommessa
• Invita amici a scommessa

Profilo & Amici

• Ricerca utenti
• Invio richiesta di amicizia (UI)
• Accetta/rifiuta richiesta amicizia (UI)
• Lista amici visualizzata nel profilo
• Visualizzazione profilo altri utenti
• Statistiche avanzate profilo
  • Win rate
  • Streak
  • Classifica generale
• Notifiche

Gruppi

• Modifica info gruppo
• Invita utenti al gruppo
• Gestione permessi gruppo (admin/membro)
• Statistiche gruppo
• Ricerca membri
• Leave gruppo

UX Improvements

Stati & Feedback

• Loading states per tutti i componenti
  • Skeleton loaders
  • Spinners
  • Progress indicators
• Error handling UI
  • Toast notifications
  • Error messages inline
  • Retry mechanisms
• Empty states
  • Nessuna scommessa
  • Nessun amico
  • Nessun gruppo
• Success confirmations
  • Toast per azioni completate
  • Feedback visuale

Animazioni & Transizioni

• Animazioni transizione tra viste
• Micro-interazioni su bottoni
• Slide/fade effects per modal
• Loading animations
• Skeleton loading per cards

Interattività

• Pull-to-refresh
• Infinite scroll per liste lunghe
• Swipe gestures (elimina, archivia)
• Drag and drop (riordino)
• Conferme azioni critiche
  • Modal di conferma eliminazione
  • Double-tap protection

Filtri & Ricerca

• Ricerca scommesse per titolo
• Filtri avanzati scommesse
  • Per stato
  • Per partecipanti
  • Per data
  • Per posta in gioco
• Ordinamento scommesse
  • Per data
  • Per popolarità
  • Per punteggio
• Salvataggio preferenze filtri

Componenti da Creare

• BetDetailModal/Page - Dettaglio completo scommessa
• ToastNotification - Notifiche toast
• ConfirmDialog - Dialog conferma generica
• SearchBar - Barra di ricerca riutilizzabile
• UserCard - Card utente riutilizzabile
• EmptyState - Componente empty state generico
• LoadingSpinner - Spinner riutilizzabile
• AvatarUpload - Upload avatar con preview
• DatePicker - Selettore date customizzato
• FriendsList - Lista amici con azioni
• NotificationsList - Lista notifiche
• StatsCard - Card statistiche riutilizzabile

Routing & Navigation

• Implementare Angular Router
  • Route per ogni vista
  • Route parametriche (es. /group/:id)
  • Query parameters per filtri
  • Route guards
• Deep linking
• Browser back button handling
• Route transition animations

State Management

• Migliorare DataService
  • Gestione stato più robusta
  • Cache invalidation strategy
  • Optimistic updates
  • Rollback on error
• Considerare NgRx o Signals API avanzate
• Persistent state (localStorage)
• Sync state across tabs

Forms & Validation

• Reactive forms everywhere
• Validatori custom
• Error messages user-friendly
• Form dirty/pristine tracking
• Unsaved changes warning
• Auto-save drafts

Testing

• Unit test per componenti
• Unit test per servizi
• Integration test
• E2E test con Cypress/Playwright
• Coverage almeno 80%
• Visual regression testing

Performance

• Lazy loading components
• Virtual scrolling per liste lunghe
• Image lazy loading
• OnPush change detection
• Memoization expensive computations
• Bundle size optimization
• Tree shaking
• Code splitting

Accessibilità (a11y)

• ARIA labels
• Keyboard navigation
• Focus management
• Screen reader support
• Contrast ratios WCAG AA
• Semantic HTML

PWA Features

• Service Worker
• Offline mode
• App manifest
• Install prompt
• Push notifications
• Background sync

Internazionalizzazione

• i18n setup (Angular i18n)
• Traduzioni IT/EN
• Date/number formatting locale-aware
• RTL support (se necessario)

DevOps & Build

• Environment files (dev, staging, prod)
• Build optimization per production
• Source maps
• Linting (ESLint)
• Formatting (Prettier)
• Pre-commit hooks (Husky)
• CI/CD pipeline

Monitoring & Analytics

• Error tracking (Sentry)
• Analytics (Google Analytics / Plausible)
• Performance monitoring
• User behavior tracking

---

🐛 Bug Conosciuti

• Nessun handling errori API in caso di network failure
• Refresh dati non automatico (solo manuale al mount)
• Possibili race conditions su multiple API calls

---

🔧 Miglioramenti Tecnici Proposti

• Separare models in file dedicati
• Creare barrel exports per organizzazione
• Introdurre design patterns (Repository, Facade)
• Standardizzare naming conventions
• Constants file per magic strings
• Utility functions file
• Typed HTTP responses
• Error types customizzati
• Logging service
• Configuration service

---

Note Tecniche

Dipendenze Principali

• @angular/core: ^20.3.0
• @angular/common: ^20.3.0
• @angular/platform-browser: ^20.3.0
• rxjs: ^7.8.2
• tailwindcss: latest
• typescript: ~5.8.2
• vite: ^6.2.0

Scripts NPM

npm run dev      # Avvia dev server (porta 4200)
npm run build    # Build production
npm run preview  # Preview build production

Porte

• Dev server: 4200
• API backend: 3000

Browser Target

• Modern browsers (Chrome, Firefox, Safari, Edge)
• ES2022+ support required