DEV Community: Aditya Bhattad

If we haven't met yet, I am Aditya Bhattad—and I am here to build!

Aditya Bhattad — Wed, 07 May 2025 13:12:04 +0000

Back in 2016, when cheap internet suddenly became available across India, I saw firsthand how technology changed everything around me. From Instagram to YouTube, these platforms completely changed how we connected with people and learned new things. Something clicked for me back then – I wanted to be part of creating this kind of change, not just watching it happen.

So, four years later in 2020, when I had to pick my major stream for graduation, Computer Science was a clear choice, As I look back, it was absolutely the best decision I have made. Beyond just classes, I was having time of my life, learning to build things I wanted to since childhood, coding into night at hackathons, creating open source projects, and participating in Google Summer of Code (a flagship open-source program by Google allowing students from around the world to contribute to real-world open-source projects and make an impact while learning real tech).

Now again four years later, as I graduate, I am about to start a new chapter in my life. While I am still looking for fun and challenging opportunities/roles (especially full-stack development roles at early-stage startups, freelance gigs, or anywhere I can take real ownership and build cool stuff) where I would be a prefect fit, I plan to start a new habit of building in public, because like someone once said, you don’t need a title or a job to build awesome tech.

So with this spirit in mind, I will also write weekly blogs about the things I learnt or build throughout the week.

But before that...

Here are some of the notable projects I have already build:

FairFund: This is a blockchain-based platform designed to empower communities with transparent and democratic funding mechanisms. It enables users to deploy funding "vaults," submit proposals for projects, and collectively vote on how funds are allocated, ensuring a fair and community-driven distribution of resources.

Core Technologies Used:
- Full-Stack: Next.js (Frontend & API Routes)
- Blockchain: Solidity (Smart Contracts), Foundry (Development Framework)
- Backend & DB: Prisma ORM, PostgreSQL
- Web3 Integration: Wagmi, Viem, Web3Modal, NextAuth with SIWE (Sign-In with Ethereum)
- UI: TailwindCSS, ShadCN UI
Its development was centered on two crucial aspects: creating comprehensive, full-cycle decentralized application architecture and ensuring a user-centric design.
- On architectural front, this involved developing secure smart contracts for all core funding logic (vaults, proposals, voting), complemented by a performant backend and an intuitive frontend.
- To enhance user experience, features like personalized dashboard was implemented, along with "Spaces", these spaces allow for grouping of multiple funding vaults, improving how user discover, track and participate in the community initiatives.
Github | Live Link
FoodieSpot: It is an intelligent restaurant management system I developed to streamline the reservation process across multiple restaurant locations. It features a graph based AI agent that assists customers in discovering restaurants and making bookings.

Core Technologies Used:
- Frontend: React, TypeScript, Tailwind CSS
- Backend & AI Agent Services: FastAPI (Python)
- AI: Groq API (for conversational AI), Pinecone - (Vector Database for semantic search of restaurant data), Custom Prompt Engineering.
- Database: SQL-based (interacted via ORM, likely PostgreSQL or similar with FastAPI)
- DevOps & Tooling: Docker, Docker Compose
The architecture of FoodieSpot is built around a modular, multi-component system designed for specialized task handling, with a strong emphasis on leveraging agentic AI for a seamless user experience.

Github | Demo Video
ConsumeWise: This is an AI-driven platform I developed to help users make informed decisions about healthier FMCG (Fast-Moving Consumer Goods) food alternatives. It acts as a product review catalog and consumption tracker, leveraging Google Gemini to analyze products, identify misleading claims, and provide personalized dietary recommendations based on individual health goals and consumption patterns.

Core Technologies Used:
- Full-Stack & Framework: Next.js (with TypeScript)
- AI: Google Gemini (for product analysis, insight generation, and report generation)
- Database: PostgreSQL (for primary data storage), Prisma (ORM)
- Caching & Rate Limiting: Redis, Upstash
- Data Collection: Web scraping (initially from BigBasket)
The core idea behind ConsumeWise is to empower users with AI-generated clarity in a market often clouded by confusing product claims. This was achieved by:
- Building an AI-powered analysis engine using Google Gemini to deeply scrutinize product ingredients and nutritional information, effectively debunking misleading marketing and highlighting genuine health benefits. This engine forms the backbone of the product review catalog.
- Developing a system for personalized consumption tracking and reporting. By monitoring user choices, ConsumeWise provides actionable insights and suggests healthier alternatives, guiding users toward their dietary goals with manageable steps.
- The platform is built with a modern Next.js stack, utilizing PostgreSQL for data storage and Redis/Upstash for rate limiting, ensuring a scalable and responsive user experience.
Github | Live Demo | Demo Video
SuperWallet: I developed it as part of a hackathon, it simplify user interaction with multiple blockchain networks. It uniquely allows users to perform cross-chain transactions, like combining assets from different chains for a single payment, all authorized with a single user signature.

Core Technologies Used:
- Frontend: Next.js
- Smart Contracts: Solidity
- Account Abstraction: Biconomy SDK V2 (specifically leveraging the Multi-Chain Validator Module)
- Cross-Chain Communication: Axelar GMP (General Message Passing)
- Social Logins: Particle Network
- Supported Networks (Testnet): Scroll Sepolia, Polygon Mumbai, Avalanche, Mantle
The focus of Super Wallet was to improve the user experience (UX) in a multi-chain environment by
abstracting away blockchain complexities.

This was achieved by:
- Integrating Biconomy's Account Abstraction SDK V2, particularly its Multi-Chain Validator Module. This allows complex cross-chain operations, which would traditionally require multiple transactions and signatures across different chains, to be bundled and authorized with a single user signature. For instance, users can combine aUSDC from Avalanche and Polygon to make a payment on Mantle in one seamless action.
- Leveraging Axelar GMP for robust and secure cross-chain communication, enabling the "Super Wallet bridge" smart contracts to facilitate asset transfers and interactions between supported networks.
- Simplifying onboarding through Particle Network's social login integration, making it easy for users to create and access their smart contract wallets without needing to manage traditional private keys initially.
Github | Demo Video

...Showcasing these projects is more than just a portfolio; it's a reflection of a journey that started with a simple fascination for technology and has grown into a deep passion for creating and problem-solving.

If you are looking for a full-stack developer for a full-time role, or a freelance gig, or maybe just an interesting tech discussion, let's talk: adityabhattad18@gmail.com.

Thanks for reading, and stay tuned for more!

One Practical Application of Next.JS Parallel and Intercepting Routes: Better UX with Modals.

Aditya Bhattad — Tue, 27 Aug 2024 08:45:46 +0000

I have been using Next.js for all my projects for about a year now, and there is always something new to learn. Even till today, I keep on discovering new ways to improve my websites using the features provided with Next.Js, so much to learn and so much fun...

Recently, I learned about some lesser-known Next.js routing concepts: parallel routes and intercepting routes. I spent some time exploring how I could use these in my projects. In this blog, I will cover one such use case: how to use these routing techniques with modals to create a better user experience.

Let's start with a quick explainer for both the concepts:

Parallel Routes

Parallel Routes allow us to simultaneously or conditionally render multiple pages within the same layout. They're particularly useful for highly dynamic sections in applications, such as feeds on social media sites.

There are two important components to it:

Slots
How they work with navigation and the default.js page.

Understanding Slots

Parallel routes are created using named slots. Slots are defined with the @folder-name convention, for example, if we create @dashboard or @teams folder and add a page.tsx in both folders. These are considered as slots to the shared parent layout (the nearest layout.tsx). The layout component will then accept additional props corresponding to these slots, which can be rendered in parallel alongside the children prop.

Here's an example:



export default function Layout({
  children,
  dashboard,
  teams,
}: {
  children: React.ReactNode
  dashboard: React.ReactNode
  teams: React.ReactNode
}) {
  return (
    <>
      {children}
      {dashboard}
      {teams}
    </>
  )
}

