Angular Frontend & ASP.NET Core Web API
About
Questo repository fornisce un'architettura full-stack moderna per applicazioni web scalabili, che combina un frontend Angular 21 con Tailwind CSS per lo stile e PrimeNG per i componenti, testato con Vitest. Il backend è sviluppato con API ASP.NET Core Minimal su .NET 10, seguendo un'architettura Vertical Slice, mentre la documentazione e i test delle API sono basati su Scalar. La comunicazione sicura tra frontend e backend è implementata tramite JWT (JSON Web Token), garantendo autenticazione e autorizzazione affidabili. Questo approccio offre un'interfaccia pulita e modulare, che costituisce una solida base per soluzioni web moderne e ad alte prestazioni.Frontend
- PrimeNG - Libreria di componenti per l'interfaccia utente Angular La suite di interfaccia utente di nuova generazione per Angular. Migliora le tue applicazioni web con la suite completa di componenti per l'interfaccia utente personalizzabili e ricchi di funzionalità di PrimeNG.
-
Lazy-Loaded Virtual Scrolling Virtual scroll viene implementato creando un array che corrisponde già al numero totale di record e riempiendolo con segnaposto. Mentre l'utente scorre, solo la porzione di dati richiesta viene caricata dal server e inserita nelle posizioni corrette. Se tale porzione è già presente, non viene effettuata alcuna richiesta. Questo mantiene la tabella leggera, pur mostrando un set di dati completo e scorrevole.
-
Vitest | Next Generation testing framework - Vitest è il nuovo framework di test predefinito per Angular, progettato per essere veloce, moderno e compatibile con TypeScript. Sfrutta Vite per build ultraveloci e offre un'API simile a Jest per una maggiore familiarità.
Vitest Web UI
Vitest console
-
HttpInterceptor - Servizio Angular che intercetta globalmente le richieste e le risposte HTTP per modificarle (ad esempio, aggiungere intestazioni, modificare URL) o gestire gli errori prima che raggiungano l'app o il server.
Disconnected state
JWT auth
-
Zod - Zod è una libreria di convalida degli schemi basata su TypeScript. Permette di definire schemi per i dati e di convalidare gli oggetti rispetto a tali schemi in fase di esecuzione. Ho utilizzato Zod per convalidare la comunicazione tra backend e frontend. Questo significa che: quando il backend invia una risposta, la si convalida rispetto a uno schema Zod per garantire che corrisponda alla struttura prevista. Quando si inviano dati al backend, si convalida il payload prima di effettuare la richiesta.
If validation fails, a toast message is displayed.
-
ESLint ESLint viene utilizzato per mantenere la base di codice pulita e coerente rilevando automaticamente gli errori, applicando lo stile del codice e applicando le best practice di Angular e TypeScript durante lo sviluppo.
ESlint validation.
Backend
-
Scalar - Scalar è una piattaforma di esperienza per sviluppatori moderna e open source progettata per semplificare la documentazione e i test delle API, offrendo un'interfaccia intuitiva, funzionalità avanzate e una migliore usabilità rispetto agli strumenti tradizionali come Swagger, rendendola ideale per creare, esplorare e gestire le API in modo efficiente.
Scalar
Starting
Frontend
npm i
npm run vitest:ui
npm run lint
npm start
Backend
dotnet build
dotnet run