DEV Community: BuildWithGagan

ReactJS: The Ultimate Beginner-To-Expert Guide On How It Works Behind The Scenes

BuildWithGagan — Fri, 30 May 2025 12:15:08 +0000

Introduction

ReactJS is a powerful, efficient, and flexible JavaScript library developed by Facebook for building user interfaces, especially for single-page applications (SPAs). It allows developers to create large web applications that can update and render efficiently in response to data changes. In this comprehensive guide, we will walk you through everything you need to know about React — from how to create a project using modern tooling to what happens under the hood.

Getting Started With React in 2025

Why Not `create-react-app`?

create-react-app is now deprecated. The React team recommends using modern alternatives such as Vite, Next.js, or Parcel for better development experience.

Create a React Project Using Vite

Step 1: Prerequisites

Ensure Node.js (v16+) is installed:

node -v

Step 2: Create Project with Vite

npm create vite@latest my-react-app -- --template react

For TypeScript:

npm create vite@latest my-react-app -- --template react-ts

Step 3: Install Dependencies

cd my-react-app
npm install

Step 4: Start Development Server

npm run dev

Open http://localhost:5173 in your browser.

Folder Structure

my-react-app/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── App.jsx
    ├── main.jsx
    └── ...

Adding React Router

npm install react-router-dom

Example usage:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Adding Tailwind CSS (Optional)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update tailwind.config.js and include Tailwind in your main CSS.

How React Works Behind the Scenes

Virtual DOM: Efficient UI Representation

React creates a lightweight copy of the real DOM called the Virtual DOM. When the state of a component changes, React updates the Virtual DOM first. Then it compares the new Virtual DOM with the previous one using a process called reconciliation.

Reconciliation and Diffing

React uses a diffing algorithm to determine the minimal number of changes between the current and previous Virtual DOM. It then updates only those parts in the actual DOM, greatly improving performance.

Uses key props to identify changed elements in lists
Applies minimal updates to the real DOM

Fiber Architecture

React Fiber is the internal engine introduced in React 16:

Allows incremental rendering
Supports concurrency
Breaks rendering into units of work
Improves error boundaries

Batching and Scheduling

React groups multiple state updates into a single render pass, a technique called batching. It also uses a scheduler to prioritize urgent tasks like user interactions.

Writing Efficient React Code

Use `React.memo`

Prevents unnecessary re-renders of components when props haven't changed.

Use `useCallback` and `useMemo`

These hooks help you memoize functions and values between renders to improve performance.

Avoid Excessive State

Minimize state and lift it only when necessary. Prefer local component state unless multiple components need to share it.

Lazy Loading

Use React.lazy and Suspense to defer loading components until they’re needed:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

Frequently Asked Questions (FAQs)

What Is the Virtual DOM?

A virtual representation of the real DOM in memory. React uses it to determine what has changed and updates only the necessary parts of the real DOM.

Why Is `create-react-app` Deprecated?

It is outdated and doesn't support the latest JavaScript and tooling features. Vite or Next.js are faster and more flexible alternatives.

What Is Reconciliation in React?

It is the process where React compares the updated Virtual DOM with the previous one and makes the smallest number of changes required to the real DOM.

What Is the Purpose of `key` Props?

They help React identify which elements in a list have changed, been added, or been removed. This improves the performance of re-renders.

How Does React Handle Rendering Performance?

With the help of batching updates, Fiber architecture, memoization, and Virtual DOM diffing, React ensures that your UI remains fast and responsive.

Conclusion

ReactJS is more than just a library for building UI — it’s a performance-focused architecture for building dynamic, scalable applications. With the deprecation of CRA, tools like Vite offer a modern approach to development. Understanding concepts like the Virtual DOM, reconciliation, Fiber architecture, and efficient coding practices gives you an edge in creating responsive and powerful web applications.

Take the time to explore and practice, and you'll go from zero to hero in no time!

What is Git and How to Use It: A Beginner's Guide to Version Control with Daily Useful Commands

BuildWithGagan — Fri, 21 Mar 2025 19:10:39 +0000

Git is an essential tool for developers and anyone working with code. If you’re a beginner looking to understand what Git is used for and how to use it efficiently, you’ve come to the right place. In this comprehensive guide, we’ll cover everything from the basics of Git to real-world scenarios, including daily useful commands that will help you become a Git pro—step by step.

Introduction to Git: The Version Control System You Can’t Ignore

Git is a distributed version control system (VCS) used for tracking changes in files, mainly in software development projects. It enables multiple developers to collaborate on the same project without the risk of overwriting each other's work. Git is not just for developers, though; it’s useful for any kind of project where tracking changes is important.

Why Do You Need Git?

Version Control: Git allows you to manage and keep track of different versions of your code or files.
Collaboration: Multiple people can work on the same project without interfering with each other’s work.
Backup: Git provides an effective way to back up your code and easily restore it to any previous state.

In this guide, we’ll dive into essential Git commands, explain their usage, and provide practical examples to help you master Git from the ground up.

Setting Up Git: The First Step to Git Mastery

