2025-03-16 | Modern Full-Stack Development with TypeScript

A Comprehensive Seminar on Angular, Nest.js, PostgreSQL, Prisma, Swagger, and Docker

Introduction (10 minutes)

• Angular - For building dynamic client-side applications
• Nest.js - For creating structured and scalable server-side applications
• PostgreSQL - As our reliable and powerful database system
• Prisma - For type-safe database access
• Swagger - For API documentation and testing
• Docker - For containerization and deployment consistency

By the end of this seminar, you’ll understand how these technologies complement each other and how to leverage their combined power to build modern web applications efficiently.

Part 1: Understanding the Stack Architecture (15 minutes)

The Big Picture

Let’s start by understanding how these technologies fit together:

1. Angular: Handles the presentation layer, user interactions, and client-side logic
2. Nest.js: Manages server-side business logic, API endpoints, and server operations
3. PostgreSQL: Stores and manages application data
4. Prisma: Bridges the gap between our TypeScript code and the database
5. Swagger: Documents our API for easier consumption and testing
6. Docker: Packages everything into consistent, deployable containers

Why This Stack?

This stack offers several advantages:

• TypeScript Everywhere: From frontend to backend to database access
• Strong Typing: Catch errors at compile time rather than runtime
• Modular Architecture: Components are loosely coupled but highly cohesive
• Scalability: Each piece can scale independently
• Developer Experience: Consistent patterns and tooling across the stack

Real-World Applications

This stack is ideal for:

• Enterprise applications
• Complex business systems
• Applications requiring scalability
• Teams with specialized frontend and backend developers
• Projects emphasizing code quality and maintainability

Part 2: Frontend with Angular (30 minutes)

Angular Overview

Angular is a platform and framework for building single-page client applications using HTML and TypeScript.

Key concepts:

• Component-based architecture
• Dependency injection
• Reactive programming with RxJS
• Strong typing with TypeScript

Essential Angular Features

1. Components: The building blocks of Angular applications
2. Services: Singleton objects for shared functionality
3. Modules: Organizing code into functional cohesive blocks
4. Routing: Navigation between different views
5. Forms: Template-driven and reactive approaches
6. HttpClient: Communication with backend services

Demo: Building an Angular Component

// product.component.ts
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../services/product.service';
import { Product } from '../models/product.model';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
  products: Product[] = [];
  loading = false;
  error: string | null = null;

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.loadProducts();
  }

  loadProducts(): void {
    this.loading = true;
    this.productService.getProducts()
      .subscribe({
        next: (data) => {
          this.products = data;
          this.loading = false;
        },
        error: (err) => {
          this.error = 'Failed to load products';
          this.loading = false;
          console.error(err);
        }
      });
  }
}

Best Practices for Angular

• Lazy loading modules for better performance
• State management with NgRx for complex applications
• Reactive programming patterns
• Component testing with Jasmine and Karma
• Style isolation and component encapsulation

Part 3: Backend with Nest.js (30 minutes)

Nest.js Overview

Nest.js is a progressive Node.js framework for building efficient, reliable, and scalable server-side applications.

Key concepts:

• Heavily inspired by Angular architecture
• Modular design
• Dependency injection
• Decorators for metadata
• Middleware support

Essential Nest.js Features

1. Controllers: Handle incoming requests
2. Providers/Services: Implement business logic
3. Modules: Organize application structure
4. Pipes: Transform and validate input data
5. Guards: Control access to routes
6. Interceptors: Transform responses and handle errors

Demo: Building a Nest.js Controller and Service

// products.controller.ts
import { Controller, Get, Post, Body, Param, UseGuards } from '@nestjs/common';
import { ProductsService } from './products.service';
import { CreateProductDto } from './dto/create-product.dto';
import { JwtAuthGuard } from '../auth/jwt-auth.guard';
import { ApiTags, ApiOperation, ApiResponse } from '@nestjs/swagger';

@ApiTags('products')
@Controller('products')
export class ProductsController {
  constructor(private readonly productsService: ProductsService) {}

  @Get()
  @ApiOperation({ summary: 'Get all products' })
  @ApiResponse({ status: 200, description: 'Return all products.' })
  findAll() {
    return this.productsService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.productsService.findOne(+id);
  }

  @Post()
  @UseGuards(JwtAuthGuard)
  create(@Body() createProductDto: CreateProductDto) {
    return this.productsService.create(createProductDto);
  }
}

// products.service.ts
import { Injectable } from '@nestjs/common';
import { PrismaService } from '../prisma/prisma.service';
import { CreateProductDto } from './dto/create-product.dto';

@Injectable()
export class ProductsService {
  constructor(private prisma: PrismaService) {}

  async findAll() {
    return this.prisma.product.findMany();
  }

  async findOne(id: number) {
    return this.prisma.product.findUnique({
      where: { id },
    });
  }

  async create(data: CreateProductDto) {
    return this.prisma.product.create({
      data,
    });
  }
}

Best Practices for Nest.js

• Exception filters for consistent error handling
• Validation using class-validator
• Environment configuration management
• Testing with Jest
• Logging strategies