It's important to note that slots are not route segments and do not affect the URL structure. For example, for @dashboard/views, the URL will be /views since @dashboard is a slot.

If you notice there are two types of slots:

Implicit Slots: The children slot is an implicit slot that doesn't need to be created explicitly.
Explicit Slots: Additional slots like @dashboard need to be created explicitly.

Navigation with Parallel Routes

NextJS handles navigation with parallel routes in two ways:

Soft Navigation (using the Link component within the website):
- NextJS performs a partial render, changing the subpage within a slot.
- It maintains the other slots' active subpages, even if they don't match the current URL.
Hard Navigation (page reload or entering the URL in the browser):
- NextJS can't determine the active state for slots that don't match the current URL.
- It will render the default.js file if present for that slot, or return a 404 error if it's not present.

For example, given this folder structure:



├── src
│   ├── app
│   │   ├── @dashboard
│   │   │   └── page.tsx
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── abc
│   │   │   └── page.tsx
│   │   ├── layout.tsx
│   │   └── page.tsx

Navigating to <url>/ works fine, but navigating to <url>/abc will return a 404 error because abc is not defined in @dashboard. To avoid this, add a default.js file in @dashboard, which will be rendered for all undefined routes in @dashboard that are present in other slots.

For more information on parallel routes, refer to the official NextJS documentation on parallel routes.

Intercepting Routes

Intercepting routes allow us to load a route from another part of your application within the context current layout. This is useful when you want to display the content of a different route without changing the user's context.

For example, when a user clicks on a photo in a feed, you can display the photo in a modal overlaying the feed. In this case, NextJS intercepts the /photo/123 route, masks the URL, and render a modal, overlaying the content present in the /feed route. However, when navigating to the photo directly (via a shared URL or page refresh), it does not intercepts it and render the page.tsx inside /photo/[id] folders as usual.

How to Use Intercepting Routes

Intercepting routes are defined using the (..) convention, similar to the relative path convention ../ but for route segments. You can use:

(.) to match segments on the same level
(..) to match segments one level above
(..)(..) to match segments two levels above
(...) to match segments from the root app directory

For example, to intercept the photo segment from within the feed segment, create a (..)photo directory.

So now when we navigate to the /photo from inside the /feed it will intercept the route, and render the page.tsx inside (..)photo created inside the feed folder, instead of the page.tsx present inside photo folder, but it will render the page.tsx for the /photo route normally on page refresh or when navigating via shared URL though.

For further reading, check out the Next.js documentation on intercepting routes.

Practical Application

Intercepting routes and parallel routing offer several benefits, including:

The ability to split a single layout into multiple slots, making the codebase more manageable.
Independent route handling for different slots.
Sub-navigation capabilities.

In this blog, we'll focus on how to implement better modals using intercepting routes.

Overview of the application:

Root Page with an Input Field:

When the "login" button is clicked, it redirects to the /login route. Here's the link component for reference:



   <Link
        href={"/login"}
        className="px-4 py-2 bg-black text-white rounded-md"
   >
     Login!
   </Link>

Rendering a Modal Instead of Navigating:

Instead of directly navigating to the login route and rendering the login page there, A modal overlay on the same page while preserving the context of the current page.

Notice that the URL is /login. If you click outside the modal or on the close icon, it navigates back to the / route, preserving the input field's content.

Handling Direct Navigation:

If the page is reloaded or if you directly load http://localhost:3000/login in the browser, the login page will render as usual.

Steps to implement it

Step 1. Setting up a reusable modal component

We'll use the Shadcn UI library for the modal component to keep things simple.

Follow the installation guide on Shadcn UI's website.
Once installed, add the dialog component by following the instructions on this page: Dialog Component.

Next, create a file named modal.tsx inside the components folder with the following code:



// We are using useRouter hence this needs to be a client component.
"use client";
import { Dialog, DialogContent, DialogOverlay } from "@/components/ui/dialog";
import { useRouter } from "next/navigation";

export default function Modal({
// We pass the children and className as a prop to keep modal reusable.
    children,
    className
}: {
    children: React.ReactNode
    className?:string
}) {
    const router = useRouter();
      // This will change the URL to the previous state, for example if we have navigated to the login page from `/` route, when the function will trigger the URL will be changed from `/login` to `/`.
    function handleOpenChange() {
        router.back();
    }

    return (
        // We are using the shadcn ui's dialog component
        <Dialog
            // It will be open by default.
            defaultOpen={true}
            // It needs to be set in order to be able to use onOpenChange handler (https://www.radix-ui.com/primitives/docs/components/dialog#dialog)
            open={true}
           // This will trigger whenever we close the modal by clicking outside the modal or by clicking on the cross button
            onOpenChange={handleOpenChange}
        >
            <DialogContent
                className={className || ""}
            >
                {children}
            </DialogContent>
        </Dialog>
    )


}

Step 2: Creating a login route

Create a folder named login in the root (inside the app directory) and add a page.tsx file with this code:



"use client";
import { useState } from 'react';

export default function LoginPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e:React.FormEvent) => {
    e.preventDefault();
    console.log('Data:', { username, password });
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <div className="bg-white p-8 rounded-lg shadow-md w-96">
        <h2 className="text-2xl font-bold mb-6 text-center text-gray-800">Login</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="username" className="block text-sm font-medium text-gray-700">Username</label>
            <input
              type="text"
              id="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
              required
            />
          </div>
          <div>
            <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
              required
            />
          </div>
          <button
            type="submit"
            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          >
            Log In
          </button>
        </form>
      </div>
    </div>
  );
}

It is a simple login page.

Step 3: Create intercepting routes:

Now create a let's create a separate slots to handle intercepting routes and displaying the modals instead.

Create a folder (new slot) named @modal inside the app directory.
Inside @modal, create a folder (.)login and add a page.tsx file.

The structure should look like this:



├── src
│   ├── app
│   │   ├── @modal
│   │   │   ├── (.)login
│   │   │   │   └── page.tsx
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx

Inside (.)login/page.tsx, add the following code:



"use client";
import Modal from "@/components/modal";
import { useState } from "react";

export default function InterceptedLogin() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        console.log('Data:', { username, password });
    };

    return (
        <Modal
            className="w-96"
        >
            <div className=" rounded-lg  w-full">
                <h2 className="text-2xl font-bold mb-6 text-center text-gray-800">Intercepted Login</h2>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                        <label htmlFor="username" className="block text-sm font-medium text-gray-700">Username</label>
                        <input
                            type="text"
                            id="username"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                            required
                        />
                    </div>
                    <div>
                        <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
                        <input
                            type="password"
                            id="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                            required
                        />
                    </div>
                    <button
                        type="submit"
                        className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >
                        Log In
                    </button>
                </form>
            </div>
        </Modal>
    )
}

This is the content that will be rendered when the /login route will be intercepted, it is same as the login page just wrapped inside the modal.

Step 4: Adding the `@modal` Slot to `layout.tsx`

Modify layout.tsx at root inside the app directory, to include the @modal slot:



import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
// Notice the layout automatically accepts a new prop named modal
  modal
}: Readonly<{
  children: React.ReactNode;
  modal:React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
// We will render it alongside the clildren.
        {modal}
      </body>
    </html>
  );
}

Now, if we run the application and navigate to http://localhost:3000, we'll encounter a 404 page. This happened because we haven't yet defined any route for the @modal slot other than (..)login. As a result, Next.js can't determine the active state for the modal slot, for the root URL or any other URL except /login. To resolve this, we need to add a default.jsx file inside the @modal folder.

However, we don't need to render anything in this slot except to handle navigation to the login page, right? To achieve this, we can simply return null in the default page. This approach prevents anything from rendering in the @modal slot, while still allowing the modal to appear when navigating to the /login route.

