Introduction

I'm thrilled to kick off my blog series dedicated to developing engaging and responsive web applications utilizing Single Page Application (SPA) architecture. The series showcases a thorough project demonstration and a collection of multipart blog entries that explore full-stack components in-depth, featuring the latest tools and methodologies in the field.

This series is structured as a step-by-step tutorial covering Angular frontend development, middleware web API creation, and essential security practices. It guides you through the entire process of constructing a web application, starting from designing the frontend to configuring the backend server and securing the application against prevalent vulnerabilities.

Tutorial 1: Full-stack Angular 15, Bootstrap 5, and .NET 7 API: Project Demo (this post)

Tutorial 2: Understanding the Client App Built with Angular 15 and Bootstrap 5. Read More >>

Tutorial 3: Implementing Server-Side Pagination, Sorting, Filtering, and Modal Details. Read More >>

Tutorial 4: Comprehensive Guide to REST API from Design to Implementation. Read More >>

Tutorial 5: EF Core Pagination for 2 Million Rows, Performance Optimization, and Key Takeaways. Read More >>

Tutorial 6: Generating Realistic Test Data with the Bogus Library: Fake It Till You Make It! Read More >>

Tutorial 7: EF Core Migration Strategies: Selecting the Best Approach for Prototyping and Production. Read More >>

Tutorial 8: CRUD Operations with CQRS and Mediator Pattern in REST API. Read More >>

Tutorial 9: In-depth Exploration of Token Server: Managing Clients, Users, Roles, and Scopes. Read More >>

Tutorial 10: Securing Angular Authentication with Duende IdentityServer: Login and Token Refresh. Read More >>

Tutorial 11: Securing Angular Applications with JWT-Based Authentication, Authorization, and Role-Based Access Control (RBAC). Read More >>

Tutorial 12: Protecting Web API with JWT and Security Policies. Read More >>

Tutorial 13: Migrating Entity Framework Core from MS SQL to Oracle Database. Read More >>

Tutorial 14: Upgrading from Angular 15 to 16: A Full-stack Project using Angular and .NET Core WebAPI. Read More >>

Welcome to Tutorial 1 of this blog series, where we will examine a demo Talent Management project utilizing the following technologies:

• Client-side: Angular 15/TypeScript and Bootstrap 5 for UI/UX design
• Server-side: C# .NET 7 API, Entity Framework Core 7, and MS SQL Server for the database; Duende IdentityServer for security.

The provided source code represents a full-stack Single-Page Application (SPA). The frontend offers a user-friendly interface built with Angular 15 and Bootstrap 5, enabling users to manipulate the records stored in the database.

On the backend, the application is constructed with C# .NET 7 API and employs Entity Framework Core 7 as the ORM for database interactions. The API endpoints manage all CRUD (Create, Read, Update, Delete) operations, allowing users to add, view, modify, and remove records.

Key features include server-side pagination, sorting, and filtering, which facilitate easy navigation through extensive datasets. Users can sort items by various fields and filter records using keyword searches. The pagination feature allows users to view a specific number of records per page, simplifying the management of large volumes of data.

Example screenshots of the full-stack Angular, Web API, and Token Service components can be found below.

Application Architecture

The sample project is structured around the Clients-ApiResources-TokenService (CAT) pattern, a widely used architecture for building single-page applications (SPA) that connect to a server-side API. This architecture consists of three primary components:

• Clients: This represents the application's frontend, typically developed using JavaScript frameworks like Angular, React, or Vue.js. The client is responsible for managing user interactions, presenting the user interface, and maintaining the application's state.
• ApiResources: This is the backend component, usually created with web frameworks such as Express, Ruby on Rails, or ASP.NET. ApiResources handle requests from the client, execute business logic, and interact with the database.
• TokenService: This service manages user authentication and authorization, issuing and validating JSON Web Tokens (JWT) for server authentication.

In this architecture, the client communicates with ApiResources via a Web API to retrieve and update data. ApiResources can also interact with the TokenService to validate user credentials and issue JWT tokens. Figure 1 illustrates the relationships among the components.