Before diving into using Git, you need to install and configure it on your system.

Step 1: Install Git

For Windows: Download Git from git-scm.com. Follow the installation steps with default settings.
For Mac: Open your terminal and type brew install git if you have Homebrew installed. Alternatively, download Git from git-scm.com.
For Linux: Open a terminal and type sudo apt install git for Ubuntu or use the relevant package manager for your Linux distribution.

Step 2: Configure Git

Once Git is installed, you need to configure it with your name and email address. These details will be associated with your commits.

Run the following commands in your terminal (replace the placeholders with your actual name and email):

git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"

Core Git Concepts

Before we get into the daily commands, let’s quickly review a few fundamental Git concepts:

Repository (Repo): A repository is a directory where Git tracks your files and their versions.
Commit: A snapshot of changes in your files. Each commit has a unique identifier (hash).
Branch: A separate line of development. You can create branches to work on new features or fixes without affecting the main codebase (usually called main or master).
Remote: A version of your repository stored on a server, such as GitHub, GitLab, or Bitbucket.
Clone: A copy of a remote repository on your local machine.
Push: Uploads your local changes to the remote repository.
Pull: Fetches the latest changes from the remote repository to your local machine.

Daily Useful Git Commands for Beginners

Now that we’ve covered the basic setup and concepts, let’s go through the daily Git commands you’ll need to use regularly, along with detailed examples of each.

1. `git init`: Creating a New Git Repository

The first command you need when starting a new project is git init. This command initializes a new Git repository in your project folder.

Example:

mkdir my-project
cd my-project
git init

This creates a new .git directory, allowing you to start versioning your project.

2. `git clone`: Copying an Existing Repository

If you want to work on an existing project from a remote source (e.g., GitHub), you’ll need to clone the repository to your local machine.

Example:

git clone https://github.com/username/repository-name.git

This command copies the repository from the specified URL to your local machine, including all the files and version history.

3. `git status`: Checking the State of Your Working Directory

The git status command is one of the most commonly used Git commands. It shows the current state of your working directory and staging area, letting you know which files have been modified, added, or are untracked.

Example:

git status

Output:

On branch main
Your branch is up-to-date with 'origin/main'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   index.html
        modified:   style.css

4. `git add`: Staging Changes for Commit

After you modify files, you need to stage them before committing them to the repository. The git add command is used to stage individual files or all modified files.

Example (staging a single file):

git add index.html

Example (staging all modified files):

git add .

5. `git commit`: Recording Changes

Once you’ve staged your changes, use the git commit command to record them. You’ll also need to provide a commit message explaining the changes you made.

Example:

git commit -m "Fixed bug in the login feature"

6. `git log`: Viewing Commit History

To view the history of commits in your repository, use the git log command. This will display a list of commits, including the commit hash, author, and message.

Example:

git log

Output:

commit abc1234def5678ghijk9
Author: Your Name <your_email@example.com>
Date:   Thu Mar 21 10:00:00 2025 -0400

    Fixed bug in the login feature

7. `git push`: Uploading Local Changes to Remote Repository

After committing your changes locally, you’ll likely want to upload those changes to a remote repository (such as GitHub). This is where the git push command comes in.

Example:

git push origin main

This command pushes your local commits to the main branch of the remote repository.

8. `git pull`: Fetching Changes from the Remote Repository

To update your local repository with changes made by others, use git pull. This command fetches and merges changes from the remote repository to your local branch.

Example:

git pull origin main

9. `git branch`: Listing and Managing Branches

You can create separate branches to work on different features without disturbing the main codebase. The git branch command allows you to list and manage branches.

Example (listing all branches):

git branch

Example (creating a new branch):

git branch feature-xyz

10. `git merge`: Merging Changes from One Branch to Another

Once you’ve finished working on a feature in a separate branch, you can merge it back into the main branch using git merge.

Example:

git checkout main
git merge feature-xyz

Conclusion: Mastering Git Step by Step

Git is an indispensable tool for developers, and mastering its commands is key to being productive and efficient. By learning the basic Git commands covered in this guide—such as git init, git add, git commit, and git push—you’ll be able to handle version control and collaboration on any project with ease.

As you continue working with Git, you’ll become more familiar with advanced commands and workflows. But for now, these basic commands will be more than enough to get you started and help you implement Git in your daily workflow.

With this guide, you now have the foundational knowledge and practical steps to begin using Git in your daily workflow. Whether you’re working on a personal project or collaborating with others, mastering these commands will help you manage code changes effectively. Keep practicing, and soon you’ll be a Git pro!

JavaScript Event Loop Explained: A Beginner's Guide With Examples

BuildWithGagan — Wed, 19 Mar 2025 16:40:16 +0000

Introduction

JavaScript is a single-threaded programming language, meaning it executes one operation at a time. However, it is also capable of handling asynchronous tasks efficiently. The event loop is the secret behind JavaScript's ability to handle multiple tasks asynchronously without blocking the main thread.

Understanding the event loop is crucial for mastering JavaScript, as it directly affects performance, responsiveness, and execution order. In this article, we will break down the event loop step by step with detailed examples and real-world use cases.

