The idea is that we will define two opacities. The default opacity will be 0.2 while the opacity when the text is visible will be 1. We will also divide the sentence into an array of strings so that we can work on each word individually. After that, we will define a threshold for each word. After the word has crossed that threshold the word will get an opacity of 1.

Let's first initialize an empty react-typescript project with tailwindcss.

yarn create vite

You can refer to this link to install tailwindcss with react.

Let's create a scroller component with some styles.

import { useEffect, useRef, useState } from "react";

function Scroller() {

  return (
    <>
      <section className="bg-black h-[500vh] text-center">

      </section>
    </>
  );
}

export default Scroller;

Now we have to add a scroll event on the window.

import { useEffect, useRef, useState } from "react";

function Scroller() {

useEffect(() => {
    function scroller(e: any) {
    }

    if (sectionRef.current) {
      window.addEventListener("scroll", scroller);
    }

    return () => {
      window?.removeEventListener("scroll", scroller);
    };
  }, []);

  return (
    <>
      <section className="bg-black h-[500vh] text-center">

      </section>
    </>
  );
}

export default Scroller;

We are simply just adding an event listener on the window and cleaning up the listener on unmount.

Now to calculate how much section is scrolled we will use refs and getboundingclientrect for the container section.

import { useEffect, useRef, useState } from "react";

function Scroller() {
    const sectionRef = useRef<HTMLElement | null>(null);
    const [progress,setProgress] = useState(0);

    useEffect(() => {

        function scroller(e: any) {
            if (sectionRef.current) {
            const elScrollTop = sectionRef.current.getBoundingClientRect().top;
            const elScrollHeight =
              sectionRef.current.getBoundingClientRect().height;

            const currentProgress =
              Math.abs(elScrollTop) / (elScrollHeight - window.innerHeight);
            if (currentProgress > 1.1) {
              return;
            }
            setProgress(currentProgress);

      }
        }

        if (sectionRef.current) {
          window.addEventListener("scroll", scroller);
        }

        return () => {
          window?.removeEventListener("scroll", scroller);
        };
      }, []);

      return (
        <>
          <section ref={sectionRef} className="bg-black h-[500vh] text-center">

          </section>
        </>
      );
}

export default Scroller;

To calculate the scroll percentage we are taking the container's total height and the offset Y or top. We will divide these two values to get a value between 0 and 1. We are setting this value to our state.

Now let's complete our animation by adding the logic for text.

import { useEffect, useRef, useState } from "react";

function Scroller() {
    const sectionRef = useRef<HTMLElement | null>(null);
    const [progress,setProgress] = useState(0);
    const text = "This text is animated on scroll";
    const totalTextLength = text.split(" ").length;

    useEffect(() => {

        function scroller(e: any) {
            if (sectionRef.current) {
            const elScrollTop = sectionRef.current.getBoundingClientRect().top;
            const elScrollHeight =
              sectionRef.current.getBoundingClientRect().height;

            const currentProgress =
              Math.abs(elScrollTop) / (elScrollHeight - window.innerHeight);
            if (currentProgress > 1.1) {
               // to stop from updating state when the content is not visible
              return;
            }
            setProgress(currentProgress);

          }
        }

        if (sectionRef.current) {
          window.addEventListener("scroll", scroller);
        }

        return () => {
          window?.removeEventListener("scroll", scroller);
        };
      }, []);

      return (
        <>
          <section ref={sectionRef} className="bg-black h-[500vh] text-center">
            <div className="fixed top-[50%] translate-y-[-50%] bg-black ">
              {text.split(" ").map((word, index) => {
                const textNumber = index + 1;
                const currentTextThreshold = (1 / totalTextLength) * textNumber;
                const opacity = progress >= currentTextThreshold ? 1 : 0.2;

                return (
                  <h1
                    key={`${word} ${index}`}
                    className={`transition ease-in-out delay-15 font-black inline-block px-[4px] md:px-[8px] lg:px-[16px] text-[48px] md:text-[64px] lg:text-[102px] text-white`}
                    style={{ opacity }}
                  >
                    {word}
                  </h1>
                );
              })}
            </div>
          </section>
        </>
      );
}

export default Scroller;

We have added a text string and split it on " " to make an array of strings. We are defining a threshold depending on the length of the array of strings. If the scroll progress (value between 0 and 1) has crossed that word threshold. We will give that word opacity of 1.

You can refer to this link for the code.

Prerequisites

I am assuming that you have some knowledge of building Shopify apps.

All the code is available on my GitHub repository (Link).

I have already created a basic test app using the command

yarn create @shopify/app

To use Pixel API our app needs two Shopify scopes. Scopes are write_pixel and read_customer_events.

./shopify.app.toml

# This file stores configurations for your Shopify app.

scopes = "write_products,write_pixels,read_customer_events"

We need to install the app on our development store using the command.

yarn dev

With this app installation end's on the store now we need to start tracking events with pixel API.

To connect pixel API with our current app we will use a Shopify command to create an extension.

yarn run shopify app generate extension

There are many extension options available we need to choose Web Pixel.

After this, we can see that a new folder has appeared in our app folder structure.

Now we need to create an endpoint to enable pixel API. We will use the webPixelCreate mutation.