The Clients and ApiResources exchange information using the HTTP protocol. The client sends requests to ApiResources to retrieve or modify data, which respond with the corresponding status codes and data. The client employs the JWT token for authentication with the ApiResources, sending the token in the headers of every request.

The Clients-ApiResources-TokenService architecture is a versatile and scalable model that promotes a separation of concerns, making testing and maintenance easier. Learn more about the CAT pattern here. It’s worth a read!

Source Code Repositories

The demo Talent Management project is comprised of three distinct yet interconnected repositories: the Angular 15 repository, the .NET 7 API resource repository, and the Duende token service repository.

1. Angular 15 Client

   The Angular 15 repository serves as the frontend interface, offering users an intuitive platform for managing and accessing talent data. This repository's source code was initially generated using the ngX-Rocket template before incorporating custom code.

2. .NET 7 API Resources

   The .NET 7 API resource repository functions as the backend, delivering access to talent data and implementing essential business logic. The API resource project's source code was generated using the clean architecture template OnionAPI, available for download from the Visual Studio Marketplace.

3. Duende IdentityServer for Token Service

   The Duende token service repository is responsible for managing authentication and authorization, ensuring that only authorized users can access sensitive talent data. The source code for this repository was generated using the skoruba Admin UI template.

Running the Talent Management Project on Localhost

> There is no place like 127.0.0.1

Are you prepared to explore the Talent Management project? To begin, you will need to download and install several components.

First, clone the Duende Token Service from https://github.com/workcontrolgit/CATTokenService.AdminUI.Duende. This service manages authentication and authorization for the Talent Management project. After downloading, use Visual Studio 2022 to open and run the software. Refer to the guide for Cloning and Launching the Duende IdentityServer Token Service in Visual Studio 2022.

Next, clone the ApiResource from https://github.com/workcontrolgit/TalentManagement-ApiResources-Net7. This component acts as a bridge between the Angular frontend and the backend services, handling data retrieval and storage along with server-side logic. After downloading, use Visual Studio 2022 to open and run the software. More information on API project scaffolding and execution can be found in this blog post.

Finally, clone the Angular app from https://github.com/workcontrolgit/TalentManagement-Client-Angular15. This is the front-end part of the Talent Management project, managing the user interface and interactions. After downloading, use Visual Code to open and run the Angular app with npm install and ng serve in the terminal.

Figure 1 (in the earlier Application Architecture section) illustrates the port numbers used when running the entire stack of Clients, Api Resources, and Token Service on localhost. This diagram specifically outlines the various ports involved in communication between the different components, aiding in understanding data flow within the system and simplifying troubleshooting.

Screencast

The following video showcases how to navigate the sample project UI on a local host. Sit back, relax, and enjoy the background music.

Experience the Demo: See It in Action!

I have utilized the capabilities of GitHub Actions to set up a demo of the Angular 15 client on GitHub Pages. Additionally, I have successfully integrated the backend ApiResource and Token Service within Azure. To see the demo in action, simply click the link below:

Demo Link ?

This integration of GitHub Actions with Azure ensures a smooth deployment process, enabling you to experience the Angular 15 client along with the associated backend services. Take this chance to explore the demo and witness the seamless interaction between the frontend and backend components. Follow the link to access the demo and experience the power of this combined solution.

Recommended Content

Below is a compilation of several blog posts I have published on the subjects of Angular, API Resources, and Token Services. These posts aim to provide readers with valuable insights and knowledge, saving them the time required for their own research. I hope you find them beneficial and enlightening.

Summary

The Talent Management project is an engaging, full-stack single-page application that employs Angular for the frontend, .NET 7 for backend ApiResources, and TokenService for managing authentication and authorization. With this project set up and operational on localhost, you will gain invaluable insights into SPA architecture and development. Get ready to dive into some exciting coding!

> Thanks for reading! I hope you found this informative. For more content, please follow me and consider becoming a member on Medium. With your support, I'll continue to create great material for you. Have a wonderful day ahead! — Fuji Nguyen