To implement this, create a default.tsx file inside the @modal folder and add the following code:



 export default function ModalsDefaultPage(){
    return null;
}

With this setup, our code will function as expected.

One thing that can still be unclear is, why we need to create the intercepting route in a parallel route, rather than directly at the root??
If you try placing it at the root, the modal will still open, but the issue arises when you close the modal: the state of the current page won't be preserved, such as the input field being cleared in our example.

This occurs because of how Next.js handles navigation for parallel routes. With "soft navigation," Next.js only changes the subpage within the specified slots, preserving the state for all other slots. If we place the intercepting route at the root, it will change the subpage, causing the current page to lose its state when navigating back. This is why we use a parallel route and return null from its default.tsx—so that losing the state for this page doesn't matter, as there is no state to preserve in the first place.

Conclusion

In this example I have only demonstrated example for intercepting the login route, but we can also intercept other routes as well from the same @modal slot.

Parallel routes and intercepting routes are powerful features in NextJS that can enhance the user experience as well as developer experience for your application if used properly. By understanding and implementing these concepts, we can create more dynamic and interactive interfaces.

For reference I have provided all the code discussed above in a accompanying GitHub repository: https://github.com/adityabhattad2021/Parallel-Intercepting-Route-Demo
Feel free to give it a star.

Thankyou for reading this far, have a great day!

Simplest Next.js setup to build full stack web applications with speed

Aditya Bhattad — Mon, 29 Jul 2024 16:08:01 +0000

I have been in the React ecosystem for around 2 years now, Till now I have tried n number of ways and used different tech stacks to develop full stack web applications with React.
With all this experience I have found what I believe to be the simplest and fastest way to set up and build a full-stack web application with React. With this guide I will walk you through the process🚶.

Prerequisites

Before we begin, ensure you have the following tools installed:

Docker: Docker allows you to build, test, and deploy applications quickly by packaging software into standardized units called containers. These containers include everything the software needs to run, such as libraries, system tools, code, and runtime. To get started with Docker, follow the official guide.
Node.js: This is a JavaScript runtime which enables you to run JavaScript outside of a browser. It is important for our development environment. You can learn more and follow the instructions here from official Node.js website.
Git: It is a version control system, it is invaluable for any developer. If you haven't installed it yet, follow the Git installation guide.

Teck Stack

We'll be using the following technologies:

Next.js: Next.js is a React framework, in 2024 it is my favorite way to use react, it provides many out of the box features like, file based routing, easy to use middleware, server actions, etc. These features would take a lot of time to setup without Next.js.
Prisma ORM: An Object-Relational Mapping (ORM) tool that provides a simple syntax to interact with databases.
PostgreSQL: We will use it as our relational database system.
Docker: We will use Docker to run a PostgreSQL image for local development.

Setting up Next.js application

Let's start by creating a new Next.js application:

Open your terminal and navigate to the directory where you want to create your project.
Create a new directory for your project: mkdir <your-app-name>
Open the new directory in VS Code: code <your-app-name>
In the VS Code terminal, run: npx create-next-app@latest

This will start an interactive session where you can define the initial setup for your application. Here are the recommended options:

Here are the recommended options to select:

Project name: Enter your project name or use . to set up in the current folder.
TypeScript: Yes (provides better autocomplete and type checking)
ESLint: Yes (helps detect problems and bugs in your code)
Tailwind CSS: Yes (makes writing CSS easier in Next.js applications)
src/ directory: Yes (helps structure your project for easier navigation)
App Router: Yes (takes advantage of Next.js 13+ features)
Import alias: No (keep the default @ alias)

After this setup is completed, your project structure should look like this:



.
├── README.md
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│   ├── next.svg
│   └── vercel.svg
├── src
│   └── app
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── tailwind.config.ts
└── tsconfig.json

You can now run npm run dev to start the Next.js development server, typically at http://localhost:3000.

Setting Up ShadCN UI (Optional)

ShadCN UI provides a collection of reusable React components. To install it:

Run npx shadcn-ui@latest init
Choose the default options during the interactive setup

This will create a components.json file and two new folders:

components: Contains the code for UI components
lib: Contains utility functions components and lib.

To add a new component, use the ShadCN CLI. For example, to add a button component:



npx shadcn-ui@latest add button

This will create a button.tsx file in /components/ui.

You can then use these components in your application like this:



import { Button } from "@/components/ui/button";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      The best full-stack setup.
      <Button>
        Click Me
      </Button>
    </main>
  );
}

We can add more components from here.

Running Postgres locally

For local development, it's often better to use a local database instead of using a hosted database on a cloud-based Database-as-a-Service (DBaaS) platfrom. This approach is cost-free and doesn't require an internet connection.

We will use Docker to run a PostgreSQL image locally. First, ensure Docker is running on your computer by typing docker in your terminal.

Create a docker-compose.yml file in your project root with the following content:



services:
    db:
        image: postgres:15-alpine
        environment:
            POSTGRES_PASSWORD: development
        ports:
            - '5432:5432'

This the most minimal configuration to run the Postgres image, there are other options as well but those are optional and if not specified are set to default.

Let's briefly discuss our configuration:

Uses the postgres:15-alpine image (a lightweight version of PostgreSQL 15)
Sets the database password to "development"
Exposes PostgreSQL's default port (5432) to your local machine

To start the PostgreSQL container, run:



docker compose up

Once it's running, you can access PostgreSQL at localhost:5432.

Connecting Prisma ORM

To set up Prisma ORM:

Install Prisma as a development dependency: ```bash

npm install prisma --save-dev


- Initialize Prisma:
   ```bash


   npx prisma init

In your .env file, add the database connection URL: ```

# The structure {% raw %}postgres://<db-username>:<password>@<host>:<port-number>/<db-name> POSTGRES_URL="postgres://postgres:development@localhost:5432/dev-db"``

In schema.prisma, ensure the database connection uses the same environment variable:
`prisma datasource db { provider = "postgresql" url = env("POSTGRES_URL") } `
Define a sample schema in schema.prisma:
`prisma model Post { id Int @id @default(autoincrement()) text String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } `
Generate the database schema:
`bash npx prisma migrate dev `

This command updates the database and creates a migrations folder in the prisma directory.

You can use Prisma Studio with the following command:

`bash npx prisma studio `
It will open up an window in your browser.

It helps to interact with our database visually even without creating the CRUD functionality ourselves.

Creating a Prisma Client

When working with Prisma in a Next.js application, we need to be aware of a potential issue related to hot reloading during development. Let's look little bit closer into this problem and its solution.

Understanding the Hot Reload Problem

During development, Next.js uses a feature called hot reloading to automatically update your application in the browser as you make changes to your code. This feature greatly improves the development experience, but it can cause issues with Prisma Client.

Here's what happens:

Every time you make a change to your code, Next.js reloads the affected modules.
This reload can trigger the creation of a new Prisma Client instance.
Each Prisma Client instance opens its own connection pool to the database.
These connection pools are not automatically closed when a new instance is created.

As a result, if you make frequent changes to your code during development, you might end up with many open connection pools, potentially exceeding your database's connection limit.

For example:

Let's say each Prisma Client instance opens a pool with 10 connections.
If you make changes that trigger a reload 5 times, you could end up with 50 open connections (5 instances * 10 connections each).
This can quickly escalate, especially in larger projects with frequent updates.

This is not an issue in production because the application doesn't use hot reloading there. However, during development, it can lead to crashing your application if you exceed the database's connection limit.

The Solution: Singleton Pattern

To solve this issue, we'll implement a singleton pattern for the Prisma Client. This will ensure that only one instance of the client is created and reused throughout the application lifecycle, even during hot reloads.

Create a file src/utils/db.ts with the following content:

`typescript
import { PrismaClient } from "@prisma/client";