app.post("/api/webpixel", async (_req, res) => {
  const client = new shopify.api.clients.Graphql({
    session: res.locals.shopify.session,
  });

  const response = await client.query({
    data: {
      query: `
      mutation webPixelCreate($webPixelInput: WebPixelInput!) {
        webPixelCreate(webPixel: $webPixelInput) {
          webPixel {
            settings
            id
          }
          userErrors {
            code
            field
            message
          }
        }
      }
      `,
      variables: {
        webPixelInput: {
          settings: {
            accountID: crypto.randomUUID(),
          },
        },
      },
    },
  });

  if (response.body.data.webPixelCreate.userErrors.length) {
    const errors = queryResponse.body.data.webPixelCreate.userErrors;
    throw new Error(errors.map((error) => error.message).join(" , "));
  }

  return response.body.data.webPixelCreate.webPixel;
});

We are first creating a graphql client. After that we are sending a webPixelCreate mutation.

The accountID in variables is the setting that we pass from webpixel to Shopify. We can create other variables like this by editing the shopify.ui.extension.toml file.

Let's create a button on the frontend to consume this endpoint

./web/frontend/pages/index.jsx

import {
  Card,
  Page,
  Layout,
  TextContainer,
  Image,
  Stack,
  Link,
  Text,
  Button,
} from "@shopify/polaris";
import {
  TitleBar,
  useAuthenticatedFetch,
  useToast,
} from "@shopify/app-bridge-react";
import { useTranslation, Trans } from "react-i18next";

import { trophyImage } from "../assets";

import { ProductsCard } from "../components";

export default function HomePage() {
  const { t } = useTranslation();
  const fetch = useAuthenticatedFetch();
  const toast = useToast();

  const enableTracker = async () => {
    const response = await fetch("/api/webpixel", {
      method: "POST",
    });
    const data = await response.json();

    toast.show("Tracker installed");
  };

  return (
    <Page narrowWidth>
      <Button primary onClick={enableTracker}>
        Enable Tracker
      </Button>
      <TitleBar title={t("HomePage.title")} primaryAction={null} />
      <Layout>
        <Layout.Section>
          <Card sectioned>
            <Stack
              wrap={false}
              spacing="extraTight"
              distribution="trailing"
              alignment="center"
            >
              <Stack.Item fill>
                <TextContainer spacing="loose">
                  <Text as="h2" variant="headingMd">
                    {t("HomePage.heading")}
                  </Text>
                  <p>
                    <Trans
                      i18nKey="HomePage.yourAppIsReadyToExplore"
                      components={{
                        PolarisLink: (
                          <Link url="https://polaris.shopify.com/" external />
                        ),
                        AdminApiLink: (
                          <Link
                            url="https://shopify.dev/api/admin-graphql"
                            external
                          />
                        ),
                        AppBridgeLink: (
                          <Link
                            url="https://shopify.dev/apps/tools/app-bridge"
                            external
                          />
                        ),
                      }}
                    />
                  </p>
                  <p>{t("HomePage.startPopulatingYourApp")}</p>
                  <p>
                    <Trans
                      i18nKey="HomePage.learnMore"
                      components={{
                        ShopifyTutorialLink: (
                          <Link
                            url="https://shopify.dev/apps/getting-started/add-functionality"
                            external
                          />
                        ),
                      }}
                    />
                  </p>
                </TextContainer>
              </Stack.Item>
              <Stack.Item>
                <div style={{ padding: "0 20px" }}>
                  <Image
                    source={trophyImage}
                    alt={t("HomePage.trophyAltText")}
                    width={120}
                  />
                </div>
              </Stack.Item>
            </Stack>
          </Card>
        </Layout.Section>
        <Layout.Section>
          <ProductsCard />
        </Layout.Section>
      </Layout>
    </Page>
  );
}

This is a simple react component that we will use to enable the tracker.

Now let's send some customer events to our backend.

Pixel API can subscribe to different events the most common ones are

1. checkout_started - Fires on checkout start.

2. collection_viewed - Fires on collection page view.

3. page_viewed - Fires when customers view any page.

4. product_added_to_cart - Fires when the customer adds any product to the cart.

5. product_viewed - Fires when the customer visits the product page.

6. checkout_completed - Fires on checkout complete.

With Every event, we get an event object which consists of different types of data depending on the event. For example, when product_added_to_cart event fires then we will get an event object. This object will contain information about the product that the customer has added.

./extensions/tracker/src/index.ts

import { register } from "@shopify/web-pixels-extension";

register(({ analytics }) => {
  analytics.subscribe("product_added_to_cart", async (event) => {
    console.log("event", event);
  });
});

Now when we add a product to our cart we will get an event of this type.

{
    "id": "sh-b52dc9da-35AC-47D6-3C29-8ABBBD3D7BBB",
    "clientId": "76dfa2b795f37436170c42978f9dbaab",
    "timestamp": "2023-06-13T14:34:12.629Z",
    "name": "product_added_to_cart",
    "context": {
        "document": {
            "location": {
               // window location related 
            },
        },
        "navigator": {
            // window navigator properties
        },
        "window": {
          // some important window properties
        }
    },
    "data": {
        "cartLine": {
            "cost": {
                "totalAmount": {
                    "amount": 600,
                    "currencyCode": "INR"
                }
            },
            "merchandise": {
                "id": "123456789",
                "image": {
                    "src": "https://something-random.com"
                },
                "price": {
                    "amount": 600,
                    "currencyCode": "INR"
                },
                "product": {
                    "id": "8123348812079",
                    "title": "The Collection Snowboard: Hydrogen",
                    "vendor": "Hydrogen Vendor",
                    "type": "",
                    "untranslatedTitle": "The Collection Snowboard: Hydrogen"
                },
                "sku": "",
                "title": null,
                "untranslatedTitle": null
            },
            "quantity": 1
        }
    }
}