What Is the Event Loop?

The event loop is a mechanism in JavaScript that continuously monitors the call stack and the task queue, ensuring that asynchronous operations like API calls, timers, and event listeners are executed correctly without blocking the main thread.

How Does the Event Loop Work?

JavaScript Executes Code Synchronously: The engine executes code line by line.
Asynchronous Tasks Are Handled Separately: Tasks like setTimeout, API calls, and event listeners are delegated to the Web APIs.
Tasks Move to the Callback Queue: Once completed, they are pushed to the callback queue (or microtask queue for promises).
Event Loop Checks the Call Stack: If the stack is empty, it picks the next task from the queue and executes it.

Understanding the Call Stack

The call stack is a data structure where JavaScript keeps track of function execution. Whenever a function is invoked, it gets pushed onto the stack, and when execution completes, it is popped off the stack.

Example:

function first() {
    console.log("First function");
}

function second() {
    console.log("Second function");
}

first();
second();

Execution Flow:

first() is called and pushed onto the stack.
console.log("First function") executes and prints.
first() is popped from the stack.
second() is called, pushed onto the stack, executed, and removed.

How JavaScript Handles Asynchronous Code

JavaScript uses Web APIs (in browsers) or Node.js APIs to handle asynchronous operations like:

setTimeout and setInterval
DOM events (click, keydown, etc.)
HTTP requests (e.g., fetch, XMLHttpRequest)
Promises and async/await

When these operations are triggered, they are handled outside the call stack and moved to a queue when completed.

The Task Queue and Microtask Queue

Task Queue (Macro-task Queue)

Contains callbacks from setTimeout, setInterval, and I/O tasks.
Executes only when the call stack is empty.

Microtask Queue

Contains callbacks from Promises and MutationObserver.
Executed before the task queue whenever the call stack is empty.

Example of the Event Loop in Action

console.log("Start");

setTimeout(() => {
    console.log("Timeout Callback");
}, 0);

Promise.resolve().then(() => {
    console.log("Promise Callback");
});

console.log("End");

Expected Output:

Start
End
Promise Callback
Timeout Callback

Explanation:

console.log("Start") runs first (synchronous, added to the stack).
setTimeout is called, delegated to the Web API, and scheduled for later.
Promise.resolve().then(...) is executed, and its callback is placed in the microtask queue.
console.log("End") runs.
The event loop first processes the microtask queue, executing the promise callback.
Finally, the setTimeout callback runs.

Promises vs. setTimeout: Which Executes First?

Since microtasks (Promises) have higher priority than macrotasks (setTimeout), promises execute first.

Example:

setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));

Output:

Promise
Timeout

Real-World Use Case: Handling API Requests

In real applications, understanding the event loop is crucial for handling asynchronous operations like API calls efficiently.

console.log("Fetching data...");

fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then(response => response.json())
    .then(data => console.log("Data received:", data));

console.log("Other operations...");

Execution Flow:

console.log("Fetching data...") runs.
fetch starts the request and is delegated to the Web API.
console.log("Other operations...") runs.
Once the response arrives, the callback is placed in the microtask queue and executed after synchronous tasks.

Common Mistakes and How to Avoid Them

1. Assuming `setTimeout(fn, 0)` Runs Immediately

It does not run immediately; it waits for the call stack to clear first.

2. Ignoring Microtask Queue Priority

Promises execute before timers, so don't assume setTimeout will execute first.

3. Blocking the Event Loop

Avoid long-running synchronous operations as they block the event loop.

setTimeout(() => console.log("Done"), 1000);

while (true) {} // Blocks execution, preventing timeout from running

Fix: Move heavy computations to Web Workers or use setTimeout to break tasks into chunks.

FAQs

1. What Is the Purpose of the Event Loop?

It ensures that asynchronous code executes efficiently without blocking synchronous execution.

2. Does JavaScript Run on Multiple Threads?

No, JavaScript is single-threaded, but asynchronous tasks run in the background using Web APIs.

3. What Is the Difference Between Macro and Microtasks?

Microtasks (e.g., Promises) have higher priority and execute before macrotasks (e.g., setTimeout).

4. How Can I Optimize JavaScript Performance?

Use asynchronous operations wisely.
Avoid blocking the main thread.
Use Web Workers for heavy computations.

5. Why Is `setTimeout(fn, 0)` Delayed?

It does not run immediately because it must wait for the call stack to be empty.

Conclusion

The event loop is at the heart of JavaScript's asynchronous behavior. By understanding the call stack, task queue, microtask queue, and Web APIs, you can write more efficient, non-blocking code.

Mastering the event loop is essential for debugging performance issues, handling API requests efficiently, and improving user experience. Keep practicing, experiment with different scenarios, and soon, you'll be a JavaScript event loop expert!

JavaScript let, var, and const: Understanding the Differences With Examples

BuildWithGagan — Tue, 18 Mar 2025 17:06:37 +0000

Introduction

