DEV Community: FLUX

NestJS for beginners

FLUX — Wed, 13 May 2026 12:14:11 +0000

What is NestJS ?

Nest is framework to build efficient, scalable Node.js server side applications. We can simply use Typescript and concepts like OOPS, Functional Programming are very basic things you should know.

Why to use Nestjs ?

NestJS is built around modularity thus it can organize the code into separate modules, making it easier to understand, maintain and scale.

Connect

Repository

Understanding basic setup

1.1 Setting up project

1.2 Module creation

1.3 Module
Controller and services 2.1 [Controller] 2.2 [Services]

1. Basics

Setting up project

$ npm i -g @nestjs/cli
$ nest new project-name

This is sufficient to setup our NestJS project which would give us few node modules along with some boilerplate files, an 'src' directory with core files.

src
 |_app.controller.spec.ts
 |_app.controller.ts
 |_app.module.ts
 |_app.service.ts
 |_main.ts

app.controller.ts : Basic controller with single route app.controller.spec.ts : Unit tests for controller app.module.ts : Root module of the application app.service.ts : Basic service with single method main.ts : Entry file of application using 'NestFactory' to create Nest application instance

NOTE : We won't be going deep dive into the controllers , services , modules , just gain hands-on asap along with few insights like how under the hood things NestJS help us make our application scalable.

Module creation

You can create a module by just using you CLI

nest g module auth #auth module
nest g module user #user module

This would create a 'auth' folder along with auth.module.ts ( controller, services you have to create manually otherwise you can simply create it with nest g resource auth' to get all the files and folders structured with basic CRUD ) same goes with 'user'

auth
 |_auth.module.ts
 |_auth.controller.ts
 |_auth.service.ts

Remember every module can be shared with other modules. Imagine sharing a service from 'user' module to auth service to create a user, to do that we need to export UserService provider by adding it in module's export array.

import { Module } from '@nestjs/common';
import { UserService } from './user.service';

@Module({
    providers:[UserService],
    exports:[UserService]
})
export class UserModule {}

Why are we doing this ? We can simply import the service right ?

No. Because it may lead to increased memory usage and if we import it from the modules then we can simply use the same instance of the UserModule to import the UserService, also it makes the shared resources consistent all across the application.

Note : We can import and export modules as well! Go try , think of a problem where you need a 'common' module and use it in other modules.

Understanding Dependency injection !!

Remember we had a 'user' service import in 'auth'

Yes we studied about 'shared instance' but dependency injection means calling the 'service' ( injecting ) when we need it.

Inside our 'auth.module.ts' we would subscribe the service

Inside our 'auth.service.ts' we would inject the dependency

providers: [UserService]: You tell Nest to create the instance.
exports: [UserService]: You share that instance with other modules.
imports: [UserModule] (in Auth): You "subscribe" to those shared services.
constructor(private user: UserService): You finally inject it into the specific file where you want to write logic.

Controller and Service

Controller

We use controllers to handle the incoming request and send the desired response to the end user

To create a controller let us use

nest g controller user

this would generate us user.controller.ts and user.controller.spec.ts and update the user.module.ts with controllers:[UserController];

Service

We use service to write the the business logic

Are you curious like why is there a decorator @Injectable ?

Because it serves the sole purpose of injecting the dependency.

Suppose to perform db operations which you want to implement in your 'user' service just to perform Basic CRUD

Our Decorator during runtime serves the db service to ensure we can easily inject it and perform the business logic.

@Injectable()
export class UserService {
  constructor(private dbService: DbService) {}
  // Nest sees the metadata: "Ah, this needs a DbService. I'll go grab the one from the database module."
}

What would happen without the @Injectable decorator ?

Nest has no idea what 'DbService' is at runtime. It cannot "inject" it.

// NO DECORATOR
export class UserService {
  constructor(private dbService: DbService) {} 
}

Let us create a Dummy service and import it in Controller

import { Injectable } from '@nestjs/common';

@Injectable()
export class UserService{
    sign(){
        return(`Hi, I'm signup`)
    }
}

Now importing the business logic 'sign()' from service into controller at route '/signup-msg'

import { Controller, Post } from '@nestjs/common';
import { UserService } from './user.service';

@Controller('user')
export class userController {
    constructor(private readonly userService: UserService){}

    @Post('signup-msg')
        getSignupmsg(){
            return this.userService.sign();
        }
}

Open your postman try it on the endpoint

'localhost:3000/usersignup-msg'

So, now let us go do some CRUD operations inside our application.

NOTE : I'm not writing down the code for connecting your database with Prisma because there are high chances of version mismatch just make sure you have a prismaService that would help us perform db operations in other modules.

Understanding DTOs and Class validator in NestJS

DTOs ( Data transfer Objects ) are used to structure the data and validate when we sent across the network. We have 'class-validator' package to perform heavy-lifting for us.

Installing class-validator

npm i class-validator class-transformer

Creating and validating DTOs

Inside our 'auth' folder create a DTO folder, create files named loginUser.dto.ts, registerUser.dto.ts which would have all the validation rules we need for authentication.

import { IsEmail, IsString } from "class-validator";

export class LoginDto {
    @IsEmail()
    email! : string;

    @IsString()
    password! : string;
}

import { Role } from "@prisma/client";
import { IsEmail, IsEnum, IsOptional, IsString} from "class-validator";

export class RegisterDto {
    @IsString()
    fname! : string;

    @IsString()
    lname! : string;

    @IsEmail()
    email! : string;

    @IsString()
    password! : string;

    @IsEnum(Role)
    @IsOptional()
    role?: Role;
}

Above, @IsEmail(),@IsString(),@IsEnum() are decorators provided by 'class-validator'.This tells us that we should have valid email id and valid password in form of string also you can add your own regex pattern for password. Note : We've enum roles in our prisma schema below is our schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
}