To send this event to the backend we will use window beacon API.

The endpoint that pixel api request to send tracking data should be open. Pixel api request doesn't have the session token generated by the shopify app bridge. This session token validates the request.

import { register } from "@shopify/web-pixels-extension";
import {API_URL} from "./constants";

register(({ analytics, browser }) => {
  analytics.subscribe("product_added_to_cart", async (event) => {
    const url = `${API_URL}/track`;
    const isSuccessful = await browser.sendBeacon(
      url,
      JSON.stringify({ ...event })
    );
    if (!isSuccessful) throw new Error("Unable to send via Beacon API");
  });
});

We can now create a backend route for this endpoint.

app.post("/api/track", (_req, res) => {
  console.log(_req.body);
});

With this our simple tracker is finished!.

Webhook endpoints are public and anyone can send a request to these endpoints. To protect these endpoints we process the request before handling them.

Prerequisites

I am assuming that you have some knowledge of building Shopify apps. You have a basic understanding of how nestjs project works.

Shopify provides a method to process the webhook request i.e. Shopify.Webhooks.Registry.process(request,response) but let's see how to process it manually in nestjs.

Shopify webhook processing method.

@Controller('/api/webhook')
export class ShopifyWebhookController {

  @Post('/')
  async processWebhook(
    @Req() req: RawBodyRequest<IncomingMessage>,
    @Res() res: Response,
  ) {
       await Shopify.Webhooks.Registry.process(req, res);
       console.log(`Webhook processed, returned status code 200`);
       res.status(200).send("completed");
  }
}

Now let's see how to process Shopify webhooks. First, we have to create a Shopify webhook module with its controller and service.

src/shopify-webhook/shopify-webhook.module.ts

@Module({
  controllers: [ShopifyWebhookController],
  providers: [ShopifyWebhookService],
  exports: [ShopifyWebhookService],
})
export class ShopifyWebhookModule {}

We have exported the webhook service so that other modules can use this service. We can register and add handlers for Shopify webhooks in the onModuleInit function.

@Module({
  controllers: [ShopifyWebhookController],
  providers: [ShopifyWebhookService],
  exports: [ShopifyWebhookService],
})
export class ShopifyWebhookModule implements OnModuleInit {
  constructor(private readonly shopifyWebhookService: ShopifyWebhookService) {}

  onModuleInit() {
    Shopify.Webhooks.Registry.addHandlers({
      APP_UNINSTALLED: {
        path: '/api/webhook/',
        webhookHandler: this.shopifyWebhookService.processUninstall,
      },
    });
  }
}

This will add an app uninstall webhook to the local Shopify registry. To register the webhook we have to call Shopify.Webhooks.Registry.register({topic:"",shop:"",accessToken:"",path:""}).

The register function takes in the topic or type of webhook. Shop's name to register webhook for that shop. The access token that we get when we install the app. It also requires a path. When someone uninstalls the app, Shopify will send a request to this path.

To validate webhook requests we require a raw body. To get the raw body of the request we have to tell nest.js to provide it with every request. We can do this in nest bootstrap file

src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule, {
    rawBody: true,
  });

  const port = process.env.BACKEND_PORT || process.env.PORT;
  await app.listen(port);
}
bootstrap();

Let's create the controller which will handle the webhook request.

src/shopify-webhook/shopify-webhook.controller.ts

@Controller('/api/webhook')
export class ShopifyWebhookController {
  @Post('/')
  async processWebhook(
    @Req() req: RawBodyRequest<IncomingMessage>,
    @Res() res: Response,
  ) {}
}

All the Shopify webhooks will hit this endpoint and this controller will handle it. We have to protect this endpoint from random requests. We can add a guard before our controller to protect the endpoint. Leave the controller empty for now.

Let's create the guard that will protect the controller.

@Injectable()
export class VerifyWebhook implements CanActivate {
  canActivate(context: ExecutionContext): boolean | Promise<boolean> {

  }
}

Shopify will send a hash with every webhook request that we can use to verify the request. Shopify creates this hash with the request's raw body and Shopify API secret. We have to generate a hash and compare it with the webhook request's hash. Let's see how to do it.

import {
  BadRequestException,
  CanActivate,
  ExecutionContext,
  Injectable,
  InternalServerErrorException,
  RawBodyRequest,
  UnauthorizedException,
} from '@nestjs/common';
import Shopify from '@shopify/shopify-api';
import { createHmac, timingSafeEqual } from 'crypto';
import { IncomingMessage } from 'http';