When learning JavaScript, understanding the difference between let, var, and const is essential. These three keywords are used for variable declaration, but they behave differently. Using them correctly can improve the efficiency, maintainability, and security of your code. In this article, we will explore the differences between let, var, and const with practical examples and step-by-step explanations.

What Is `var` in JavaScript?

Before ES6 (ECMAScript 2015), var was the only way to declare variables in JavaScript. However, it has some drawbacks related to scope and hoisting.

Characteristics of `var`

Function Scoped - A var variable is only accessible inside the function where it is declared.
Hoisting - Variables declared with var are hoisted to the top of their scope and initialized as undefined.
Can Be Redeclared and Updated - var allows reassigning and redeclaring the same variable without errors.

Example of `var`

function exampleVar() {
    var x = 10;
    if (true) {
        var x = 20; // Reassigns the same variable
        console.log(x); // Output: 20
    }
    console.log(x); // Output: 20 (because of function scope)
}
exampleVar();

Explanation

var is function-scoped, so the value changes within the entire function.
Redeclaring var inside a block does not create a new variable; it modifies the existing one.

What Is `let` in JavaScript?

ES6 introduced let as a replacement for var to provide better scoping and avoid unintended behavior.

Characteristics of `let`

Block Scoped - Variables declared with let are confined to the block {} where they are defined.
Not Hoisted Like var - let is hoisted but remains in the "temporal dead zone" until it is initialized.
Cannot Be Redeclared in the Same Scope - Unlike var, let cannot be declared twice in the same scope.

Example of `let`

function exampleLet() {
    let x = 10;
    if (true) {
        let x = 20; // This creates a new variable inside the block
        console.log(x); // Output: 20
    }
    console.log(x); // Output: 10 (because of block scope)
}
exampleLet();

Explanation

let respects block scope, so the inner x does not affect the outer x.
It prevents accidental overwriting of variables.

What Is `const` in JavaScript?

The const keyword is used to declare variables whose values cannot be reassigned.

Characteristics of `const`

Block Scoped - Like let, const is restricted to the block in which it is defined.
Must Be Initialized - A const variable must be assigned a value at the time of declaration.
Immutable Reference - You cannot reassign a const variable, but if it holds an object or array, its properties or elements can be modified.

Example of `const`

function exampleConst() {
    const x = 10;
    // x = 20; // Error: Assignment to constant variable

    const person = { name: "John" };
    person.name = "Doe"; // Allowed because object properties can be modified
    console.log(person.name); // Output: Doe
}
exampleConst();

Explanation

const prevents reassigning variables but allows modifying object properties.
It is best for values that should not change, such as configuration settings.

Key Differences Between `var`, `let`, and `const`

Feature	`var`	`let`	`const`
Scope	Function	Block	Block
Hoisting	Hoisted as `undefined`	Hoisted but in TDZ	Hoisted but in TDZ
Redeclaration	Allowed	Not Allowed	Not Allowed
Reassignment	Allowed	Allowed	Not Allowed (except for objects/arrays)

Common Mistakes and Best Practices

1. Avoid Using `var`

// Instead of this:
var count = 5;

// Use this:
let count = 5;

2. Use `const` When a Variable Should Not Change

// Instead of this:
let PI = 3.14;

// Use this:
const PI = 3.14;

3. Use `let` for Variables That Change

let userAge = 25;
userAge = 26; // Allowed

FAQs

1. Can I use `var` in modern JavaScript?

Yes, but it is not recommended due to its function-scoping behavior, which can lead to unexpected issues. let and const are preferred.

2. When should I use `const` over `let`?

Use const for variables that should not be reassigned, and let when you need to update the value.

3. What happens if I declare a `let` variable twice in the same scope?

You will get a syntax error because let does not allow redeclaration.

4. Can I modify an object declared with `const`?

Yes, but you cannot reassign the object itself. You can modify its properties.

const user = { name: "Alice" };
user.name = "Bob"; // Allowed
// user = { age: 25 }; // Error

5. Why is `const` still hoisted?

Like let, const is hoisted but remains in the temporal dead zone (TDZ) until it is initialized.

Conclusion

Understanding let, var, and const is crucial for writing clean, efficient, and bug-free JavaScript code.

Use var only if necessary (legacy code).
Use let for mutable variables.
Use const for immutable variables (or references).

By applying these best practices, you can improve the maintainability and readability of your JavaScript projects. Happy coding!

Building an E-Commerce Platform with Full CRUD Operations Using TypeORM Relations in NestJS

BuildWithGagan — Mon, 02 Dec 2024 12:44:33 +0000

Introduction

Developing an e-commerce platform requires seamless integration of various entities like users, products, orders, categories, and more. Using NestJS with TypeORM simplifies this process by providing a structured way to handle relationships and CRUD operations. In this guide, we will explore creating an e-commerce backend from scratch, covering all TypeORM relationships with PostgreSQL as our database.

Why Use TypeORM With NestJS?

Object Relational Mapping: Simplifies database operations.
Relations: Manage one-to-one, one-to-many, and many-to-many relationships efficiently.
Declarative Approach: Use decorators to define entity behavior.

Prerequisites

Before starting, ensure you have the following installed:

Node.js: For running the backend.
NestJS CLI: For generating NestJS resources.
PostgreSQL: As the relational database.

npm install -g @nestjs/cli

Setting Up NestJS and TypeORM

Create a New Project:

   nest new ecommerce-platform

Install Dependencies:

   npm install @nestjs/typeorm typeorm pg

Configure TypeORM: Update src/app.module.ts:

   import { Module } from '@nestjs/common';
   import { TypeOrmModule } from '@nestjs/typeorm';

   @Module({
     imports: [
       TypeOrmModule.forRoot({
         type: 'postgres',
         host: 'localhost',
         port: 5432,
         username: 'your-username',
         password: 'your-password',
         database: 'ecommerce',
         entities: [__dirname + '/../**/*.entity{.ts,.js}'],
         synchronize: true, // Avoid in production
       }),
     ],
   })
   export class AppModule {}

Designing the Database Schema

For an e-commerce platform, the following entities are essential:

User: Represents a customer or admin.
Product: Represents items for sale.
Category: Groups products.
Order: Tracks purchases.

Creating Entities With TypeORM Relations

User Entity:

   import { Entity, Column, PrimaryGeneratedColumn, OneToMany } from 'typeorm';
   import { Order } from './order.entity';

   @Entity()
   export class User {
     @PrimaryGeneratedColumn()
     id: number;

     @Column()
     name: string;

     @Column({ unique: true })
     email: string;

     @OneToMany(() => Order, (order) => order.user)
     orders: Order[];
   }

Product Entity:

   import { Entity, Column, PrimaryGeneratedColumn, ManyToOne } from 'typeorm';
   import { Category } from './category.entity';

   @Entity()
   export class Product {
     @PrimaryGeneratedColumn()
     id: number;

     @Column()
     name: string;

     @Column('decimal')
     price: number;

     @ManyToOne(() => Category, (category) => category.products)
     category: Category;
   }

Category Entity:

   import { Entity, Column, PrimaryGeneratedColumn, OneToMany } from 'typeorm';
   import { Product } from './product.entity';

   @Entity()
   export class Category {
     @PrimaryGeneratedColumn()
     id: number;

     @Column()
     name: string;

     @OneToMany(() => Product, (product) => product.category)
     products: Product[];
   }

Order Entity:

   import { Entity, PrimaryGeneratedColumn, ManyToOne, ManyToMany, JoinTable } from 'typeorm';
   import { User } from './user.entity';
   import { Product } from './product.entity';

   @Entity()
   export class Order {
     @PrimaryGeneratedColumn()
     id: number;

     @ManyToOne(() => User, (user) => user.orders)
     user: User;

     @ManyToMany(() => Product)
     @JoinTable()
     products: Product[];
   }

Implementing CRUD Operations

Generate Resources:

   nest g resource users
   nest g resource products
   nest g resource categories
   nest g resource orders

User Service:

   import { Injectable } from '@nestjs/common';
   import { InjectRepository } from '@nestjs/typeorm';
   import { Repository } from 'typeorm';
   import { User } from './user.entity';

   @Injectable()
   export class UsersService {
     constructor(
       @InjectRepository(User)
       private userRepository: Repository<User>,
     ) {}

     createUser(user: Partial<User>) {
       return this.userRepository.save(user);
     }

     findAllUsers() {
       return this.userRepository.find({ relations: ['orders'] });
     }

     findUserById(id: number) {
       return this.userRepository.findOne({ where: { id }, relations: ['orders'] });
     }

     updateUser(id: number, updateUser: Partial<User>) {
       return this.userRepository.update(id, updateUser);
     }

     deleteUser(id: number) {
       return this.userRepository.delete(id);
     }
   }

Handling Relationships in CRUD Operations

Example: Create an Order With Products:

async createOrder(userId: number, productIds: number[]) {
  const user = await this.userRepository.findOne({ where: { id: userId } });
  const products = await this.productRepository.findByIds(productIds);

  const order = new Order();
  order.user = user;
  order.products = products;

  return this.orderRepository.save(order);
}

Example: Fetch Orders With User and Products:

async findOrders() {
  return this.orderRepository.find({ relations: ['user', 'products'] });
}

Validating and Securing Your API

Use DTOs (Data Transfer Objects) with class-validator for validation:

npm install class-validator class-transformer

Example DTO:

import { IsNotEmpty, IsEmail } from 'class-validator';

export class CreateUserDto {
  @IsNotEmpty()
  name: string;

  @IsEmail()
  email: string;
}

Controller:

@Post()
createUser(@Body() createUserDto: CreateUserDto) {
  return this.userService.createUser(createUserDto);
}

Frequently Asked Questions

1. Why Use TypeORM for E-Commerce?

TypeORM simplifies working with relational databases, making it ideal for handling complex relationships in e-commerce platforms.

2. How Do I Avoid Circular Dependencies in Relations?

Use lazy relations or modularize your entities by grouping related ones into specific modules.

3. How Can I Improve Performance?

Use pagination for large datasets.
Use indexes on frequently queried columns.

Conclusion