model User {
  id            String         @id @default(uuid())
  fname         String
  lname         String
  email         String         @unique
  password      String
  createdAt     DateTime       @default(now())
  role          Role           @default(USER)
  course        Course[]
  refreshTokens RefreshToken[]
}

model RefreshToken {
  id        String  @id @default(uuid())
  userId    String
  tokenHash String
  isRevoked Boolean @default(false)
  user      User    @relation(fields: [userId], references: [id])
}

model Course {
  id          String @id @default(uuid())
  name        String
  description String
  userId      String
  price       Int
  user        User   @relation(fields: [userId], references: [id])
}

enum Role {
  ADMIN
  USER
}

Using DTOs in controllers

Now let us use the DTOs in controller to validate our request we are sending, @body decorator will help us use the DTO more efficiently.

import { Body, Controller, Post } from '@nestjs/common';
import { AuthService } from './auth.service';
import { RegisterDto } from './dto';

@Controller('auth')
export class AuthController {
  constructor(private authService: AuthService) {}

  @Post('signup')
  signup(@Body() dto: RegisterDto ) {
    return this.authService.signup(dto);
  }
}

Global validation pipe

The whitelist: true option will trim the properties that don't have any decorators in the DTO.

In DTO we have only this mentioned,
{
"email",
"password",
"role"
}
so if we try to send extra info it would trim it and send the essentials
{
"email",
"password",
"role",
"salary" // this won't be sent if we have 'whitelist:true'
}

Things to be updated and will continue soon..

1. Basic Hashing

2. Config Setup

3. Passport & Jwt

4. Guards

5. Testing

Angular for beginners

FLUX — Wed, 13 May 2026 12:12:53 +0000

Setup

The command below will install Angular with global access.

npm install -g @angular/cli

Why ?

Helps us scaffold the angular like creating new project, component, serving the application, building, etc.


# creating angular project named 'angular101'
ng new angular101

According to your preferences select the options and you should get the project folder ready with name you had in your cli.

Running the project locally


# go to the directory
cd angular101

# start/run the angular project
npm start

We have our application running on 'http://localhost:4200' Under the hood we have 'ng serve' that runs the application ( to be angular specific )

Component

Angular follows component based architecture and these components are re-usable components with class based programming.

We use decorator '@Component' that turns a simple class into a component. The '@Component' decorator is called component's metadata. Which includes few properties like selector,imports...

We defined '@Component' BEFORE the class.

Properties we have in our '@Component' :

selector: Every component has CSS selector that determines how component is used. For more about selectors
imports: To use any other component,pipe or directive you must add it here in the imports array.
templateUrl & styleUrl: Both component resides in relative directory where 'templateUrl' is to connect html file and styleUrl is to connect CSS file.