@Injectable()
export class VerifyWebhook implements CanActivate {
  canActivate(context: ExecutionContext): boolean | Promise<boolean> {
    const req = context
      .switchToHttp()
      .getRequest<RawBodyRequest<IncomingMessage>>();

    const hmacHeader = req.headers['X-Shopify-Hmac-Sha256'] as string;

    if (!hmacHeader || typeof hmacHeader !== 'string') {
      throw new UnauthorizedException(
        `Not Authorized`,
      );
    }  

    if (!req.rawBody) {
      throw new InternalServerErrorException(
        `Raw body not found`,
      );
    }

    const generatedHash = createHmac('sha256', 'shopify api secret')
      .update(req.rawBody)
      .digest('base64');

    const generatedHashBuffer = Buffer.from(generatedHash);
    const hmacBuffer = Buffer.from(hmacHeader);

    if (generatedHashBuffer.length !== hmacBuffer.length) {
       throw new UnauthorizedException(
        `Not Authorized`,
      );
    }

    if (!timingSafeEqual(generatedHashBuffer, hmacBuffer)) {
       throw new UnauthorizedException(
        `Not Authorized`,
      );
    }

    return true;
  }
}

Here we are using the request object from context. We are first checking whether the current request has a hash or not. If the request doesn't have a hash then we reject it. Then we are generating a hash from createHmac function by the crypto library. We are using both Shopify API secret and raw body to generate the hash. Finally, we just compare them with the timingSafeEqual function.

To learn more about createHmac and timingSafeEqual you can check out nodejs crypto's documentation. (Link)

Let's use this guard in Shopify webhook controller.

@Controller('/api/webhook')
export class ShopifyWebhookController {
  @UseGuards(VerifyWebhook)
  @Post('/')
  async processWebhook(
    @Req() req: RawBodyRequest<IncomingMessage>,
    @Res() res: Response,
  ) {}
}

Now we have to handle which service method will run depending on the webhook topic. So let's see how to do it