By following this step-by-step guide, you have created an e-commerce backend using NestJS and TypeORM with PostgreSQL. This implementation supports CRUD operations for users, products, categories, and orders with all necessary relationships. Experiment further by adding features like authentication, inventory management, and reporting.

Building a Login and Registration System Using NestJS with TypeORM and PostgreSQL

BuildWithGagan — Tue, 26 Nov 2024 06:05:47 +0000

Introduction

Authentication is a core feature of modern web applications. This step-by-step guide will help you build a robust login and registration system using NestJS, TypeORM, and PostgreSQL. Whether you're a beginner or someone looking to solidify their understanding, this guide walks you through everything from project setup to implementing secure authentication with global database configurations.

What Will You Learn?

Setting up a NestJS project
Configuring TypeORM with a PostgreSQL database
Building reusable entities and services
Securing passwords with bcrypt
Using JWT for token-based authentication
Handling validation and error scenarios

Setting Up Your Environment

1. Install NestJS CLI

First, ensure you have the NestJS CLI installed:

npm install -g @nestjs/cli

2. Create a New NestJS Project

Generate a new project:

nest new nest-auth-system

Choose npm or yarn for package management during the setup.

3. Install Required Dependencies

npm install @nestjs/typeorm typeorm pg bcrypt jsonwebtoken @nestjs/jwt @nestjs/config class-validator class-transformer

Setting Up PostgreSQL with TypeORM

1. Create the Database

Using PostgreSQL, create a database for your project:

CREATE DATABASE nest_auth_db;

2. Configure TypeORM Globally

Update your app.module.ts to configure TypeORM globally:

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ConfigModule, ConfigService } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot({ isGlobal: true }),
    TypeOrmModule.forRootAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
      useFactory: (configService: ConfigService) => ({
        type: 'postgres',
        host: configService.get<string>('DB_HOST', 'localhost'),
        port: +configService.get<number>('DB_PORT', 5432),
        username: configService.get<string>('DB_USERNAME', 'postgres'),
        password: configService.get<string>('DB_PASSWORD', 'password'),
        database: configService.get<string>('DB_DATABASE', 'nest_auth_db'),
        autoLoadEntities: true,
        synchronize: true, // Disable in production
      }),
    }),
  ],
})
export class AppModule {}

Add your database credentials to a .env file:

DB_HOST=localhost
DB_PORT=5432
DB_USERNAME=postgres
DB_PASSWORD=password
DB_DATABASE=nest_auth_db
JWT_SECRET=your_jwt_secret

Building the User Entity

1. Generate a User Module

nest g module users
nest g service users
nest g controller users

2. Create the User Entity

In users.entity.ts:

import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';

@Entity('users')
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column({ unique: true })
  username: string;

  @Column({ unique: true })
  email: string;

  @Column()
  password: string;
}

Creating Authentication Logic

1. Generate the Auth Module

nest g module auth
nest g service auth
nest g controller auth

2. Implement Registration Logic

In auth.service.ts:

import { Injectable, BadRequestException } from '@nestjs/common';
import { UsersService } from '../users/users.service';
import * as bcrypt from 'bcrypt';

@Injectable()
export class AuthService {
  constructor(private readonly usersService: UsersService) {}

  async register(username: string, email: string, password: string) {
    const existingUser = await this.usersService.findByEmail(email);
    if (existingUser) {
      throw new BadRequestException('Email already in use');
    }

    const hashedPassword = await bcrypt.hash(password, 10);
    return this.usersService.create({ username, email, password: hashedPassword });
  }
}

3. Add UserService Methods

In users.service.ts:

import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { User } from './user.entity';

@Injectable()
export class UsersService {
  constructor(
    @InjectRepository(User)
    private readonly userRepository: Repository<User>,
  ) {}

  async create(data: Partial<User>): Promise<User> {
    return this.userRepository.save(data);
  }

  async findByEmail(email: string): Promise<User | undefined> {
    return this.userRepository.findOne({ where: { email } });
  }
}

4. Create the Register Endpoint

In auth.controller.ts:

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

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

  @Post('register')
  async register(
    @Body('username') username: string,
    @Body('email') email: string,
    @Body('password') password: string,
  ) {
    return this.authService.register(username, email, password);
  }
}

Adding Login Functionality

1. Implement Login Logic

In auth.service.ts:

import { UnauthorizedException } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class AuthService {
  constructor(
    private readonly usersService: UsersService,
    private readonly jwtService: JwtService,
  ) {}

  async login(email: string, password: string) {
    const user = await this.usersService.findByEmail(email);
    if (!user) {
      throw new UnauthorizedException('Invalid credentials');
    }

    const isPasswordValid = await bcrypt.compare(password, user.password);
    if (!isPasswordValid) {
      throw new UnauthorizedException('Invalid credentials');
    }

    const token = this.jwtService.sign({ id: user.id });
    return { token };
  }
}

2. Create the Login Endpoint

In auth.controller.ts:

@Post('login')
async login(
  @Body('email') email: string,
  @Body('password') password: string,
) {
  return this.authService.login(email, password);
}