example


@Component({
standalone:true, // by default true ( no need to even write )
selector: 'app-root',
imports: [RouterOutlet],
templateUrl: './app.html',
styleUrl: './app.css'
})

export class App{}

Another thing to mention is 'standalone : true' is by default present from Angular 19 onwards and to reduce boilerplate we don't have it inside the component decorator.

What is standalone ?

Angular is components are standalone (not dependent on each other until and unless we explicitly dervice them in imports), meaning that you can directly add components to imports manually if we need. Before in angular we had app.module.ts which used to manage all the components at single place, manage all the modules, etc at single place but the standalone feature has provided each component to be independent and imports can be done inside each component.

Variable declaration in Angular ?

We cannot just simply use let or const inside the class because those are temporary variables which are meant to live and die inside method. Thus if you are pretty clear with temporal dead zones in Javascript then you must've understood the concept how const and let can contradict the OOP concept.

Curious deprecation of app.module.ts

Angular uses standalone components since v17 and the NgModules are deprecated.

What was NgModule used for ?

Before we used to import and declare all the imports in one place of all the components at same place which used to cause unnecessary bloating thus standalone introduced managing the components dependency inside its own component deprecating the central registry.

TLDR : A component imports what it uses

Input and Output

Input

The input function allows us to use Angular input in components. The input function would either have a optional input with inital value or have a required value instead.

Inputs are signals that hold the latest value of input bound from the parent.

course-card.ts

export class CourseCard {
  course = input.required<Course>();
}

course-card.html

<div class="course-card">
    <div class="course-desc">
        {{ course().description }}
    </div>
    <div class="image">
        <img [src]="course().iconUrl" alt="logo" width="300">
    </div>
</div>

Let us fix something with keyword called '@let'

Sometimes we need to simplify the stuff ( more readable code ) then we can use the '@let' keyword to take the control over the code and instead of repeating stuff ex:

We can see above code where we are repeating the 'course()' so let us simply make it something more simple by declaring the 'course()' once and then using it something like this below.

course-card.html

@let c = course();// defining once reusing it later

<div class="course-card">
    <div class="course-desc">
        {{ c.description }}
    </div>
    <div class="image">
        <img [src]="c.iconUrl" alt="logo" width="300">
    </div>
</div>

Output

The output function allows us to use the Angular output in components. You can use outputs to emit values to parent component.

How do we manage the output ? Template event binding :


(courseSelected)="showSelectedCourse($event)"

example for setting up output :

course-card.ts ( setting up output event )

export class CourseCard {
  course = input.required<Course>();

  courseSelected = output<Course>();

  onCourseViewed(){
    this.courseSelected.emit(this.course());
  }
}

course-card.html

@let c = course();

<div class="course-card">
    <div class="course-desc">
        {{ c.description }}
    </div>
    <div class="image">
        <img [src]="c.iconUrl" alt="logo" width="300">
    </div>
    <button (click)="onCourseViewed()">View course</button>
</div>

app.ts

export class App {
  protected readonly title = signal('Angular project lol');
  coreCourse = COURSES[0];
  rxJsCourse = COURSES[1];

  onCourseSelected(course:Course){
    console.log(`Seleted course :`,course)
  }
}

The child component emits a custom event via 'courseSelected' output, the parent binds to that event in its template with '(courseSelected=onCourseSelected($event)'

app.html

<div>
  <h1> {{ title() }} </h1>
  <!-- <h2> {{ subtitle }}</h2> -->
  <div class="courses">
    <course-card (courseSelected)="onCourseSelected($event)" [course]="coreCourse" ></course-card>
    <course-card (courseSelected)="onCourseSelected($event)" [course]="rxJsCourse" ></course-card>
  </div>
</div>

Below is table for better understanding

Direction	TS Declaration	Template Binding
Parent → Child (Data)	`x = input<T>()`	`[x]="..."`
Child → Parent (Event)	`y = output<T>()`	`(y)="handler($event)"`
Two-way Binding	`z = model<T>()`	`[(z)]="..."`

@for,@if,@switch

The different ways of using $index , $count inside for parent level, let, alias, let+alias

Few more jargons like $even,$odd,$first,$last