Angular Study Resources
About | Frontend | Backend | Starting

About

This repository provides a modern full-stack architecture for scalable web applications, combining an Angular 21 frontend with Tailwind CSS for styling and PrimeNG for components, tested using Vitest. The backend is built with ASP.NET Core Minimal APIs on .NET 10, following a Vertical Slice Architecture, while API documentation and testing are powered by Scalar. Secure communication between frontend and backend is implemented through JWT (JSON Web Token), ensuring robust authentication and authorization. This approach delivers a clean, modular, and making it a robust foundation for modern, high-performance web solutions.

Frontend

  • PrimeNG - Angular UI Component Library The Next-Gen UI Suite for Angular. Enhance your web applications with PrimeNG's comprehensive suite of customizable, feature-rich UI components.

  • Lazy-Loaded Virtual Scrolling Virtual scroll is implemented by creating an array that already matches the total number of records and filling it with placeholders. As the user scrolls, only the requested slice of data is loaded from the server and inserted into the correct positions. If that portion is already present, no request is made. This keeps the table lightweight while still showing a full scrollable dataset.

    Virtual scroll

  • Vitest | Next Generation testing framework - Vitest is the new default testing framework for Angular, designed to be fast, modern, and TypeScript-friendly. It leverages Vite for ultra-fast builds and offers a Jest-like API for familiarity.

    Vitest Web UI Vitest
    Vitest console Vitest

  • HttpInterceptor - Angular service that globally intercepts HTTP requests and responses to modify them (e.g., add headers, change URLs) or handle errors before they reach the app or server.

    Disconnected state Vitest
    JWT auth Jwt

  • Zod - Zod is a TypeScript-first schema validation library. It allows you to define schemas for your data and validate objects against those schemas at runtime. I used Zod to validate communication between the Backend and Frontend. This means: When the backend sends a response, you validate it against a Zod schema to ensure it matches the expected structure.When sending data to the backend, you validate the payload before making the request.

    If validation fails, a toast message is displayed. zod

  • ESLint ESLint is used to keep the codebase clean and consistent by automatically detecting errors, enforcing code style, and applying Angular and TypeScript best practices during development.

    ESlint validation. eslint

Backend

  • Scalar - Scalar is a modern, open-source developer experience platform designed to streamline API documentation and testing, offering an intuitive interface, advanced features, and improved usability compared to traditional tools like Swagger, making it ideal for creating, exploring, and managing APIs efficiently.

    Scalar scalar

Starting

Frontend 
											
npm i
npm run vitest:ui
npm run lint
npm start
Backend 
											
dotnet build
dotnet run
GitHub Repository