Securing Routes with JWT

1. Add JWT Strategy

Generate a guard:

nest g guard jwt

In jwt.strategy.ts:

import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      secretOrKey: process.env.JWT_SECRET,
    });
  }

  async validate(payload: any) {
    return { userId: payload.id };
  }
}

2. Protect Routes

In your controller:

import { UseGuards } from '@nestjs/common';
import { JwtAuthGuard } from './jwt.guard';

@Controller('profile')
@UseGuards(JwtAuthGuard)
export class ProfileController {
  @Get()
  getProfile(@Req() req) {
    return req.user;
  }
}

FAQs

Why Use TypeORM with NestJS?

TypeORM integrates seamlessly with NestJS and provides powerful features for database management.

How Secure Is JWT Authentication?

JWT is secure if implemented correctly with a strong secret and proper token expiration.

By following this comprehensive guide, you’ve built a robust login and registration system with NestJS, TypeORM, and PostgreSQL. This scalable solution can be enhanced further with features like password resets, user roles, and more!

Build a Login and Registration System Using Node.js: A Step-By-Step Guide

BuildWithGagan — Fri, 22 Nov 2024 12:08:42 +0000

Introduction

Building a login and registration system is a fundamental task for any web application. It ensures secure access control and user authentication, laying the foundation for a functional app. This guide is tailored for beginners, providing an easy-to-follow approach using Node.js. By the end of this tutorial, you'll have a functional authentication system in place.

What Will You Learn?

How to set up a Node.js project
Implement user registration
Add secure login functionality
Hash passwords for security using bcrypt
Validate user input
Use JWT for token-based authentication
Handle common errors and edge cases

Setting Up Your Environment

1. Install Node.js

Before you start, ensure Node.js is installed on your system. Download it from Node.js Official Website and follow the installation instructions.

2. Initialize Your Project

mkdir node-auth-system
cd node-auth-system
npm init -y

This creates a package.json file to manage your project dependencies.

3. Install Required Packages

npm install express body-parser mongoose bcrypt jsonwebtoken dotenv cors

4. Create a Basic Project Structure

Organize your files for a clean workflow:

node-auth-system/
├── .env
├── app.js
├── models/
│   └── User.js
├── routes/
│   └── auth.js
├── config/
│   └── db.js
└── package.json

Setting Up MongoDB

We'll use MongoDB to store user information. If you don’t have MongoDB installed, set it up here. Alternatively, use a cloud database like MongoDB Atlas.

Configuring Database Connection

In config/db.js:

const mongoose = require('mongoose');
const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGO_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log('MongoDB Connected...');
  } catch (err) {
    console.error(err.message);
    process.exit(1);
  }
};

module.exports = connectDB;

Add your MongoDB connection string in .env:

MONGO_URI=your_mongo_connection_string
JWT_SECRET=your_jwt_secret
PORT=5000

Building the User Model

Create a User.js file inside the models directory:

const mongoose = require('mongoose');
const bcrypt = require('bcrypt');

const UserSchema = new mongoose.Schema({
  username: {
    type: String,
    required: true,
    unique: true,
  },
  email: {
    type: String,
    required: true,
    unique: true,
  },
  password: {
    type: String,
    required: true,
  },
});

// Hash password before saving
UserSchema.pre('save', async function (next) {
  if (!this.isModified('password')) return next();
  this.password = await bcrypt.hash(this.password, 10);
  next();
});

module.exports = mongoose.model('User', UserSchema);

Creating the Authentication Routes

Initialize Express

In app.js:

const express = require('express');
const dotenv = require('dotenv');
const connectDB = require('./config/db');
const authRoutes = require('./routes/auth');

dotenv.config();
connectDB();

const app = express();
app.use(express.json());
app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Define Authentication Endpoints

In routes/auth.js:

const express = require('express');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');
const User = require('../models/User');
const router = express.Router();

// Register User
router.post('/register', async (req, res) => {
  const { username, email, password } = req.body;

  try {
    if (!username || !email || !password) {
      return res.status(400).json({ message: 'All fields are required' });
    }

    const userExists = await User.findOne({ email });
    if (userExists) {
      return res.status(400).json({ message: 'User already exists' });
    }

    const newUser = await User.create({ username, email, password });
    res.status(201).json({ message: 'User registered successfully', user: newUser });
  } catch (err) {
    res.status(500).json({ message: 'Server error' });
  }
});

// Login User
router.post('/login', async (req, res) => {
  const { email, password } = req.body;

  try {
    const user = await User.findOne({ email });
    if (!user) {
      return res.status(400).json({ message: 'Invalid credentials' });
    }

    const isMatch = await bcrypt.compare(password, user.password);
    if (!isMatch) {
      return res.status(400).json({ message: 'Invalid credentials' });
    }

    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ message: 'Login successful', token });
  } catch (err) {
    res.status(500).json({ message: 'Server error' });
  }
});

module.exports = router;

Testing the Application

Using Postman or Thunder Client

Register a user:

Endpoint: POST /api/auth/register
Body:

 {
   "username": "john_doe",
   "email": "john@example.com",
   "password": "123456"
 }

