PL: Nowoczesny szablon aplikacji webowej do zarządzania biblioteką, zbudowany w oparciu o ASP.NET Core 9, Entity Framework Core, PostgreSQL, Angular 19, PrimeNG oraz Tailwind CSS.
EN: A modern web application template for library management, built with ASP.NET Core 9, Entity Framework Core, PostgreSQL, Angular 19, PrimeNG, and Tailwind CSS.
SimpleLibrary jest kompletnym przykładowym projektem aplikacji webowej przeznaczonej do zarządzania biblioteką.
Projekt został przygotowany nie tylko jako gotowy system biblioteczny, ale również jako uniwersalny szablon do budowy własnych aplikacji biznesowych.
Frontend zawiera wiele gotowych przykładów interfejsów i sposobów budowania stron: dashboard, tabele danych, formularze, okna dialogowe, filtrowanie, sortowanie, paginację, komunikaty, formularze z walidacją.
Dzięki temu projekt można łatwo dostosować do własnych potrzeb i wykorzystać jako bazę np. dla:
- systemu magazynowego,
- systemu CRM,
- systemu rezerwacji,
- systemu zarządzania produktami,
- systemu zarządzania użytkownikami,
- aplikacji biznesowej CRUD,
- własnego projektu SaaS.
Istotą projektu jest pokazanie szerokiego zakresu możliwości budowania stron i komponentów Angular/PrimeNG, a nie ograniczenie się wyłącznie do funkcjonalności biblioteki.
- ASP.NET Core 9 Web API
- architektura podzielona na warstwy:
Library.ApiLibrary.ApplicationLibrary.CoreLibrary.Infrastructure
- Entity Framework Core 9
- PostgreSQL
- migracje EF Core
- Repository Pattern
- Unit of Work
- DTO
- walidacja za pomocą FluentValidation
- globalna obsługa wyjątków
- Serilog
- CORS
- OpenAPI
- soft delete
- obsługa relacji pomiędzy encjami
- obsługa wypożyczeń
- endpointy REST dla głównych modułów aplikacji
- Angular 19
- TypeScript
- PrimeNG 19
- PrimeIcons
- Tailwind CSS
- RxJS
- Chart.js
- JsBarcode
- formularze Angular
- komponenty standalone
- routing
- serwisy komunikujące się z API
- dashboard
- tabele danych
- sortowanie
- filtrowanie
- paginacja
- formularze dodawania i edycji
- dialogi
- potwierdzenia operacji
- komunikaty Toast
- tooltipy
- obsługa list wyboru
- multi-select
- widoki administracyjne
- landing page
- responsywny layout
Aktualna aplikacja zawiera m.in.:
- Dashboard
- Books
- Available Books
- Borrowed Books
- Users
- Authors
- Categories
- Publishers
- Borrowings
- Settings
- Landing Page
- Not Found Page
Projekt pokazuje zarówno klasyczne widoki administracyjne, jak i elementy typowe dla nowoczesnych stron internetowych.
W projekcie można znaleźć przykłady:
- tabel z sortowaniem,
- filtrowania danych,
- paginacji,
- formularzy,
- formularzy reaktywnych,
- dialogów,
- przycisków akcji,
- potwierdzania usuwania,
- komunikatów sukcesu i błędów,
- dropdownów,
- multi-selectów,
- kart,
- statystyk,
- wykresów,
- dashboardu,
- menu bocznego,
- topbara,
- footera,
- landing page,
- sekcji Hero,
- sekcji Features,
- sekcji Highlights,
- sekcji Pricing,
- responsywnych komponentów.
Dzięki temu projekt może być wykorzystany jako baza lub katalog przykładów podczas tworzenia własnego frontendu.
SimpleLibrary
│
├── Library.sln
│
├── src
│ │
│ ├── Backend
│ │ ├── Library.Api
│ │ ├── Library.Application
│ │ ├── Library.Core
│ │ └── Library.Infrastructure
│ │
│ └── Frontend
│ ├── src
│ ├── angular.json
│ ├── package.json
│ └── tsconfig.json
│
├── compose.yaml
├── .env
└── .gitignore
Library.Api
EndPoints/
Extensions/
GlobalHandlers/
Program.cs
Library.Application
DTO/
Factories/
Services/
Validators/
Library.Core
Entities/
Exceptions/
Repositories/
IUnitOfWork.cs
Library.Infrastructure
DAL/
Configurations/
Repositories/
LibraryDbContext.cs
Migrations/
RepositoriesRegistration.cs
ServicesRegistration.cs
Taki podział pozwala oddzielić API, logikę aplikacyjną, model domenowy oraz dostęp do danych.
Przed rozpoczęciem instalacji należy zainstalować:
- Git
- .NET SDK 9
- Node.js 20 LTS
- npm
- Angular CLI 19
- PostgreSQL 16 lub nowszy
Opcjonalnie:
- Docker Desktop / Docker Engine
- PostgreSQL GUI, np. pgAdmin
- Visual Studio / JetBrains Rider / Visual Studio Code
git --version
dotnet --version
node --version
npm --version
ng version
psql --versionZainstaluj .NET 9 SDK.
Po instalacji:
dotnet --versionPowinna zostać wyświetlona wersja 9.x.
Zainstaluj Node.js 20 LTS.
Sprawdź:
node --version
npm --versionZainstaluj Angular CLI w wersji używanej przez projekt:
npm install -g @angular/cli@19Sprawdź:
ng versionZainstaluj narzędzie EF Core:
dotnet tool install --global dotnet-efJeżeli narzędzie jest już zainstalowane:
dotnet tool update --global dotnet-efSprawdź:
dotnet ef --versionWersja narzędzia powinna odpowiadać głównej wersji EF Core używanej przez projekt, czyli 9.x.
Projekt wykorzystuje PostgreSQL jako bazę danych.
Można użyć:
- lokalnej instalacji PostgreSQL,
- PostgreSQL uruchomionego w Dockerze,
- zewnętrznego serwera PostgreSQL.
Projekt nie uruchamia kontenera PostgreSQL w obecnym compose.yaml — kontener Dockerowy dotyczy API, dlatego baza danych musi być dostępna niezależnie.
Utwórz bazę:
CREATE DATABASE LibraryDB;oraz użytkownika:
CREATE USER LibraryUser WITH PASSWORD 'password';Nadaj użytkownikowi odpowiednie uprawnienia:
GRANT ALL PRIVILEGES ON DATABASE LibraryDB TO LibraryUser;W zależności od wersji PostgreSQL i konfiguracji serwera może być konieczne nadanie uprawnień również do schematu public.
W katalogu głównym projektu znajduje się plik:
.env
Przykładowa konfiguracja:
ASPNETCORE_ENVIRONMENT=Production
POSTGRES_HOST=localhost
POSTGRES_PORT=5432
POSTGRES_DB=LibraryDB
POSTGRES_USER=LibraryUser
POSTGRES_PASSWORD=passwordDla lokalnego uruchamiania API można również ustawić connection string w konfiguracji ASP.NET Core.
Aktualna konfiguracja infrastruktury korzysta z klucza:
ConnectionString:default
Dlatego przy uruchamianiu bez Dockera należy upewnić się, że ASP.NET Core otrzymuje właściwy connection string, np. w appsettings.json, appsettings.Development.json albo przez zmienną środowiskową.
Przykład:
{
"ConnectionString": {
"default": "Host=localhost;Port=5432;Database=LibraryDB;Username=LibraryUser;Password=password"
}
}git clone <URL_REPOSITORY>
cd SimpleLibraryPrzejdź do katalogu rozwiązania:
dotnet restoreNastępnie skompiluj projekt:
dotnet buildJeżeli oba polecenia wykonają się poprawnie, backend jest gotowy do dalszej konfiguracji.
Projekt zawiera już migrację początkową:
src/Backend/Library.Infrastructure/Migrations/
Znajduje się tam m.in.:
20260809070814_initial.cs
LibraryDbContextModelSnapshot.cs
Jeżeli zmienisz model encji, wykonaj:
dotnet ef migrations add NazwaMigracji \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.Api \
--output-dir MigrationsPrzykład:
dotnet ef migrations add AddBookIsbn \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.Api \
--output-dir Migrationsdotnet ef database update \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.ApiPolecenie utworzy brakujące tabele na podstawie migracji.
Jeżeli migracja nie została jeszcze zastosowana do bazy:
dotnet ef migrations remove \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.ApiNie należy usuwać migracji, która została już zastosowana na współdzielonej lub produkcyjnej bazie danych bez odpowiedniego planu migracji.
Przejdź do katalogu API:
cd src/Backend/Library.ApiUruchom:
dotnet runDomyślnie API jest skonfigurowane do działania pod:
http://localhost:5280
Frontend korzysta z tego adresu poprzez:
src/Frontend/src/environments/environment.ts
Wartość:
export const environment = {
baseUrl: 'http://localhost:5280/'
};W drugim terminalu:
cd src/FrontendZainstaluj zależności:
npm installUruchom Angular:
npm startlub:
ng serveAplikacja będzie dostępna pod:
http://localhost:4200
Najprostszy scenariusz lokalny:
Uruchom PostgreSQL i upewnij się, że baza LibraryDB istnieje.
Z katalogu głównego:
dotnet ef database update \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.Apicd src/Backend/Library.Api
dotnet runcd src/Frontend
npm install
npm startNastępnie otwórz:
http://localhost:4200
Projekt zawiera:
compose.yaml
oraz Dockerfile dla API.
Przed uruchomieniem ustaw właściwe dane w:
.env
Następnie:
docker compose up -d --buildSprawdzenie kontenerów:
docker compose psLogi:
docker compose logs -fZatrzymanie:
docker compose downW obecnej konfiguracji Docker Compose uruchamia API. PostgreSQL powinien być dostępny pod adresem ustawionym w
POSTGRES_HOST.
Projekt został zaprojektowany tak, aby można było potraktować go jako starter/template, a nie tylko jako gotową bibliotekę.
Przykładowy proces dostosowania:
Encje:
Book
Author
Publisher
Category
User
Borrow
można zastąpić własnymi modelami biznesowymi.
Przykładowo:
Product
Customer
Order
Category
Warehouse
Invoice
Utwórz encję w:
Library.Core/Entities
Dodaj konfigurację w:
Library.Infrastructure/DAL/Configurations
Dodaj repozytorium:
Library.Infrastructure/DAL/Repositories
Dodaj DTO i serwis w warstwie Application.
Na końcu utwórz migrację:
dotnet ef migrations add AddProduct \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.Api \
--output-dir Migrationsi zastosuj ją:
dotnet ef database update \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.ApiEndpointy znajdują się w:
src/Backend/Library.Api/EndPoints
Serwisy frontendowe znajdują się w:
src/Frontend/src/app/service
Strony znajdują się w:
src/Frontend/src/app/pages
Następnie dodaj trasę w:
src/Frontend/src/app/pages/pages.routes.ts
Dla przykładowego modułu Product:
Core
└── Entities
└── Product.cs
Application
├── DTO
│ └── ProductDto.cs
├── Services
│ └── ProductService.cs
└── Validators
└── ProductDtoValidator.cs
Infrastructure
├── DAL
│ ├── Configurations
│ │ └── ProductConfiguration.cs
│ └── Repositories
│ └── ProductRepository.cs
└── Migrations
Api
└── EndPoints
└── ProductEndpoints.cs
Frontend
├── pages
│ └── product
│ ├── product.component.ts
│ └── product.component.html
└── service
└── product.service.ts
Taki schemat można powtarzać dla kolejnych modułów.
Projekt może być zasilony przykładowymi danymi książkowymi.
W repozytorium dostępny jest również plik:
books-100-test-dataset-year-string.json
Zawiera przykładowe rekordy książek wraz z autorami, kategoriami, wydawcami, liczbą stron, rokiem wydania i ISBN.
Plik może być wykorzystany do testowania endpointów oraz interfejsu aplikacji.
Przy rozbudowie projektu warto zachować istniejący podział odpowiedzialności:
API
↓
Application
↓
Core
Infrastructure → Core / Application
W szczególności:
- logika biznesowa nie powinna być umieszczana bezpośrednio w endpointach,
- dostęp do bazy danych powinien pozostać w Infrastructure,
- DTO powinny oddzielać API od encji domenowych,
- walidacja powinna być wykonywana przed wykonaniem operacji biznesowych,
- każda zmiana modelu bazy danych powinna być obsługiwana przez migrację,
- komponenty Angular powinny korzystać z serwisów do komunikacji z API,
- konfiguracja adresu API powinna być oddzielona od kodu komponentów.
Projekt może być traktowany jako baza do tworzenia własnych aplikacji.
Możesz:
- zmienić wygląd,
- zmienić nazwy modułów,
- zmienić model danych,
- dodać własne moduły,
- usunąć niepotrzebne funkcje,
- zmienić backend,
- rozbudować frontend,
- wykorzystać istniejące komponenty jako przykłady,
- dostosować aplikację do konkretnego procesu biznesowego.
Przed wykorzystaniem projektu komercyjnie należy sprawdzić licencje zastosowanych bibliotek oraz elementów zewnętrznych.
SimpleLibrary is a complete example of a modern web application for library management.
The project is designed not only as a ready-to-use library system, but also as a reusable starter/template for building custom business applications.
The frontend contains many examples of how different types of pages and UI components can be built: dashboards, data tables, forms, dialogs, filtering, sorting, pagination, notifications, validation.
Because of this, the project can be adapted to many different use cases, for example:
- inventory management,
- CRM systems,
- booking systems,
- product management,
- user management,
- CRUD business applications,
- SaaS applications.
The main purpose of the project is to demonstrate a broad range of Angular/PrimeNG page and component possibilities rather than being limited to library-specific functionality.
- ASP.NET Core 9 Web API
- layered architecture:
Library.ApiLibrary.ApplicationLibrary.CoreLibrary.Infrastructure
- Entity Framework Core 9
- PostgreSQL
- EF Core migrations
- Repository Pattern
- Unit of Work
- DTOs
- FluentValidation
- global exception handling
- Serilog
- CORS
- OpenAPI
- soft delete
- entity relationships
- borrowing management
- REST endpoints for the main application modules
- Angular 19
- TypeScript
- PrimeNG 19
- PrimeIcons
- Tailwind CSS
- RxJS
- Chart.js
- JsBarcode
- Angular forms
- standalone components
- routing
- API services
- dashboard
- data tables
- sorting
- filtering
- pagination
- create/edit forms
- dialogs
- confirmation dialogs
- toast notifications
- tooltips
- dropdowns
- multi-select controls
- administration views
- landing page
- responsive layout
The current application contains, among others:
- Dashboard
- Books
- Available Books
- Borrowed Books
- Users
- Authors
- Categories
- Publishers
- Borrowings
- Settings
- Landing Page
- Not Found Page
The project demonstrates both classic administration interfaces and modern website sections.
The project contains examples of:
- sortable tables,
- data filtering,
- pagination,
- forms,
- reactive forms,
- dialogs,
- action buttons,
- delete confirmations,
- success/error notifications,
- dropdowns,
- multi-select controls,
- cards,
- statistics,
- charts,
- dashboards,
- side navigation,
- topbars,
- footers,
- landing pages,
- Hero sections,
- Features sections,
- Highlights sections,
- Pricing sections,
- responsive components.
This makes the project useful as a frontend starter and a reference implementation for building custom Angular applications.
SimpleLibrary
│
├── Library.sln
│
├── src
│ │
│ ├── Backend
│ │ ├── Library.Api
│ │ ├── Library.Application
│ │ ├── Library.Core
│ │ └── Library.Infrastructure
│ │
│ └── Frontend
│ ├── src
│ ├── angular.json
│ ├── package.json
│ └── tsconfig.json
│
├── compose.yaml
├── .env
└── .gitignore
Install the following:
- Git
- .NET SDK 9
- Node.js 20 LTS
- npm
- Angular CLI 19
- PostgreSQL 16 or newer
Optional:
- Docker Desktop / Docker Engine
- pgAdmin
- Visual Studio / JetBrains Rider / Visual Studio Code
Verify the installation:
git --version
dotnet --version
node --version
npm --version
ng version
psql --versionInstall the .NET 9 SDK.
Verify:
dotnet --versionThe output should be a 9.x version.
Install Node.js 20 LTS.
Verify:
node --version
npm --versionInstall Angular CLI 19:
npm install -g @angular/cli@19Verify:
ng versionInstall the EF Core command-line tool:
dotnet tool install --global dotnet-efIf it is already installed:
dotnet tool update --global dotnet-efVerify:
dotnet ef --versionThe major version should match the project's EF Core version: 9.x.
The project uses PostgreSQL as its database.
You can use:
- a local PostgreSQL installation,
- PostgreSQL running in Docker,
- an external PostgreSQL server.
The current compose.yaml starts the API container but does not define a PostgreSQL container. Therefore, PostgreSQL must be available separately.
Example:
CREATE DATABASE LibraryDB;Create the database user:
CREATE USER LibraryUser WITH PASSWORD 'password';Grant access:
GRANT ALL PRIVILEGES ON DATABASE LibraryDB TO LibraryUser;Depending on the PostgreSQL version and configuration, you may also need to grant permissions on the public schema.
The root directory contains:
.env
Example:
ASPNETCORE_ENVIRONMENT=Production
POSTGRES_HOST=localhost
POSTGRES_PORT=5432
POSTGRES_DB=LibraryDB
POSTGRES_USER=LibraryUser
POSTGRES_PASSWORD=passwordWhen running the API outside Docker, make sure ASP.NET Core receives a valid connection string.
The infrastructure layer currently reads:
ConnectionString:default
For example:
{
"ConnectionString": {
"default": "Host=localhost;Port=5432;Database=LibraryDB;Username=LibraryUser;Password=password"
}
}This can be placed in an appropriate appsettings file or provided through environment variables.
git clone <REPOSITORY_URL>
cd SimpleLibraryFrom the solution root:
dotnet restoreBuild the solution:
dotnet buildIf both commands complete successfully, the backend is ready.
The project already contains an initial migration:
src/Backend/Library.Infrastructure/Migrations/
including:
20260809070814_initial.cs
LibraryDbContextModelSnapshot.cs
After changing the entity model:
dotnet ef migrations add MigrationName \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.Api \
--output-dir MigrationsExample:
dotnet ef migrations add AddBookIsbn \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.Api \
--output-dir Migrationsdotnet ef database update \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.ApiIf it has not been applied to a shared/production database:
dotnet ef migrations remove \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.Apicd src/Backend/Library.Api
dotnet runThe API is configured to run on:
http://localhost:5280
The Angular environment configuration points to this address:
src/Frontend/src/environments/environment.ts
export const environment = {
baseUrl: 'http://localhost:5280/'
};Open another terminal:
cd src/FrontendInstall dependencies:
npm installStart Angular:
npm startor:
ng serveOpen:
http://localhost:4200
Start PostgreSQL and make sure that LibraryDB exists.
From the project root:
dotnet ef database update \
--project src/Backend/Library.Infrastructure \
--startup-project src/Backend/Library.Apicd src/Backend/Library.Api
dotnet runcd src/Frontend
npm install
npm startThen open:
http://localhost:4200
The repository contains:
compose.yaml
and an API Dockerfile.
Configure:
.env
and run:
docker compose up -d --buildCheck running containers:
docker compose psView logs:
docker compose logs -fStop the application:
docker compose downThe current Docker Compose configuration runs the API. PostgreSQL must be available separately at the host specified by
POSTGRES_HOST.
The project is intended to be used as a starter/template, not only as a library management application.
You can:
- replace the domain model,
- rename modules,
- add new entities,
- remove unused functionality,
- add new REST endpoints,
- create new Angular pages,
- replace the database model,
- redesign the UI,
- reuse existing PrimeNG components,
- use the existing pages as implementation examples.
For example, library entities:
Book
Author
Publisher
Category
User
Borrow
can be replaced or extended with:
Product
Customer
Order
Category
Warehouse
Invoice
A typical new Product module could look like this:
Core
└── Entities
└── Product.cs
Application
├── DTO
│ └── ProductDto.cs
├── Services
│ └── ProductService.cs
└── Validators
└── ProductDtoValidator.cs
Infrastructure
├── DAL
│ ├── Configurations
│ │ └── ProductConfiguration.cs
│ └── Repositories
│ └── ProductRepository.cs
└── Migrations
Api
└── EndPoints
└── ProductEndpoints.cs
Frontend
├── pages
│ └── product
│ ├── product.component.ts
│ └── product.component.html
└── service
└── product.service.ts
This structure can be repeated for additional business modules.
The repository can be populated with sample book data.
The project also contains:
books-100-test-dataset-year-string.json
The file contains sample books with authors, categories, publishers, page counts, release years and ISBN values.
It can be used for testing API endpoints and the frontend.
When extending the application, keep the existing separation of responsibilities:
API
↓
Application
↓
Core
Infrastructure → Core / Application
Recommended practices:
- keep business logic out of API endpoints,
- keep database access inside Infrastructure,
- use DTOs between the API and domain entities,
- validate input before executing business operations,
- create EF Core migrations for model changes,
- use Angular services for API communication,
- keep API configuration outside individual components.
The project can be used as a foundation for creating custom applications.
You may:
- redesign the UI,
- rename modules,
- change the data model,
- add new modules,
- remove unused features,
- extend the backend,
- extend the frontend,
- reuse existing components as examples,
- adapt the application to a specific business process.
Before commercial distribution, verify the licenses of all third-party libraries, templates and external assets used by the project. See the Third-party licenses and commercial use section above.
| Layer | Technology |
|---|---|
| Backend | ASP.NET Core 9 |
| Language | C# |
| ORM | Entity Framework Core 9 |
| Database | PostgreSQL / Npgsql |
| Validation | FluentValidation |
| Logging | Serilog |
| API documentation | OpenAPI |
| Frontend | Angular 19 |
| Frontend language | TypeScript |
| UI | PrimeNG 19 |
| CSS | Tailwind CSS |
| Charts | Chart.js |
| Barcode | JsBarcode |
| Reactive programming | RxJS |
| Containers | Docker |