let prisma: PrismaClient;

declare global {
var prisma: PrismaClient | undefined;
}

if (process.env.NODE_ENV === 'production') {
prisma = new PrismaClient();
} else {
if (!global.prisma) {
global.prisma = new PrismaClient();
}
prisma = global.prisma;
}

export default prisma;
`
Let's break down how this solution works:

We declare a prisma variable to hold our Prisma Client instance.
We use declare global to add the prisma property to the global namespace. This allows us to store the Prisma Client instance in a way that persists across hot reloads.
In production, we simply create a new Prisma Client instance as normal.
In development:
- We check if global.prisma already exists.
- If it doesn't, we create a new Prisma Client instance and assign it to global.prisma.
- If it does exist, we reuse the existing instance.
Finally, we assign the Prisma Client instance (either the existing one or the newly created one) to our prisma variable and export it.

By using this singleton pattern, you can safely use Prisma in your Next.js application. Simply import the prisma instance from src/utils/db.ts whenever you need to perform database operations in your application.

Adding CRUD Functionality with Next.js and Prisma (Optional)

In this section, we will go through and create a very basic application with CRUD (Create, Read, Update, Delete) functionality to see how easily we can use the new server actions and Prisma together. If you are already aware of how it works, feel free to skip this section.

Implementing CRUD Operations

Let's implement Create, Read, Update, and Delete operations for our posts.

Creating the Posts Model

I assume you have a Post model from the last section defined in your schema.prisma. It should look something like this:
`prisma model Post { id Int @id @default(autoincrement()) text String createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } `

Creating the Server Actions

Create a new folder called actions inside the src folder and add a new file called posts.ts. At the top of the file, add the "use server" directive:

`javascript
"use server"

import prisma from "@/lib/db";
import { revalidatePath } from "next/cache";

export type State = {
message?: string | null;
}
`

This directive tells Next.js that the code in this file should only run on the server.

Implementing Create Functionality

Let's create a server action called addPosts:

`javascript export async function addPosts(prevState: State, formData: FormData) { const text = formData.get("text") as string; if (text) { await prisma.post.create({ data: { text } }); revalidatePath("/"); return { message: "success" }; } else { return { message: "Invalid field." }; } } `

This function:

Extracts the "text" field from the form data.
If text is provided, it creates a new post in the database.
Calls revalidatePath("/") to clear the cache for the home page, ensuring we see the new post immediately.
Returns a success or error message.

Now, let's create a form component to add new posts. Create a new file src/components/posts-form.tsx:

`jsx
"use client"
import { addPosts, State } from "@/actions/posts"
import { useFormState } from "react-dom"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

export default function PostsForm() {
const initialState: State = {
message: null
}
const [state, dispatch] = useFormState(addPosts, initialState)
return (

{state.message && (
{state.message}
)}

name="text"
type="string"
placeholder="Add some text here."
/>
Submit

)
}
`

This component uses the useFormState hook, which is a important part of how we're handling form submissions with server actions. Let's break down how useFormState works:

useFormState is a React hook provided by the react-dom package. It's designed to work with server actions in Next.js applications. (will be changed in newer version: https://react.dev/reference/react/useActionState)
The hook takes three arguments (one is optional, and not important in our context):
- The first argument is the server action function (addPosts in this case).
- The second argument is the initial state (initialState in this case).
The hook returns an array with two elements:
- state: This is the current state of the form. It includes any messages or data returned from the server action.
- formAction (we named in dispatch): This is a function that we use as the form's action. It handles submitting the form data to the server action.
When the form is submitted:
- The dispatch function is called with the form data.
- This triggers the server action (addPosts).
- The server action processes the data and returns a new state.
- React updates the state with this new information.
In our component, we're using the state.message to display any messages returned from the server action. This could be a success message or an error message.

This pattern is repeated in our update functionality as well, providing a consistent way of handling form submissions throughout our application.

Let use add this PostForm component to our main page.tsx:

`jsx
import PostsForm from "@/components/posts-form";

export default async function Home() {

return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">

        <PostsForm />
    </main >
);

}
`

Implementing Read Functionality

We'll implement the read functionality in our main page component. Update the src/app/page.tsx file:

`jsx
import PostsForm from "@/components/posts-form";
import prisma from "@/lib/db";
import { Post } from "@prisma/client";

export default async function Home() {
const posts: Post[] = await prisma.post.findMany({
orderBy: { createdAt: 'desc' }
});

return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div className="w-full flex flex-col gap-2">
            {posts.map((post) => (
                <div key={post.id} className="p-3 flex justify-between items-center gap-2 border-2 border-black">
                    {post.text}
                </div>
            ))}
        </div>
        <PostsForm />
    </main>
);

}
`

Here we are using React Server Components (in Nextjs13+ every component is a server component unless specifically defined as client component by using "use client" directive at the top of the file. We can use async/await directly in this components to fetch data and the component will be rendered on the server with the fetched data and the client will receive the rendered HTML, providing faster initial load speed.

This component fetches all posts from the database, displays them in reverse chronological order, and includes the PostsForm component for adding new posts.

Implementing Delete Functionality

Let's add the delete functionality. First, add a deletePost function to your posts.ts file:

`javascript export async function deletePost(postId: number, formData: FormData) { try { await prisma.post.delete({ where: { id: postId } }); revalidatePath("/"); return { message: "Post deleted successfully" }; } catch (err) { console.error(err); return { message: "Error deleting post" }; } } `

Now, create a new component for the delete button. Create a file delete-post.tsx in your components folder:

`jsx
"use client";
import { deletePost, State } from "@/actions/posts";
import { Button } from "@/components/ui/button";
import { TrashIcon } from "lucide-react";

interface DeletePostProps {
postId: number;
}

export default function DeletePost({ postId }: DeletePostProps) {
const deletePostWithId = deletePost.bind(null, postId);
return (

Delete

);
}
`

Here, we use the bind function to create a new function deletePostWithId. The bind function allows us to pre-set the first argument of the deletePost function (the postId) to a specific value. This is useful because the action attribute of the form expects a function that only takes FormData as an argument, but our deletePost function needs both postId and FormData. By using bind, we create a new function that already has the postId "baked in", so it only needs to receive the FormData when the form is submitted.

Update your Home component to include the delete button:

`jsx
import DeletePost from "@/components/delete-post";
import PostsForm from "@/components/posts-form";
import prisma from "@/lib/db";
import { Post } from "@prisma/client";

export default async function Home() {
const posts: Post[] = await prisma.post.findMany({
orderBy: { createdAt: 'desc' }
});

return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div className="w-full flex flex-col gap-2">
            {posts.map((post) => (
                <div key={post.id} className="p-3 flex justify-between items-center gap-2 border-2 border-black">
                    {post.text}
                    <DeletePost postId={post.id} />
                </div>
            ))}
        </div>
        <PostsForm />
    </main>
);

}
`

Implementing Update Functionality

First, add an updatePost function to your posts.ts file:

`javascript export async function updatePost(postId: number, prevState: State, formData: FormData) { try { const text = formData.get("text") as string; await prisma.post.update({ where: { id: postId }, data: { text } }); revalidatePath("/"); return { message: "Post updated successfully" }; } catch (err) { console.error(err); return { message: "Error updating post" }; } } `

Now, create a new page for updating posts. Create a file src/app/post/[id]/update/page.tsx, as Next.js has file based routing, when we navigate to https://<app-domain>/post/1/update we will see this page.

`jsx
import UpdateForm from "@/components/update-form";
import prisma from "@/lib/db";
import { redirect } from "next/navigation";