Login a user:

Endpoint: POST /api/auth/login
Body:

 {
   "email": "john@example.com",
   "password": "123456"
 }

FAQs

Why Use Bcrypt for Password Hashing?

Bcrypt securely hashes passwords, adding a salt to make brute-force attacks significantly harder.

How Does JWT Work?

JWT encodes user information into a token, ensuring secure, stateless authentication. It’s useful for scaling as the server doesn’t need to store session data.

How to Handle Expired Tokens?

Include middleware to check token validity and return a proper error message if expired.

This guide takes you from zero to hero in building a login and registration system with Node.js, covering critical features and security considerations. Experiment and expand your application by adding roles, password reset features, and frontend integration.

DEV Community: BuildWithGagan

ReactJS: The Ultimate Beginner-To-Expert Guide On How It Works Behind The Scenes

Introduction

Getting Started With React in 2025

Why Not create-react-app?

Create a React Project Using Vite

Step 1: Prerequisites

Step 2: Create Project with Vite

Step 3: Install Dependencies

Step 4: Start Development Server

Folder Structure

Adding React Router

Adding Tailwind CSS (Optional)

How React Works Behind the Scenes

Virtual DOM: Efficient UI Representation

Reconciliation and Diffing

Fiber Architecture

Batching and Scheduling

Writing Efficient React Code

Use React.memo

Use useCallback and useMemo

Avoid Excessive State

Lazy Loading

Frequently Asked Questions (FAQs)

What Is the Virtual DOM?

Why Is create-react-app Deprecated?

What Is Reconciliation in React?

What Is the Purpose of key Props?

How Does React Handle Rendering Performance?

Conclusion

What is Git and How to Use It: A Beginner's Guide to Version Control with Daily Useful Commands

Introduction to Git: The Version Control System You Can’t Ignore

Why Do You Need Git?

Setting Up Git: The First Step to Git Mastery

Step 1: Install Git

Step 2: Configure Git

Core Git Concepts

Daily Useful Git Commands for Beginners

1. git init: Creating a New Git Repository

2. git clone: Copying an Existing Repository

3. git status: Checking the State of Your Working Directory

4. git add: Staging Changes for Commit

5. git commit: Recording Changes

6. git log: Viewing Commit History

7. git push: Uploading Local Changes to Remote Repository

8. git pull: Fetching Changes from the Remote Repository

9. git branch: Listing and Managing Branches

10. git merge: Merging Changes from One Branch to Another

Conclusion: Mastering Git Step by Step

JavaScript Event Loop Explained: A Beginner's Guide With Examples

Introduction

What Is the Event Loop?

How Does the Event Loop Work?

Understanding the Call Stack

Example:

How JavaScript Handles Asynchronous Code

The Task Queue and Microtask Queue

Task Queue (Macro-task Queue)

Microtask Queue

Example of the Event Loop in Action

Expected Output:

Explanation:

Promises vs. setTimeout: Which Executes First?

Example:

Real-World Use Case: Handling API Requests

Common Mistakes and How to Avoid Them

1. Assuming setTimeout(fn, 0) Runs Immediately

2. Ignoring Microtask Queue Priority

3. Blocking the Event Loop

FAQs

1. What Is the Purpose of the Event Loop?

2. Does JavaScript Run on Multiple Threads?

3. What Is the Difference Between Macro and Microtasks?

4. How Can I Optimize JavaScript Performance?

5. Why Is setTimeout(fn, 0) Delayed?

Conclusion

JavaScript let, var, and const: Understanding the Differences With Examples

Introduction

What Is var in JavaScript?

Characteristics of var

Why Not `create-react-app`?

Use `React.memo`

Use `useCallback` and `useMemo`

Why Is `create-react-app` Deprecated?

What Is the Purpose of `key` Props?

1. `git init`: Creating a New Git Repository

2. `git clone`: Copying an Existing Repository

3. `git status`: Checking the State of Your Working Directory

4. `git add`: Staging Changes for Commit

5. `git commit`: Recording Changes

6. `git log`: Viewing Commit History

7. `git push`: Uploading Local Changes to Remote Repository

8. `git pull`: Fetching Changes from the Remote Repository

9. `git branch`: Listing and Managing Branches

10. `git merge`: Merging Changes from One Branch to Another

1. Assuming `setTimeout(fn, 0)` Runs Immediately

5. Why Is `setTimeout(fn, 0)` Delayed?

What Is `var` in JavaScript?

Characteristics of `var`

Example of `var`

What Is `let` in JavaScript?

Characteristics of `let`

Example of `let`

What Is `const` in JavaScript?

Characteristics of `const`

Example of `const`

Key Differences Between `var`, `let`, and `const`

1. Avoid Using `var`

2. Use `const` When a Variable Should Not Change

3. Use `let` for Variables That Change

1. Can I use `var` in modern JavaScript?

2. When should I use `const` over `let`?

3. What happens if I declare a `let` variable twice in the same scope?

4. Can I modify an object declared with `const`?

5. Why is `const` still hoisted?