Angular NestJS Full-Stack Application

A full-stack user management application built with Angular, NestJS, and TypeScript.

The application supports complete user management operations along with PDF generation, viewing, and downloading functionality.

Features

• Add new users
• Edit existing users
• Delete users
• View the complete users list
• Generate PDF files from the users list
• View generated PDF files
• Download generated PDF files
• Separate Angular frontend and NestJS backend
• TypeScript-based implementation
• SCSS-based frontend styling

Technology Stack

Frontend

• Angular 16
• TypeScript
• HTML
• SCSS

Backend

• NestJS 10
• TypeScript
• Node.js

Backend Libraries

pdf-creator-node

Used to generate PDF files from HTML content.

uuid

Used to generate unique user identifiers.

Backend Preview

Frontend Styling

The frontend uses SCSS for application styling.

SCSS extends CSS with useful features such as variables, nesting, reusable styling patterns, and improved stylesheet organization.

Frontend Preview

Project Structure

angular-nestjs-full-stack-application/
├── backend/
├── frontend/
├── .gitignore
└── README.md

The repository contains two independent applications:

• backend/ - NestJS server application
• frontend/ - Angular client application

Run the Backend

Move into the backend directory:

cd backend

Install dependencies:

npm install

Start the NestJS development server:

npm run start:dev

The backend server will start on the port configured by the application.

Run the Frontend

Open another terminal and move into the frontend directory:

cd frontend

Install dependencies:

npm install

Start the Angular application:

npm run start

The frontend application will start on the port configured by the project.

Application Workflow

Angular Frontend
      ↓
NestJS Backend
      ↓
User Management
      ↓
PDF Generation
      ↓
View / Download PDF

The Angular frontend communicates with the NestJS backend for user management operations.

Users can be created, viewed, updated, and deleted through the application interface.

The users list can also be converted into a PDF document for viewing or downloading.

Application Screenshots

User Management Interface

Application Views

PDF and Additional Application Views

Development Notes

When running the project locally:

1. Start the NestJS backend.
2. Start the Angular frontend in a separate terminal.
3. Open the frontend application in the browser.
4. Use the application to manage users.
5. Generate, view, or download PDFs from the users list.

Documentation

Additional architecture, workflow, implementation, and project notes are available in:

Author

Ashish Ranjan

Full-Stack Web Developer

Links

• Portfolio: https://www.ashishranjan.net
• GitHub: https://github.com/a2rp
• CodePen: https://codepen.io/ash1198
• LinkedIn: https://www.linkedin.com/in/aashishranjan
• Facebook: https://www.facebook.com/theash.ashish/
• YouTube: https://www.youtube.com/@ashishranjan-ashz?sub_confirmation=1
• Email: mailto:ash.ranjan09@gmail.com

Support

• Support: https://a2rp-donation-page.netlify.app/
• Buy Me A Coffee: https://buymeacoffee.com/a2rp
• Patreon: https://patreon.com/a2rp

License

This project is licensed under the MIT License.