export default async function UpdatePostPage({
params
}: {
params: { id: string }
}) {
const postId = Number(params.id);
if (!postId) redirect("/");
const post = await prisma.post.findUnique({
where: { id: postId }
});
if (!post) redirect("/");
return ;
}
`

On this page we simply fetch the post to be updated and passes it to an UpdateForm component.

Create the UpdateForm component in src/components/update-form.tsx:

`jsx
"use client";
import { State, updatePost } from "@/actions/posts";
import { useFormState } from "react-dom";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Post } from "@prisma/client";
import { useState } from "react";

interface UpdateFormProps {
post: Post
}

export default function UpdateForm({ post }: UpdateFormProps) {
const initialState: State = { message: null };
const updatePostWithId = updatePost.bind(null, post.id);
const [state, dispatch] = useFormState(updatePostWithId, initialState);
const [text, setText] = useState(post.text);

return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <form action={dispatch} className="flex flex-col gap-4">
            {state.message && <div>{state.message}</div>}
            <div className="flex gap-2">
                <Input
                    name="text"
                    type="string"
                    placeholder="Add some text here."
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                />
                <Button>Submit</Button>
            </div>
        </form>
    </main>
);

}
`

Here, we use bind again to create an updatePostWithId function, similar to what we did in the delete functionality.

Finally, update your root page.tsx (in src/app) file to include the update button:

`jsx
import DeletePost from "@/components/delete-post";
import PostsForm from "@/components/posts-form";
import { Button } from "@/components/ui/button";
import prisma from "@/lib/db";
import { Post } from "@prisma/client";
import Link from "next/link";

export default async function Home() {
const posts: Post[] = await prisma.post.findMany({
orderBy: { createdAt: 'desc' }
});

return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <div className="w-full flex flex-col gap-2">
            {posts.map((post) => (
                <div key={post.id} className="p-3 flex justify-between items-center gap-2 border-2 border-black">
                    {post.text}
                    <div className="flex gap-2">
                        <DeletePost postId={post.id} />
                        <Link href={`post/${post.id}/update`}>
                            <Button>Update</Button>
                        </Link>
                    </div>
                </div>
            ))}
        </div>
        <PostsForm />
    </main>
);

}
`

This completes the CRUD functionality for our posts application. We have now implemented Create, Read, Update, and Delete operations using Next.js server actions and Prisma.

You can play around with it by running it locally using npm run dev in our terminal. In the next section we will look at how we can deploy this application.

Deploying to Vercel

To deploy our application to Vercel, we first need to push our code to GitHub. If you haven't set up GitHub yet, you can follow this tutorial: GitHub Setup Guide.

Once you've set up GitHub and pushed your code, follow these steps:

Go to https://vercel.com/
Create an account if you haven't already
Connect your Vercel account to your GitHub account
After connecting, you'll see this screen with different options to deploy your project.

Click the "Import" button next to "Import Project", and you will be redirected to the import git repository page, with all your GitHub repositories listed.

Select the repository you want to deploy and you will be redirected to configure project page, leave everything as it is for now and click "Deploy"

After clicking deploy you will be redirected to the project dashboard page.

Note: The initial build for our application will fail, but don't worry – we'll fix it in the next sections.

Database for Production

On the project dashboard page, look for the "Storage" option in the top navbar.

Follow these steps to set up a PostgreSQL database:

Click on "Storage", then you will see different options to create a database.
Choose Postgres as your database type, there will be a pop asking you to accept tnc,
Once you click accept, you will get option to select the region to create database.
Select the region closest to you for your database and click "Create".

Once the database is created, you'll see a "Connect" button. Click it to automatically set the relevant environment variables for your database in your project's environment.

Fixing the Build Failure

If you check the deployment logs, you will likely see an error related to Prisma.

To resolve this issue and initialize our production database, we need to modify our build process. Read more about it here:
Update your package.json file as follows:

`json { "name": "nextjs-full-stack-guide", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "npx prisma generate && npx prisma migrate deploy && next build", "start": "next start", "lint": "next lint" }, // ... rest of the package.json content } `

The key change is in the "build" script, which now includes the necessary Prisma commands:

`json "build": "npx prisma generate && npx prisma migrate deploy && next build", `

This change ensures that:

Prisma generates the client for our defined database schema
The production database is initialized using our migration files
The Next.js build process runs

After making these changes:

Commit and push the changes to GitHub
A new build on Vercel will automatically trigger and should pass successfully

Workflow for Future Development

Here's the workflow for continuing development on your application:

Start Docker Desktop
Spin up the database container: docker compose up
Run npx prisma db push to update the local database according to your schema
Start the development server: npm run dev
Make changes to your application
If you change the database schema, run npx prisma migrate dev
Push your code to GitHub
Vercel will automatically trigger a new deployment

With this setup, you now have a foundational structure for building and deploying full-stack Next.js applications with a PostgreSQL database.

Thankyou for reading till the end. I hope you learned something new.
Have a great day!

Better ways to use async functions in Javascript

Aditya Bhattad — Sun, 21 Jul 2024 16:18:35 +0000

If you are into web development, there is a 100% chance you have used at least some async functions. There are different ways to use async functions, such as .then() and async/await. But what if I told you there are even better ways to use async functions that can reduce request times by up to half? 🤯
Yes, it's true! The JavaScript runtime provides various features that we do not commonly know or use. One of these features is the static methods for the Promise class.
In this short blog post we will look at how we can use these to improve our async function calls.

`Promise.all()`

The Promise.all() method takes an iterable of promises as an input and returns a single promise that resolve to the array of results of the input promises. It rejects immediately if any input promises reject or if a non-promise throws an error, and will reject with the first rejection method.

Here is an example:



const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve,reject)=>{
     setTimeout(resolve,100,'foo');
})
Promise.all([promise1,promise2,promise3]).then((values)=>{
     console.log(values);
})
// expected output Array [3,42,'foo']

Now let's see how we can use it to speed up our async calls:

Sequential vs Concurrent Execution

Normally, when making asynchronous function calls one after another, each request is blocked by the request before it, this pattern is also known as "waterfall" pattern, as each request can only begin once the previous request has returned some data.

Sequential Execution Pattern.



// Simulate two API calls with different response times
function fetchFastData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Fast data");
    }, 2000);
  });
}

function fetchSlowData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Slow data");
    }, 3000);
  });
}


// Function to demonstrate sequential execution
async function fetchDataSequentially() {
  console.log("Starting to fetch data...");

  const startTime = Date.now();

  // Start both fetches concurrently
  const fastData = await fetchFastData();
  const slowData = await fetchSlowData();

  const endTime = Date.now();
  const totalTime = endTime - startTime;

  console.log(`Fast data: ${fastData}`);
  console.log(`Slow data: ${slowData}`);
  console.log(`Total time taken: ${totalTime}ms`);
}
fetchDataSequentially()
/*
expected output:
Starting to fetch data...
Fast data: Fast data
Slow data: Slow data
Total time taken: 5007ms
*/

Here is a diagram for better visualization

Using Promise.all() we can fire off all the requests at once and then wait for all of them to finish, this way as the requests do not have to wait for the previous one to finish they can start early and hence get resolved early. Promise.all() returns an array with resolved promises once all the promises passed to it are resolved.
Here is how we can improve our fetchData function using promises.

Concurrent Execution Pattern



async function fetchDataConcurrently() {
  console.log("Starting to fetch data...");

  const startTime = Date.now();

  // Start both fetches concurrently
  const fastDataPromise =  fetchFastData();
  const slowDataPromise =  fetchSlowData();

  // Wait for both promises to resolve
  const [fastData, slowData] = await Promise.all([fastDataPromise, slowDataPromise]);

  const endTime = Date.now();
  const totalTime = endTime - startTime;

  console.log(`Fast data: ${fastData}`);
  console.log(`Slow data: ${slowData}`);
  console.log(`Total time taken: ${totalTime}ms`);
}
/*
expected output:
Starting to fetch data...
Fast data: Fast data
Slow data: Slow data
Total time taken: 3007ms
*/

