A modern Angular 19 admin dashboard for managing an eShop — products, categories, orders, and users — with built-in analytics and PDF reporting.
- Dashboard — live metrics (orders today, daily revenue, total customers) with Chart.js graphs
- Product & Category management — full CRUD with filtering, sorting, and pagination
- Order management — order list and detail views with PDF export (single or batch)
- User management — create, edit, delete users and view their order history
- JWT authentication — login/logout with automatic token injection and 401/403 handling
| Layer | Library |
|---|---|
| Framework | Angular 19 (standalone components) |
| UI | Angular Material (azure-blue) + Bootstrap 5 |
| Charts | Chart.js 4 / ng2-charts 8 |
| Notifications | ngx-toastr |
| PDF export | jsPDF 3 |
- Node.js 18+
- Angular CLI 19 —
npm install -g @angular/cli - The eShop backend API running at
https://localhost:7188
# Install dependencies
npm install
# Start the development server (http://localhost:4300)
npm start| Command | Description |
|---|---|
npm start |
Dev server on port 4300 |
npm run build |
Production build → dist/ |
npm run watch |
Dev build in watch mode |
npm test |
Unit tests via Karma/Jasmine |
Environment files live in src/environments/:
| File | Used for |
|---|---|
environment.ts |
Development — API at https://localhost:7188/api |
environment.prod.ts |
Production — set apiBaseUrl to your deployed API URL before building |
src/app/
├── core/ # Guards, interceptors, services, models, enums
├── features/ # One folder per route group (login, dashboard, categories, products, orders, users)
└── shared/ # Reusable components (table, pagination, filter controls)
All feature routes are lazy-loaded. Every route except /login and /unauthorized is protected by authGuard.