Demo Centro Sportivo

Appearance

Polisport CenterDemo Angular 21 SSR

Template per centro polisportivo italiano — fitness, piscina, sport di squadra. Dati mock realistici Bologna 2026.

Demo live
Source code
🅰️

Angular 21 SSR

Server-Side Rendering nativo con `outputMode: server` e prerender route statiche per SEO ottimale.

📊

Mock data realistici

6 JSON Italia 2026 (info, attività, abbonamenti, staff, orari, faq) curati per il verticale Centro Sportivo.

🚀

Deploy automatico

Vercel per il sito demo (SSR runtime) + GitHub Pages per la documentazione (VitePress).

🔍

SEO ready

JSON-LD SportsActivityLocation con sport/amenityFeature/openingHours, meta tag dinamici, Open Graph.

⚡

Performance

Lighthouse target ≥90 SEO + ≥85 Performance + ≥95 Best Practices.

🎨

Customizable

Design tokens CSS (verde campo + blu acqua + giallo energia), font Bebas Neue display, light theme.

Introduzione ​

Questo repository contiene il template Angular 21 SSR per un sito web professionale per Centro Polisportivo in Italia.

Sviluppato come parte dell'ecosistema demo federicocalo.dev/demo/, il progetto è open-source (MIT) e può essere usato come base per:

  • Showcase tecnico per vendita servizi web Federico Calò
  • Punto di partenza per developer/agency che customizzano per cliente PMI italiana
  • Riferimento didattico per pattern Angular 21 SSR + Signals + ReactiveForms GDPR

Funzionalità testabili ​

Aprendo la demo live puoi esplorare:

PaginaPathCosa testare
Home/Hero + KPI bar + filtro attività featured + CTA
Attività/attivitaGrid 8 attività + filtro categoria via Signal (Indoor/Outdoor/Acqua/Wellness)
Abbonamenti/abbonamenti5 pricing card con badge "Più scelto", sconti annuali, note legali
Staff/staff8 profili con certificazioni, specializzazioni, bio
Prenota tour/prenotaReactive Form GDPR: FormArray multi-checkbox attività, validazione in tempo reale, thank-you state

Il filtro attività in /attivita è il pezzo tecnico più interessante: usa signal() + computed() + toSignal() con changeDetection: OnPush — zero chiamate HTTP extra al cambio filtro.

Il form prenotazione in /prenota mostra: FormArray per checkbox multipli, validazione Validators.requiredTrue per GDPR Art.6, markAllAsTouched() on submit, minDate dinamico per evitare date passate.

Stack ​

LayerScelta
FrameworkAngular 21.2.x SSR standalone
BuildoutputMode: server + prerender 5 route
Node22 LTS
StyleCSS scoped + design tokens custom properties
StateSignals + toSignal() + computed()
Mock data6 JSON statici src/assets/mock/
RoutingStandalone lazy-loaded routes
FormsReactive Forms + FormArray
SchemaJSON-LD SportsActivityLocation
Hosting demoVercel (fra1 EU)
Hosting docsGitHub Pages (VitePress)

Quick start ​

bash
git clone https://github.com/fedcal/demo-centro-sportivo.git
cd demo-centro-sportivo
npm install
npm start
# → http://localhost:4200

Per build SSR locale:

bash
npm run build
npm run serve:ssr:centro-sportivo
# → http://localhost:4000

Perché questo template ​

Il mercato italiano delle PMI per Centro Sportivo ha caratteristiche specifiche:

  • Pain comuni: prenotazioni telefoniche, sito obsoleto/assente, no SEO locale, lock-in SaaS verticali costosi
  • Differenziatori: sito proprio (no commission OTA), AI on-prem (Ollama), performance Lighthouse 90+
  • Pricing tier Federico: Base €500-800 (100h), Intermedio €1.500-2.200 (280h), Avanzato €4.000-6.000 (520h)

Vedi Tier & Features per dettaglio feature per fascia di investimento.

Riferimenti ​