Here is an diagram for better visualization

We pass all the promises in an array to Promise.all() and then await it. If there are multiple requests, we can save a lot of time this way.

There is one thing to consider, though: what if one promise rejects? If we use Promise.all() in this case, it will only reject with the rejected promise. What if we want to get result of all the promises be it resolved or rejected??
To handle this case, we can use Promise.allSettled(). Let's learn about it as well.

`Promise.allSettled()`

It is a sligt variation of Promise.all(), the difference is Promise.allSettled() always resolves, whether the promises passe to it resolves or rejects, it returns with the array containing the results of the promises passed to it.

Example:



const promise1 = Promise.reject("failure");
const promise2 = 42;
const promise3 = new Promise((resolve) => {
    setTimeout(resolve, 100, 'foo');
});
Promise.allSettled([promise1, promise2, promise3]).then((results) => {
    console.log(results);
});
// expected output: Array [
//   { status: "rejected", reason: "failure" },
//   { status: "fulfilled", value: 42 },
//   { status: "fulfilled", value: 'foo' }
// ]

Another useful static method is Promise.race(), it can be used to implement timeouts for async functions. Let's see how:

`Promise.race()`

The Promise.race() method returns a promise that fulfills or rejects as soon as any one of the promise passed to it in an array, fulfills or rejects, with a value or reason for the rejection of the promise.

Example



const promise1 = new Promise((resolve,reject)=>{
     setTimeout(resolve,500,'one');
})
const promise2 = new Promise((resolve,reject)=>{
     setTimeout(resolve,100,'two');
})
Promise.race([promise1,promise2]).then((value)=>{
     console.log(value);
     // Both resolves but promise2 is faster.
})
// expected output: 'two'

Let's see how we can use it to implement timeouts:



function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Fast data");
    }, 6000);
  });
}

const fetchDataPromise = fetchData();
function fetchDataWithTimeout(promise, duration) {
  let timeoutId;
  const timeoutPromise = new Promise((_, reject) => {
    timeoutId = setTimeout(() => {
      reject(new Error(`Operation timed out after ${duration} ms`));
    }, duration);
  });
  return Promise.race([
    promise,
    timeoutPromise
  ]).finally(()=>{
/*
 As pointed out by @vicariousv , if we do not clear the timeout, then
 even if our promise resolves before the timeout, the set timeout will
 still keep running. The process will end only after the timeout 
 completes, which is something to consider when using serverless 
 functionsas we pay for the runtime.
*/
     clearTimeout(timeoutId);
  })
}

fetchDataWithTimeout(fetchDataPromise,5000).then((result)=>{
  console.log(result)
}).catch((error)=>{
  console.log(error)
})
/*
expected result:
Too late
*/

This was it for this blog post. If you want to read more about async promises as a whole, check out my other blog post on async promises: Asynchronous JavaScript: The TL;DR Version You'll Always Recall.

Thank you for reading, and I hope you learned something new!

Asynchronous JavaScript: The TL;DR Version You'll Always Recall

Aditya Bhattad — Mon, 15 Jul 2024 16:36:58 +0000

I've noticed that async JavaScript is a topic of importance in many frontend and full-stack interviews. So rather than having to open docs and other 100s of resources before each interview or whenever I need to implement it, I decided to create a comprehensive resource ones and for all. The result? This blog.
In this blog post, I have included all the things I knew about async Javascript. So without a further ado, let's get started🚀

Introduction to Asynchronous JavaScript

To understand asynchronous programming, we first need to understand synchronous programming.

Synchronous Example:

console.log("Vivek loves Javascript");
console.log("Vivek is a frontend dev");
console.log("Vivek wants to learn async Javascript");

In this example, the browser executes each line sequentially, waiting for each console.log statement to complete before moving to the next. This approach works fine for quick operations but can cause problems with time-consuming tasks.

Take this inefficient factorial calculator:

If you input a large number and click "Check to find out", the program freezes temporarily, making the page unresponsive. This happens because JavaScript, in its basic form, is synchronous, blocking, and single-threaded language in its most basic form. When calculateFactorial is called, it occupies the single thread, preventing any other code from executing until it returns.

Making the Program Responsive

To make our program more responsive, it should:

Start a long-running operation by calling a function.
Have the function initiate the operation and return immediately, allowing the program to remain responsive to other events.
Execute the operation in a way that doesn't block the main thread.
Notify us with the result when the operation eventually completes.

Asynchronous Functions

Asynchronous functions allow a program to initiate a time-consuming task and remain responsive to other events while that task runs. The program can continue executing other code and receive the result once the task completes.

In the following sections, first we will explore how to use them, and then at the end we will take a look at how they work behind the scene.

Timeout and Interval

Let's start with the basics of async programming and build from there.

`setTimeout`

The setTimeout function executes a block of code once after a specified time has elapsed.

Parameters:

A reference to the function to be executed.
The time (in milliseconds) before the function will be executed.
Optional parameters to pass to the function when executed.

Function Signature:

setTimeout(function, duration, param1, param2, ...);

To cancel a timeout, you can use the clearTimeout() method, passing in the identifier returned by setTimeout as a parameter.

Here's how you can use clearTimeout:

const timeoutId = setTimeout(() => {
    console.log('hello');
}, 100);
clearTimeout(timeoutId);
// Expected output: (nothing)

A more practical scenario for clearing timeouts is in React when a component gets unmounted. We can use clearTimeout to cancel the timeout used in that component, freeing up resources.

`setInterval`

setInterval is similar to setTimeout, with one key difference: it executes repeatedly at the specified interval, continuing indefinitely until cleared.

Example:

const intervalId = setInterval(() => {
    console.log('hello, from setInterval!');
}, 100);
clearInterval(intervalId);

Notes:

Timers and intervals are not part of JavaScript itself but are implemented by the browser (client-side) and Node.js (server-side). setTimeout and setInterval are names given to this functionality in JavaScript.
You can achieve the same effect as setInterval with a recursive setTimeout:
It's also possible to achieve the same effect as setInterval with a recursive setTimeout:

function run() {
    console.log("I will also run after a fixed duration of time, just like I would have if it was setInterval.");
    setTimeout(run, 100);
}
setTimeout(run, 100);

Callback Functions

Definition and purpose

In JavaScript, functions are first-class objects, meaning they can be:

Assigned to variables
Passed as arguments to other functions
Returned from functions This ability to pass functions as arguments is what enables callback functionality. Any function that is passed to another function is called a callback function. The function which accepts another function as an argument or returns another function is called a higher-order function.

With setTimeout and setInterval, we pass a callback to these functions, making them higher-order functions.

Take another simple example:

// This is an example of a callback function.
function greet(name) {
    console.log(`Hello, ${name}!`);
}

// This is an example of a higher-order function.
function greetVivek(greetFn) {
    greetFn("Vivek");
}

greetVivek(greet);

In this example, greet is a callback function in the context of greetVivek. Since greetVivek takes a function as input, it is considered a higher-order function.

Synchronous vs. Asynchronous Callbacks

Synchronous Callback: Executes immediately, like in the example above.
Asynchronous Callback: Executes after an asynchronous operation completes, delaying execution until a particular time or event, example: callback passed to setTimeout.

Callback Hell

When multiple callback functions depend on the result obtained from the previous level, it can lead to deeply nested code, making it difficult to read and maintain.

Example

getData(function(a) {
    getMoreData(a, function(b) {
        getMoreData(b, function(c) {
            getMoreData(c, function(d) {
                getMoreData(d, function(e) {
                    console.log('Where the hell am I??');
                });
            });
        });
    });
});

To solve this problem, promises were introduced, making asynchronous code easier to write and understand.

Promises

Introduction to Promises