@Controller('/api/webhook')
export class ShopifyWebhookController {
  @UseGuards(VerifyWebhook)
  @Post('/')
  async processWebhook(
    @Req() req: RawBodyRequest<IncomingMessage>,
    @Res() res: Response,
  ) {
    const topic = req.headers['X-Shopify-Topic'];

    if (!req.rawBody) {
      throw new InternalServerErrorException(
        'raw body not found',
      );
    }

    const domain = req.headers['X-Shopify-Shop-Domain'];

    if (!domain || !topic) {
      throw new BadRequestException(
        `something went wrong`,
      );
    }

    const graphqlTopic = topic.toUpperCase().replace(/\//g, '_');
    const webhookEntry = Shopify.Webhooks.Registry.getHandler(graphqlTopic);

    if (!webhookEntry) {
      throw new NotFoundException(
        `No handler found`,
      );
    }

    await webhookEntry.webhookHandler(
      graphqlTopic,
      domain as string,
      rawBody.toString(),
    );

    res.status(200).send('completed');

  }
}

Here we are checking whether we have registered a handler to handle this topic. If we found a handler then we pass some arguments to it and call it. The arguments are the current topic, the shop's URL and data in raw body format. We can access these arguments in the handler.

Let's create the processUninstall handler in Shopify webhook service.

src/shopify-webhook/shopify-webhook.service.ts

import { Injectable } from '@nestjs/common';
import Shopify from '@shopify/shopify-api';

@Injectable()
export class ShopifyWebhookService {
  constructor() {}
  async processUninstall(topic: string, shop: string, body: any) {
    console.log('process uninstall function');
  }
}

The processUninstall method will have three parameters. These are the same parameters that we passed to the handler above.

With that our custom webhook processing is complete.

This is what Neovim looks like without configuration.

We will convert it to this.

Configuration is available on my GitHub repository. (Link)

Let's first install Neovim on our system. We will be using Lua for configuration.

brew install neovim

Brew installation only works for mac devices. If you have any other device you can refer to Neovim documentation. (Link)

Now we have to create a nvim directory inside .config directory. The path will be ~/.config/nvim . When Neovim executes, it will find configuration files in this folder. Neovim will search for init.lua file.

For Windows users, the configuration location will be C:\User\username\AppData\Local\nvim .

The file structure will be -

.
└── .config/
    └── nvim/
        ├── init.lua
        └── lua/
            └── pulkitgangwar/
                ├── core/
                │   ├── options.lua
                │   ├── remap.lua
                │   └── colorscheme.lua
                ├── plugins/
                │   └── //all-plugins-setup-files
                └── plugins-setup.lua

Let's start with adding remaps and options for Neovim.

/lua/pulkitgangwar/core/options.lua

vim.opt.nu = true
vim.opt.relativenumber = true

vim.opt.tabstop = 4
vim.opt.softtabstop = 4
vim.opt.shiftwidth = 4
vim.opt.expandtab = true

vim.opt.smartindent = true

vim.opt.hlsearch = false
vim.opt.incsearch = true

vim.opt.termguicolors = true

vim.opt.scrolloff = 8

/lua/pulkitgangwar/core/remap.lua

vim.g.mapleader = " "

vim.keymap.set("i", "kj", "<Esc>")

vim.keymap.set("v", "J", ":m '>+1<CR>gv=gv")
vim.keymap.set("v", "K", ":m '<-2<CR>gv=gv")


vim.keymap.set({ "n", "v" }, "<leader>y", [["+y]])
vim.keymap.set("n", "<leader>Y", [["+Y]])

vim.keymap.set("x", "<leader>p", [["_dP]])


vim.keymap.set("n", "Q", "<nop>")

vim.keymap.set("n", "<leader>f", vim.lsp.buf.format)

After adding options and remaps we have to import these files in our init.lua file.

~/.config/nvim/init.lua

require("pulkitgangwar.core.options")
require("pulkitgangwar.core.remap")

The first configuration we will do is for the plugin manager. We will use packer as our plugin manager.

/lua/pulkitgangwar/plugins-setup.lua (Packer installation)

vim.cmd [[packadd packer.nvim]]

return require('packer').startup(function(use)
    use 'wbthomason/packer.nvim'

end)

Save the file with :w and reopen plugins-setup.lua file. Execute :PackerSync to sync all the packages inside the startup function.

The following script will install some plugins for different use cases.

vim.cmd [[packadd packer.nvim]]

return require('packer').startup(function(use)
    use 'wbthomason/packer.nvim'

     -- file explorer
    use 'nvim-tree/nvim-tree.lua'
    use 'nvim-tree/nvim-web-devicons'

    -- fuzzy finding
    use {
        'nvim-telescope/telescope.nvim', tag = '0.1.0',
        requires = { { 'nvim-lua/plenary.nvim' } }
    }
    -- color scheme
    use 'folke/tokyonight.nvim'

    -- treesitter
    use({
        "nvim-treesitter/nvim-treesitter",
        run = function()
            require("nvim-treesitter.install").update({ with_sync =    true })
        end,
    })

    -- movement between splits
    use "christoomey/vim-tmux-navigator"

    -- buffer line support
    use "akinsho/bufferline.nvim"

    -- auto pairs
    use "windwp/nvim-autopairs"

    -- bottom informative line
    use 'nvim-lualine/lualine.nvim'

end)

nvim-tree : It is a file explorer. Neovim has netrw but we will remove it to use nvim-tree

nvim-web-devicons : This plugin will show different icons. Remember to have patched fonts installed for your terminal.

telescope : This plugin helps with fuzzy findings.

tokyonight : This is the colour scheme for our editor.

treesitter : It helps in syntax highlighting.

vim-tmux-navigator : It helps in moving between splits.

bufferline : It helps to show all the current opened buffers.

nvim-autopairs : It helps in auto-closing brackets, quotations etc.

lualine : It helps to show the bottom activity bar, like vs code.

Now we have to set up these plugins. To set up plugins, we will follow some steps. The first step is to install the plugin. After that, we have to create a file for that plugin.

/lua/pulkitgangwar/plugins/nvim-tree.lua (nvim-tree setup)

vim.g.loaded_netrw = 1
vim.g.loaded_netrwPlugin = 1

vim.opt.termguicolors = true

require("nvim-tree").setup({
    git = {
    enable = true,
    ignore = false,
    timeout = 500,
  },
})

vim.keymap.set("n", "<leader>e", vim.cmd.NvimTreeToggle)

~/.config/nvim/init.lua

require("pulkitgangwar.core.options")
require("pulkitgangwar.core.remap")
require("pulkitgangwar.plugins.nvim-tree")

/lua/pulkitgangwar/core/colorscheme.lua

vim.o.background = "dark" 

vim.cmd([[colorscheme tokyonight]])

~/.config/nvim/init.lua

require("pulkitgangwar.core.options")
require("pulkitgangwar.core.remap")
require("pulkitgangwar.core.colorscheme")
require("pulkitgangwar.plugins.nvim-tree")

/lua/pulkitgangwar/plugins/telescope

local builtin = require('telescope.builtin')

vim.keymap.set('n', '<leader>ff', builtin.find_files, {})
vim.keymap.set('n', '<leader>fg', builtin.git_files, {})
vim.keymap.set('n','<leader>gd', builtin.diagnostics, {})

~/.config/nvim/init.lua

require("pulkitgangwar.core.options")
require("pulkitgangwar.core.remap")
require("pulkitgangwar.core.colorscheme")
require("pulkitgangwar.plugins.nvim-tree")
require("pulkitgangwar.plugins.telescope")

/lua/pulkitgangwar/plugins/nvim-treesitter.lua

local treesitter_status,treesitter = pcall(require,"nvim-treesitter.config")

if not treesitter_status then print("treesitter not found") return end

treesitter.setup({
  ensure_installed = { "help", "javascript", "typescript", "c", "lua", "rust" },
  sync_install = false,
  auto_install = true,
  highlight = {
    enable = true,
    additional_vim_regex_highlighting = false,
  },
})

~/.config/nvim/init.lua

require("pulkitgangwar.core.options")
require("pulkitgangwar.core.remap")
require("pulkitgangwar.core.colorscheme")
require("pulkitgangwar.plugins.nvim-tree")
require("pulkitgangwar.plugins.telescope")
require("pulkitgangwar.plugins.nvim-treesitter")

/lua/pulkitgangwar/plugins/bufferline.lua

require('bufferline').setup({
  options = {
    offsets = {
        {
            filetype = "NvimTree",
            text = "File Explorer",
            highlight = "Directory",
            separator = true 
        },
    }
  }
})

-- move between buffers or tabs
vim.keymap.set("n","<S-l>",vim.cmd.bnext)
vim.keymap.set("n","<S-h>",vim.cmd.bprev)

/lua/pulkitgangwar/plugins/nvim-autopairs.lua

require("nvim-autopairs").setup()

~/.config/nvim/init.lua

require("pulkitgangwar.core.options")
require("pulkitgangwar.core.remap")
require("pulkitgangwar.core.colorscheme")
require("pulkitgangwar.plugins.nvim-tree")
require("pulkitgangwar.plugins.telescope")
require("pulkitgangwar.plugins.nvim-treesitter")
require("pulkitgangwar.plugins.nvim-autopairs")

/lua/pulkitgangwar/plugins/lualine.lua

require("lualine").setup({
    options = {
        theme = "tokyonight",
    },
})

~/.config/nvim/init.lua

require("pulkitgangwar.core.options")
require("pulkitgangwar.core.remap")
require("pulkitgangwar.core.colorscheme")
require("pulkitgangwar.plugins.nvim-tree")
require("pulkitgangwar.plugins.telescope")
require("pulkitgangwar.plugins.nvim-treesitter")
require("pulkitgangwar.plugins.nvim-autopairs")
require("pulkitgangwar.plugins.lualine")

Now we will work on LSP and suggestions. It was very difficult for me to set up LSP so I used a great plugin that abstracts most things. The name of the plugin is lsp-zero .

/lua/pulkitgangwar/plugin-setup.lua

vim.cmd [[packadd packer.nvim]]

return require('packer').startup(function(use)
    use 'wbthomason/packer.nvim'

     -- file explorer
    use 'nvim-tree/nvim-tree.lua'
    use 'nvim-tree/nvim-web-devicons'

    -- fuzzy finding
    use {
        'nvim-telescope/telescope.nvim', tag = '0.1.0',
        requires = { { 'nvim-lua/plenary.nvim' } }
    }
    -- color scheme
    use 'folke/tokyonight.nvim'

    -- treesitter
    use({
        "nvim-treesitter/nvim-treesitter",
        run = function()
            require("nvim-treesitter.install").update({ with_sync =    true })
        end,
    })

    -- movement between splits
    use "christoomey/vim-tmux-navigator"

    -- buffer line support
    use "akinsho/bufferline.nvim"

    -- auto pairs
    use "windwp/nvim-autopairs"

    -- bottom informative line
    use 'nvim-lualine/lualine.nvim'


    -- lsp, snippets, autocomplete
    use {
        'VonHeikemen/lsp-zero.nvim',
        requires = {
            -- LSP Support
            { 'neovim/nvim-lspconfig' },
            { 'williamboman/mason.nvim' },
            { 'williamboman/mason-lspconfig.nvim' },

            -- Autocompletion
            { 'hrsh7th/nvim-cmp' },
            { 'hrsh7th/cmp-buffer' },
            { 'hrsh7th/cmp-path' },
            { 'saadparwaiz1/cmp_luasnip' },
            { 'hrsh7th/cmp-nvim-lsp' },
            { 'hrsh7th/cmp-nvim-lua' },

            -- Snippets
            { 'L3MON4D3/LuaSnip' },
            { 'rafamadriz/friendly-snippets' },
        }
    }
end)

/lua/pulkitgangwar/plugins/lsp.lua

local lsp = require("lsp-zero")

lsp.preset("recommended")

lsp.ensure_installed({
  'tsserver',
  'eslint',
  'sumneko_lua',
  'rust_analyzer',
})

-- Fix Undefined global 'vim'
lsp.configure('sumneko_lua', {
    settings = {
        Lua = {
            diagnostics = {
                globals = { 'vim' }
            }
        }
    }
})


local cmp = require('cmp')
local cmp_select = {behavior = cmp.SelectBehavior.Select}
local cmp_mappings = lsp.defaults.cmp_mappings({
  ['<C-p>'] = cmp.mapping.select_prev_item(cmp_select),
  ['<C-n>'] = cmp.mapping.select_next_item(cmp_select),
  ['<C-y>'] = cmp.mapping.confirm({ select = true }),
  ["<C-Space>"] = cmp.mapping.complete(),
})

-- disable completion with tab
-- this helps with copilot setup
cmp_mappings['<Tab>'] = nil
cmp_mappings['<S-Tab>'] = nil

lsp.setup_nvim_cmp({
  mapping = cmp_mappings
})

lsp.set_preferences({
    suggest_lsp_servers = false,
    sign_icons = {
        error = 'E',
        warn = 'W',
        hint = 'H',
        info = 'I'
    }
})

lsp.on_attach(function(client, bufnr)
  local opts = {buffer = bufnr, remap = false}

  if client.name == "eslint" then
      vim.cmd.LspStop('eslint')
      return
  end

  vim.keymap.set("n", "gd", vim.lsp.buf.definition, opts)
  vim.keymap.set("n", "K", vim.lsp.buf.hover, opts)
  vim.keymap.set("n", "<leader>vws", vim.lsp.buf.workspace_symbol, opts)
  vim.keymap.set("n", "<leader>vd", vim.diagnostic.open_float, opts)
  vim.keymap.set("n", "[d", vim.diagnostic.goto_next, opts)
  vim.keymap.set("n", "]d", vim.diagnostic.goto_prev, opts)
  vim.keymap.set("n", "<leader>vca", vim.lsp.buf.code_action, opts)
  vim.keymap.set("n", "<leader>vrr", vim.lsp.buf.references, opts)
  vim.keymap.set("n", "<leader>vrn", vim.lsp.buf.rename, opts)
  vim.keymap.set("i", "<C-h>", vim.lsp.buf.signature_help, opts)
end)

lsp.setup()

vim.diagnostic.config({
    virtual_text = true,
})

~/.config/nvim/init.lua

require("pulkitgangwar.core.options")
require("pulkitgangwar.core.remap")
require("pulkitgangwar.core.colorscheme")
require("pulkitgangwar.plugins.nvim-tree")
require("pulkitgangwar.plugins.telescope")
require("pulkitgangwar.plugins.nvim-treesitter")
require("pulkitgangwar.plugins.nvim-autopairs")
require("pulkitgangwar.plugins.lualine")
require("pulkitgangwar.plugins.lsp")

You can read more about every plugin from their repositories.

nvim-tree, telescope, tokyonight, treesitter, vim-tmux-navigator, bufferline, nvim-autopairs, lualine

Redux toolkit reduces the complexities and the code we write to setup up redux. The Redux toolkit has redux-thunk capabilities built-in. We can divide our state into smaller states so that they are easily manageable. Redux toolkit makes it very easy to work with redux in react applications.

So let's see how we can use the redux toolkit with react. To understand how the redux toolkit works we will be building a small todo application.

if you are setting up a react project from scratch then you can directly use the create-react-app template for redux.

All the code is available on my GitHub repository (Link).

First, let's start with initializing our project with create react app

yarn create react-app redux-with-react

Then we need to install some libraries

yarn add react-redux @reduxjs/toolkit

We don't need to install the redux library, @reduxjs/toolkit has redux as its dependency. react-redux is the library that provides components and hooks to work with redux.

Now we create a store in which all our mini stores (slices) will reside. For that let's create a store folder and in that create an index.js file

src/store/index.js

import { configureStore } from "@reduxjs/toolkit";

export default configureStore({
  reducer: {},
});

We will import the configure store function from the redux toolkit. This function combines our multiple small stores into a single large store. Let's leave the reducer empty for now.

After creating the store we need to inform redux to use this store. For that, we will give the store to the Provider component. This provider component will live at the root level of react so that every child can access the store.

src/index.js

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider as ReduxStoreProvider } from "react-redux";
import App from "./App";
import store from "./store";

const root = createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ReduxStoreProvider store={store}>
      <App />
    </ReduxStoreProvider>
  </React.StrictMode>
);

The react-redux library exports the provider component. Here we are importing the store we created earlier and passing it as a prop to the provider. Now every child can access the store regardless of how nested the child is.

Now let's create our first slice or mini-store. Create a file named todos.js inside the store folder. Redux toolkit calls mini-store as slices. To create a slice redux toolkit export a function named createSlice.

src/store/todos.js

import { createSlice } from "@reduxjs/toolkit";

const todosSlice = createSlice({});

The createSlice function takes in an object as a parameter. It can be provided many properties to configure the store.

src/store/todos.js

import { createSlice } from "@reduxjs/toolkit";

const todosSlice = createSlice({
  name: "todos",
  initialState: {
    todos: [],
  },
  reducers: {

  },
});

name: name is used to name the slice

initialState: initial state is used to provide state initial state value to our slice, we only have a todos array right now but we can have multiple properties here.

reducers: we can define methods in reducer to modify state values. Let's leave it empty for now.

Finally, we have completed our to-dos slice. At this time our main store doesn't know about the todos slice. To include the todos slice in the main store we have to export the reducer of the todos slice. The main store will use the exported todos slice reducer in store/index.js.

src/store/todos.js

import { createSlice } from "@reduxjs/toolkit";

const todosSlice = createSlice({
  name: "todos",
  initialState: {
    todos: [],
  },
  reducers: {

  },
});

export default todosSlice.reducer;

We have exported the reducer from the todos slice.

src/store/index.js

import { configureStore } from "@reduxjs/toolkit";
import todosReducer from "./todos";

export default configureStore({
  reducer: {
    todos: todosReducer,
  },
});

First, we have to provide the name of the slice and then the reducer.

Then we have to create a component which will render all todos from the todos slice. Before that let's add some random todos in our initial state so that we have something to render.

src/store/todos.js

import { createSlice } from "@reduxjs/toolkit";

const todosSlice = createSlice({
  name: "todos",
  initialState: {
    todos: [
      { id: "1", title: "first todo", completed: false },
      { id: "2", title: "second todo", completed: false },
    ],
  },
  reducers: {

  },
});

Now let's create Todos.jsx component

src/components/Todos.jsx

import React from "react";

const Todos = () => {
  return (
    <div>
      <h1>Todos</h1>
    </div>
  );
};

export default Todos;

To access our todos state we have to use hooks provided by the react-redux library. Hooks make it very easy to grab data from the redux store.

src/components/Todos.jsx

import React from "react";
import { useSelector } from "react-redux";

const Todos = () => {
  const { todos } = useSelector((state) => state.todos);

  return (
    <div>
      <h1>Todos</h1>
      {todos.map((todo) => (
        <div key={todo.id}>
          <h3>{todo.title}</h3>
        </div>
      ))}
    </div>
  );
};

export default Todos;

The react-redux library export useSelector hook. Hook takes a callback function which gets the store's state. We can either return the whole state or the part of the state we want, so here we are only returning todos.

In the above code, we mention state.todos. We can do this because of the property name we provided to the main store object for the todos slice reducer.

src/store/index.js

import { configureStore } from "@reduxjs/toolkit";
import todosReducer from "./todos";

export default configureStore({
  reducer: {
    todos: todosReducer,
  },
});

Now let's see how to change our state. We will add the remove functionality to our app. Create a remove button and attach a click event listener for every todo element.

src/components/Todos.jsx

import React from "react";
import { useSelector } from "react-redux";

const Todos = () => {
  const { todos } = useSelector((state) => state.todos);

  const handleRemove = (id) => {};

  return (
    <div>
      <h1>Todos</h1>
      {todos.map((todo) => (
        <div key={todo.id}>
          <h3>{todo.title}</h3>
          <button
            onClick={() => {
              handleRemove(todo.id);
            }}
          >
            Remove
          </button>
        </div>
      ))}
    </div>
  );
};

export default Todos;

Now we have empty handleRemove for every to-do registered with the to-do id.

Let's create a reducer function to remove todo from the store's state.

src/store/todos.js

import { createSlice } from "@reduxjs/toolkit";

const todosSlice = createSlice({
  name: "todos",
  initialState: {
    todos: [
      { id: "1", title: "first todo", completed: false },
      { id: "2", title: "second todo", completed: false },
    ],
  },
  reducers: {
    remove(state, action) {
      state.todos = state.todos.filter((todo) => todo.id !== action.payload);
    },
  },
});

export default todosSlice.reducer;

Methods inside the reducers object will have two parameters. First will be the current state and the second will be the action with a payload. When we call this reducer we can provide arguments as payload with it.

To call this method we need action for the remove method so that we can dispatch the action. Slices will automatically create actions for us that we can export and use.

src/store/todos.js

import { createSlice } from "@reduxjs/toolkit";

const todosSlice = createSlice({
  name: "todos",
  initialState: {
    todos: [
      { id: "1", title: "first todo", completed: false },
      { id: "2", title: "second todo", completed: false },
    ],
  },
  reducers: {
    remove(state, action) {
      console.log(action);
      state.todos = state.todos.filter((todo) => todo.id !== action.payload);
    },
  },
});

export const todosActions = todosSlice.actions;
export default todosSlice.reducer;

Now we have exported the actions which can be dispatched from anywhere. Let's dispatch the action inside our handleRemove function.

src/components/Todos.jsx

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { todosActions } from "../store/todos";

const Todos = () => {
  const { todos } = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  const handleRemove = (id) => {
    dispatch(todosActions.remove(id));
  };

  return (
    <div>
      <h1>Todos</h1>
      {todos.map((todo) => (
        <div key={todo.id}>
          <h3>{todo.title}</h3>
          <button
            onClick={() => {
              handleRemove(todo.id);
            }}
          >
            Remove
          </button>
        </div>
      ))}
    </div>
  );
};

export default Todos;

First, we have to import useDispatch hook from react-redux .useDispatch hook returns a function to which we have to specify an action with the payload.

Hurray!! Our application can remove todos 😄.

Now to add some asynchronous code let's fetch todos from API. We cannot add async functions inside of the reducers object. We have to define our asynchronous function and create our reducer logic. To create an async function we can use createAsyncThunk function. We can pass an async function to this method and return a promise. The createAsyncThunk will create lifecycle methods for the state slice.

src/store/todos.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const getTodos = createAsyncThunk("todos/getTodos", async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos");
  const todos = await response.json();
  return todos;
});

const todosSlice = createSlice({
  name: "todos",
  initialState: {
    loading: false,
    todos: [
      { id: "1", title: "first todo", completed: false },
      { id: "2", title: "second todo", completed: false },
    ],
    error: null,
  },
  reducers: {
    remove(state, action) {
      console.log(action);
      state.todos = state.todos.filter((todo) => todo.id !== action.payload);
    },
  },
  extraReducers: {
    [getTodos.pending]:(state, action) => {
      state.loading = true;
    },
    [getTodos.fulfilled]:(state, action) => {
      state.todos = action.payload;
      state.loading = false;
      state.error = null;
    },
    [getTodos.rejected]:(state, action) => {
      state.loading = false;
      state.error = "something went wrong";
    },
  },
});

export const todosActions = todosSlice.actions;
export default todosSlice.reducer;

We have created the getTodos function which uses createAsyncThunk . The first argument requires the function name prefixed with the slice name. The second argument is an async function which should return a promise. This function doesn't create a reducer for us. We have to handle the reducer and lifecycle logic inside extraReducers property.

There are some extra initial state properties added (loading and error). The getTodos function is also exported and we can directly dispatch this method.

src/components/Todos.jsx

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getTodos, todosActions } from "../store/todos";

const Todos = () => {
  const { todos, loading, error } = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  const handleRemove = (id) => {
    dispatch(todosActions.remove(id));
  };

  useEffect(() => {
    dispatch(getTodos());
  }, [dispatch]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!loading && error) {
    return (
      <div>
        <h1>Error</h1>
        <p>{error}</p>
      </div>
    );
  }

  return (
    <div>
      <h1>Todos</h1>
      {todos.map((todo) => (
        <div key={todo.id}>
          <h3>{todo.title}</h3>
          <button
            onClick={() => {
              handleRemove(todo.id);
            }}
          >
            Remove
          </button>
        </div>
      ))}
    </div>
  );
};

export default Todos;

We just have to dispatch the getTodos method in Todos.jsx

With that, we finished our application which is using the redux and redux toolkit 💥