MDN Definition:

A promise is a proxy for value not necessarily known when it is created, it allows us to associate handlers with an asynchronous actions eventual success value or failure reason.

In simple words:
A Promise is an object representing the eventual completion or failure of an asynchronous operation. It can be in one of three states:

Pending: Initial state, neither fulfilled nor rejected.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

The eventual state of a pending promise can either be fulfilled with a value or rejected with a reason (error). When either of these states occur, the associated handlers queued up by the promise's then or catch method are called.

Example:

function buySandwich() {
  return new Promise((resolve, reject) => {
    if (Math.random() > 0.5) {
      resolve('Here is your cheese sandwich!');
    } else {
      reject(new Error('Sorry, not enough bread left.'));
    }
  });
}

buySandwich()
  .then((res) => {
    console.log(res);
    console.log("I love cheese sandwiches.");
  })
  .catch((err) => {
    console.log(err.message);
    console.log("Now I will have to cook pasta instead.");
  })
  .finally(() => {
    console.log("Let’s go for a walk!");
  });

If the promise has already been fulfilled or rejected when a handler is attached, the handler will still be called, so there is no race condition between an asynchronous operation and its handlers being attached.

const myPromises = Promise.resolve('Trust me bro!');
myPromise.then((value)=>{
    console.log('Told, you!');
})

Here is nice diagram from MDN to understand it better

Chaining Promises

Since .then() and .catch() methods both return promises, they can be chained.

This functionality makes them better alternative of callbacks.

How promises can be use instead of callbacks

Callback Example

getData(function(a) {
    getMoreData(a, function(b) {
        getMoreData(b, function(c) {
            getMoreData(c, function(d) {
                getMoreData(d, function(e) {
                    console.log('Where the hell am I??');
                });
            });
        });
    });
});

Same function written using promises

getData()
  .then(a => getMoreData(a))
  .then(b => getMoreData(b))
  .then(c => getMoreData(c))
  .then(d => getMoreData(d))
  .then(e => {
    console.log('Here is the final result: ', e);
  })
  .catch(err => {
    console.error('Something went wrong:', err);
  });

Much more readable this way.

Error handling with Promises

There are two ways to handle errors with promises:

Passing an onRejected handler as the second argument to .then(): If we do this, the error won't be caught if it is thrown from the onFulfillment handler.

   myPromise.then(
       result => { /* handle success */ },
       error => { /* handle error */ }
   );

Passing an onRejected handler to a .catch() block: This ensures that even if the onFulfillment handler throws an error, it is caught by the .catch() and can be handled there.

   myPromise
       .then(result => { /* handle success */ })
       .catch(error => { /* handle error */ });

The .catch() method is generally preferred as it also catches errors thrown in the .then() handlers.

Static method for promises

Promise.all()

The Promise.all() method takes an iterable of promises as input and returns a single Promise that resolves to an array of the results of the input promises. The returned promise will resolve when all of the input's promises have resolved, or if the input iterable has no promises. It rejects immediately if any of the input promises reject or if a non-promise throws an error, and will reject with the first rejection message/error.

Example

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve,reject)=>{
     setTimeout(resolve,100,'foo');
})
Promise.all([promise1,promise2,promise3]).then((values)=>{
     console.log(values);
})
// expected output Array [3,42,'foo']

Promise.allSettled()

Slight varaition of Promise.all(), Promise.allSettled() waits for all input promises to complete regardless of whether they resolve or reject. It returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describe the outcome of each promise.

Example:

const promise1 = Promise.reject("failure");
const promise2 = 42;
const promise3 = new Promise((resolve) => {
    setTimeout(resolve, 100, 'foo');
});
Promise.allSettled([promise1, promise2, promise3]).then((results) => {
    console.log(results);
});
// expected output: Array [
//   { status: "rejected", reason: "failure" },
//   { status: "fulfilled", value: 42 },
//   { status: "fulfilled", value: 'foo' }
// ]

Promise.any()

Promise.any() takes an iterable of promises as input and returns a single Promise. This returned promise fulfills when any of the input promises fulfill, with the first fulfillment value. It rejects when all of the input's promises reject (including when an empty iterable is passed), with an AggregateError containing an array of rejection reasons.

Example

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));
// expected output: "quick"

Promise.race()

The Promise.race() method returns a promise that fulfills or rejects as soon as one of the input promises fulfills or rejects, with the value or reason from that promise.
Example

const promise1 = new Promise((resolve,reject)=>{
     setTimeout(resolve,500,'one');
})
const promise2 = new Promise((resolve,reject)=>{
     setTimeout(resolve,100,'two');
})
Promise.race([promise1,promise2]).then((value)=>{
     console.log(value);
     // Both resolves but promise2 is faster.
})
// expected output: 'two'

Most famous usage of Promise.race(): to implement timeouts for async function, that is if the async functions take too long we can suspend it.

function promiseWithTimeout(promise,duration){
  return Promise.race(
    [
      promise,
      new Promise((_,reject)=>{
        setTimeout(reject,duration,"Too late.")
      })
    ]
  )
}


promiseWithTimeout(new Promise((resolve,reject)=>{
  setTimeout(resolve,4000,"Success.")
}),5000).then((result)=>{
  console.log(result)
}).catch((error)=>{
  console.log(error)
})

Async/Await

Introduction to async/await

From the above sections, it's clear that chaining promises solves the problem we had with callback hell. However, there is an even better way to handle asynchronous operations: using the async and await keywords introduced in ES2017 (ES8). These keywords allow us to write code that looks synchronous while performing asynchronous tasks behind the scenes.

Async functions

The async keyword is used to declare async functions. Async functions are instances of the AsyncFunction constructor. Unlike normal functions, async functions always return a promise.

Normal function

function greet() {return "hello"}
greet()
// expected output: hello

Async function

async function greet() {return "hello"}
greet()

We can also explicitly return a promise:

async function greet() {
    return Promise.resolve("hello")
}
greet()
// expected out (same for both): Promise{<fulfilled>:"hello"}

We can use .then() to get actual result.

greet().then((res)=>{
    console.log(res);
})
// expected output: "hello"

The real advantage of async functions is when we use them with the await keyword.

The await keyword

The await keyword can be placed in front of any async promise-based function to pause your code execution until that promise settles and returns its result. Note that the await keyword only works inside async functions, so we cannot use await inside normal functions.
Example

async function greet(){
    let promise = new Promise((resolve,reject)=>{
        setTimeout(()=>resolve("hello"),1000)
    })
    let result = await promise;
    console.log(result);
}

greet()
// expected output: "hello" (after 1 second)

Chaining Promises vs Async/Await

Here is the same function written with promises as well as async/await:
Using Promises

getData()
    .then(a => getMoreData(a))
    .then(b => getMoreData(b))
    .then(c => getMoreData(c))
    .then(d => getMoreData(d))
    .then(e => {
        console.log('Here is the final result: ',e);
    })
    .catch(err => {
        console.error('Something went wrong:', err);
    });

Using Async/Await

async function getData() {
    try {
        const a = await getData();
        const b = await getMoreData(a);
        const c = await getMoreData(b);
        const d = await getMoreData(c);
        const e = await getMoreData(d);
        console.log('Here is the final result: ', e);
    } catch (err) {
        console.error('Something went wrong:', err);
    }
}

Even error handling becomes much simpler with async/await.

Sequential vs Concurrent Execution

To improve the performance of web applications, we can use all the concepts we've learned above. Normally, when making asynchronous function calls one after another, the requests are blocked by the previous request, referred to as a request "waterfall," as each request can only begin once the previous request has returned data.

Sequential Execution

// Simulate two API calls with different response times
function fetchFastData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Fast data");
    }, 2000);
  });
}

function fetchSlowData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Slow data");
    }, 3000);
  });
}

// Function to demonstrate sequential execution
async function fetchDataSequentially() {
  console.log("Starting to fetch data...");

  const startTime = Date.now();

  // Start both fetches concurrently
  const fastData = await fetchFastData();
  const slowData = await fetchSlowData();

  const endTime = Date.now();
  const totalTime = endTime - startTime;

  console.log(`Fast data: ${fastData}`);
  console.log(`Slow data: ${slowData}`);
  console.log(`Total time taken: ${totalTime}ms`);
}
fetchDataSequentially()
/*
expected output:
Starting to fetch data...
Fast data: Fast data
Slow data: Slow data
Total time taken: 5007ms
*/

Concurrent Execution:

async function fetchDataConcurrently() {
  console.log("Starting to fetch data...");

  const startTime = Date.now();

  // Start both fetches concurrently
  const fastDataPromise =  fetchFastData();
  const slowDataPromise =  fetchSlowData();

  // Wait for both promises to resolve
  const [fastData, slowData] = await Promise.all([fastDataPromise, slowDataPromise]);

  const endTime = Date.now();
  const totalTime = endTime - startTime;

  console.log(`Fast data: ${fastData}`);
  console.log(`Slow data: ${slowData}`);
  console.log(`Total time taken: ${totalTime}ms`);
}
/*
expected output:
Starting to fetch data...
Fast data: Fast data
Slow data: Slow data
Total time taken: 3007ms
*/

In the concurrent execution, both requests are fired off simultaneously, and we await them using Promise.all(). As the requests are called concurrently, no request has to wait for the other, resulting in faster overall execution.

JavaScript Event Loop

Now that we have seen what promises are and how to use them, it is always good to understand how they work. As I mentioned earlier, JavaScript is a synchronous, blocking, and single-threaded language. The JavaScript engine has its own provisions to execute async code. Several different components come together to make async code execution possible.

Call Stack

The call stack is where the code executes line by line. The execution pointer starts from the top, pushing functions to be executed line by line onto the call stack and popping them out once they return.

Web APIs

These are provided by the browser in client-side JavaScript and by Node.js in server-side JavaScript. When there is any asynchronous task to be executed, it is passed to Web APIs, which are responsible for executing them. This offloading of asynchronous tasks allows the browser to execute other operations and prevents it from freezing.

Callback Queue

This is a queue data structure. Whenever setTimeout or setInterval needs to be called after a particular duration, the Web APIs cannot directly push the code to the call stack as it would pause the current execution of the call stack, potentially leading to unexpected results. To avoid this, there is a buffer-like zone, so all the callbacks to be executed go from Web APIs to the callback queue before reaching the call stack.

Microtask Queue

Similar to the callback queue but used for promises (It is given greater priority than the callback queue).

How the event loop works

Synchronous Code

First, let's start by seeing how the event loop works for normal synchronous code. Consider the following code:

function A() {
  console.log("A");
}
function B() {
  console.log("B");
}
function C() {
  console.log("C");
}

A();
B();
C();

As the execution pointer starts from the first line, function A gets pushed to the stack, is executed, and then popped off the stack. The same thing happens with B and then C. All this happens sequentially. Here nothing other that call stack and memory heap are included.

Asynchronous Code

But when there is asynchronous code included, the JavaScript engine cannot handle these by itself. This is where the Web APIs, event loop, task queue, and microtask queue come into play. Let's visualize the execution flow of code that includes setTimeout:

function A() {
  console.log("A");
}
setTimeout(function B() {
  console.log("B");
}, 1000);
function C() {
  console.log("C");
}

A();
C();

Here, as usual, the execution pointer starts from the first line, pushes A onto the stack, executes it, and pops it off. After this, setTimeout is pushed to the call stack. The callback function along with the timer is passed to the Web APIs to handle, and setTimeout is popped off the stack. The function C is then pushed to the stack, executed, and popped off. When the time defined in setTimeout elapses, the callback function is passed to the task queue. The event loop keeps checking if there is anything in the task queue and call stack. If there is anything in the task queue and the call stack is empty, the function in the queue is passed to the call stack, where it is executed as normal synchronous code.

Promises

Let's go through the code that includes a promise:

function A() {
  console.log("A");
}
const promise = new Promise((resolve) => {
  setTimeout(() => resolve("B"), 1000);
});
promise.then((res) => {
  console.log(res);
});
function C() {
  console.log("C");
}

A();
C();

Here, as usual, function A is pushed to the stack, gets executed, and pops off. Then the promise object is created and passed to the memory heap, and the async code is passed to Web APIs to be executed. Concurrently, the execution pointer moves to the next line, and when it scans the .then(), it assigns the callback passed to the then to the resolve value of the promise. Then it pushes function C to the call stack, executes it, and pops it off. Once the async code is done executing, the callback along with the returned value is passed to the microtask queue. The event loop keeps polling the call stack, and when the call stack is empty, it moves the callback along with the value to the call stack, where it gets executed.

Resources:

Asynchronous JavaScript Crash Course: https://youtu.be/exBgWAIeIeg?si=ccrAcUXnQS0gJgWE
MDN Docs: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous

Conclusion

Thank you for taking the time to read this blog post till the finish. I have plans to start a series where I share about what I did as a developer or anything I learned throughout the week. I am planning to write weekly, so if you find this blog interesting, make sure to keep an eye out for future posts.
Plus, if you have any feedback, or corrections, please let me know. Your input is valuable and helps improve the content for everyone.
Have a great day✨!

DEV Community: Aditya Bhattad

If we haven't met yet, I am Aditya Bhattad—and I am here to build!

But before that...

One Practical Application of Next.JS Parallel and Intercepting Routes: Better UX with Modals.

Parallel Routes

Understanding Slots

If you notice there are two types of slots:

Navigation with Parallel Routes

Intercepting Routes

How to Use Intercepting Routes

Practical Application

Overview of the application:

Steps to implement it

Step 1. Setting up a reusable modal component

Step 2: Creating a login route

Step 3: Create intercepting routes:

Step 4: Adding the @modal Slot to layout.tsx

Conclusion

Simplest Next.js setup to build full stack web applications with speed

Prerequisites

Teck Stack

Setting up Next.js application

Setting Up ShadCN UI (Optional)

Running Postgres locally

Connecting Prisma ORM

Creating a Prisma Client

Understanding the Hot Reload Problem

The Solution: Singleton Pattern

Adding CRUD Functionality with Next.js and Prisma (Optional)

Implementing CRUD Operations

Creating the Posts Model

Creating the Server Actions

Implementing Create Functionality

Implementing Read Functionality

Implementing Delete Functionality

Implementing Update Functionality

Deploying to Vercel

Database for Production

Fixing the Build Failure

Workflow for Future Development

Better ways to use async functions in Javascript

Promise.all()

Sequential vs Concurrent Execution

Sequential Execution Pattern.

Concurrent Execution Pattern

Promise.allSettled()

Example:

Promise.race()

Example

Asynchronous JavaScript: The TL;DR Version You'll Always Recall

Introduction to Asynchronous JavaScript

Synchronous Example:

Making the Program Responsive

Asynchronous Functions

Timeout and Interval

setTimeout

Parameters:

Function Signature:

setInterval

Example:

Notes:

Callback Functions

Definition and purpose

Take another simple example:

Synchronous vs. Asynchronous Callbacks

Callback Hell

Promises

Introduction to Promises

Chaining Promises

How promises can be use instead of callbacks

Error handling with Promises

Static method for promises

Promise.all()

Promise.allSettled()

Promise.any()

Promise.race()

Async/Await

Introduction to async/await

Async functions

The await keyword

Step 4: Adding the `@modal` Slot to `layout.tsx`

`Promise.all()`

`Promise.allSettled()`

`Promise.race()`

`setTimeout`

`setInterval`