Introduction

Hey everyone, we will create an awesome Kanban board using dnd-kit in this post.

We will use the next.js starter with tailwindcss as a code starter for our Kanban board.

prerequisite -

• containers : a container is a board of Kanban board that will contain the Items or tasks of the Kanban board

• Items : these are the items that will be dragged between the containers or board of Kanban.

so, let's get started with our app

In your terminal run these commands and install tailwindcss -

npx create-next-app my-project
cd my-project

Install dnd-kit

once we have our nextjs starter with tailwindcss ready we are going to install the following packages.

• @dnd-kit/core : this is the core library for handling our sorting and dragging.

• @dndkit-sortable : this package is the extension to the dnd-kit which will help us in sorting the containers and items

• uuid: this library is going to handle our unique ID generation.

okay so now we have all the packages that we need installed in our app.

Layout setup-

Now, let's set up our base setup where we will be adding our Kanban board.

pages/index.tsx -

import { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

// DnD
import {
  DndContext,
  DragEndEvent,
  DragMoveEvent,
  DragOverlay,
  DragStartEvent,
  KeyboardSensor,
  PointerSensor,
  UniqueIdentifier,
  closestCorners,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import {
  SortableContext,
  arrayMove,
  sortableKeyboardCoordinates,
} from '@dnd-kit/sortable';

export default function Home() {
  return (
    <div className="mx-auto max-w-7xl py-10">
      <div className="flex items-center justify-between gap-y-2">
        <h1 className="text-gray-800 text-3xl font-bold">Dnd-kit Guide</h1>
      </div>
      <div className="mt-10">
        <div className="grid grid-cols-3 gap-6">
        </div>
      </div>
    </div>
  );
}

After adding our base layout we will have something like this on the screen -

State and types setup

Okay, so the next thing that we need to do is to add all the states that we need in the app and also define the type for our containers

DnDType (Container / Board Type) :

import { UniqueIdentifier } from '@dnd-kit/core';

type DNDType = {
  id: UniqueIdentifier; // Unique Id for Containers
  title: string;
  items: {
    id: UniqueIdentifier; // Unique Id for Items
    title: string;
  }[];
};

we have the type of our container which is going to hold all of our items of the kanban board.

now let's define the react states that we need in the app.

  const [containers, setContainers] = useState<DNDType[]>([]);
  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
  const [currentContainerId, setCurrentContainerId] =
    useState<UniqueIdentifier>();
  const [containerName, setContainerName] = useState('');
  const [itemName, setItemName] = useState('');
  const [showAddContainerModal, setShowAddContainerModal] = useState(false);
  const [showAddItemModal, setShowAddItemModal] = useState(false);

• containers - This state will keep track of all the containers that we are going to add to the Kanban board with items inside it.

• activeId - It is going to be used to track the current selected or dragging element Id, which we will use later when we are rendering DragOverlay

• currentContainerId - We are going to use this container ID when we are adding a new Item to a container.

• itemName & containerName - these states will be used in our controlled Input which will give us the name of the container and item that we are going to create.

• showAddContainerModal & showAddItemModal - these states will be used to render the modal of container and item.

DndContext Setup -

Okay so now let's add DndContext to our app which will hold all of our SortableContext.

DndContext : In order for your Droppable and Draggable components to interact with each other, you'll need to make sure that the part of your React tree that uses them is nested within a parent <DndContext> component. The <DndContext> provider makes use of the React Context API to share data between draggable and droppable components and hooks.

SortableContext : The SortableContext provides information via context that is consumed by the useSortable hook

So now that we know what the use of these react components let's add those to our app.

import { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

// DnD
import {
  DndContext,
  DragEndEvent,
  DragMoveEvent,
  DragOverlay,
  DragStartEvent,
  KeyboardSensor,
  PointerSensor,
  UniqueIdentifier,
  closestCorners,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import {
  SortableContext,
  arrayMove,
  sortableKeyboardCoordinates,
} from '@dnd-kit/sortable';
import Container from '@/components/Container';
import Items from '@/components/Item';

export default function Home() {
  type DNDType = {
    id: UniqueIdentifier; // Unique Id for Containers
    title: string;
    items: {
      id: UniqueIdentifier; // Unique Id for Items
      title: string;
    }[];
  };

  const [containers, setContainers] = useState<DNDType[]>([]);
  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
  const [currentContainerId, setCurrentContainerId] =
    useState<UniqueIdentifier>();
  const [containerName, setContainerName] = useState('');
  const [itemName, setItemName] = useState('');
  const [showAddContainerModal, setShowAddContainerModal] = useState(false);
  // Dnd Handlers
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );

  const handleDragStart = (event: DragStartEvent) => {};
  const handleDragMove = (event: DragMoveEvent) => {};
  const handleDragEnd = (event: DragEndEvent) => {};
  return (
    <div className="mx-auto max-w-7xl py-10">
      <div className="flex items-center justify-between gap-y-2">
        <h1 className="text-gray-800 text-3xl font-bold">Dnd-kit Guide</h1>
      </div>
      <div className="mt-10">
        <div className="grid grid-cols-3 gap-6">
          <DndContext
            sensors={sensors}
            collisionDetection={closestCorners}
            onDragStart={handleDragStart}
            onDragMove={handleDragMove}
            onDragEnd={handleDragEnd}
          >
            <SortableContext items={containers.map((i) => i.id)}>
              {containers.map((container) => (
                <Container
                  id={container.id}
                  title={container.title}
                  key={container.id}
                  onAddItem={() => {}}
                >
                  <SortableContext items={container.items.map((i) => i.id)}>
                    <div className="flex items-start flex-col gap-y-4">
                      {container.items.map((i) => (
                        <Items title={i.title} id={i.id} key={i.id} />
                      ))}
                    </div>
                  </SortableContext>
                </Container>
              ))}
            </SortableContext>
          </DndContext>
        </div>
      </div>
    </div>
  );
}

Container -

We are going to useSortable hook, which will give us attributes, setNodeRef, listerners, transform, transition , isDragging which we will use these properties in our component to make the component behave like a draggable and droppable element.

import React from 'react';
import ContainerProps from './container.type';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import clsx from 'clsx';
import { Button } from '../Button';

const Container = ({
  id,
  children,
  title,
  description,
  onAddItem,
}: ContainerProps) => {
  const {
    attributes,
    setNodeRef,
    listeners,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: id,
    data: {
      type: 'container',
    },
  });
  return (
    <div
      {...attributes}
      ref={setNodeRef}
      style={{
        transition,
        transform: CSS.Translate.toString(transform),
      }}
      className={clsx(
        'w-full h-full p-4 bg-gray-50 rounded-xl flex flex-col gap-y-4',
        isDragging && 'opacity-50',
      )}
    >
      <div className="flex items-center justify-between">
        <div className="flex flex-col gap-y-1">
          <h1 className="text-gray-800 text-xl">{title}</h1>
          <p className="text-gray-400 text-sm">{description}</p>
        </div>
        <button
          className="border p-2 text-xs rounded-xl shadow-lg hover:shadow-xl"
          {...listeners}
        >
          Drag Handle
        </button>
      </div>

      {children}
      <Button variant="ghost" onClick={onAddItem}>
        Add Item
      </Button>
    </div>
  );
};

export default Container;

Item-

It will be similar to a container that we will be using useSortable because we are going to drag and drop these in the container or board.

import { UniqueIdentifier } from '@dnd-kit/core';
import { useSortable } from '@dnd-kit/sortable';
import React from 'react';
import { CSS } from '@dnd-kit/utilities';
import clsx from 'clsx';

type ItemsType = {
  id: UniqueIdentifier;
  title: string;
};

const Items = ({ id, title }: ItemsType) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: id,
    data: {
      type: 'item',
    },
  });
  return (
    <div
      ref={setNodeRef}
      {...attributes}
      style={{
        transition,
        transform: CSS.Translate.toString(transform),
      }}
      className={clsx(
        'px-2 py-4 bg-white shadow-md rounded-xl w-full border border-transparent hover:border-gray-200 cursor-pointer',
        isDragging && 'opacity-50',
      )}
    >
      <div className="flex items-center justify-between">
        {title}
        <button
          className="border p-2 text-xs rounded-xl shadow-lg hover:shadow-xl"
          {...listeners}
        >
          Drag Handle
        </button>
      </div>
    </div>
  );
};

export default Items;

Ok so now we have all the things that we need ready for sorting,

let's implement the DndContext handlers to bring our kanban board to life.

Handle Drag Start-

In this function, we are going to extract the active element and then set the active ID state.

  function handleDragStart(event: DragStartEvent) {
    const { active } = event;
    const { id } = active;
    setActiveId(id);
  }

Handle Drag Move -

• In this, we are going to extract the active and over item from the event.

• there are going to be two types of scenarios we need to handle

  • Sorting between Items - In this, we are going to handle the sorting between the items and check both the active and over element are items and then swap those items to their respective positions.

  • Sorting between active Item and over container - when we have the active element to be an Item we are dragging that over an empty container.

  const handleDragMove = (event: DragMoveEvent) => {
    const { active, over } = event;

    // Handle Items Sorting
    if (
      active.id.toString().includes('item') &&
      over?.id.toString().includes('item') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the active container and over container
      const activeContainer = findValueOfItems(active.id, 'item');
      const overContainer = findValueOfItems(over.id, 'item');

      // If the active or over container is not found, return
      if (!activeContainer || !overContainer) return;

      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === activeContainer.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === overContainer.id,
      );

      // Find the index of the active and over item
      const activeitemIndex = activeContainer.items.findIndex(
        (item) => item.id === active.id,
      );
      const overitemIndex = overContainer.items.findIndex(
        (item) => item.id === over.id,
      );
      // In the same container
      if (activeContainerIndex === overContainerIndex) {
        let newItems = [...containers];
        newItems[activeContainerIndex].items = arrayMove(
          newItems[activeContainerIndex].items,
          activeitemIndex,
          overitemIndex,
        );

        setContainers(newItems);
      } else {
        // In different containers
        let newItems = [...containers];
        const [removeditem] = newItems[activeContainerIndex].items.splice(
          activeitemIndex,
          1,
        );
        newItems[overContainerIndex].items.splice(
          overitemIndex,
          0,
          removeditem,
        );
        setContainers(newItems);
      }
    }

    // Handling Item Drop Into a Container
    if (
      active.id.toString().includes('item') &&
      over?.id.toString().includes('container') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the active and over container
      const activeContainer = findValueOfItems(active.id, 'item');
      const overContainer = findValueOfItems(over.id, 'container');

      // If the active or over container is not found, return
      if (!activeContainer || !overContainer) return;

      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === activeContainer.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === overContainer.id,
      );

      // Find the index of the active and over item
      const activeitemIndex = activeContainer.items.findIndex(
        (item) => item.id === active.id,
      );

      // Remove the active item from the active container and add it to the over container
      let newItems = [...containers];
      const [removeditem] = newItems[activeContainerIndex].items.splice(
        activeitemIndex,
        1,
      );
      newItems[overContainerIndex].items.push(removeditem);
      setContainers(newItems);
    }
  };

Handle Drag End -

this function is going to be similar to handleDragMove but in this function, we are also going to handle the scenarios in which we are sorting the containers.

function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;

    // Handling Container Sorting
    if (
      active.id.toString().includes('container') &&
      over?.id.toString().includes('container') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === active.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === over.id,
      );
      // Swap the active and over container
      let newItems = [...containers];
      newItems = arrayMove(newItems, activeContainerIndex, overContainerIndex);
      setContainers(newItems);
    }

    // Handling item Sorting
    if (
      active.id.toString().includes('item') &&
      over?.id.toString().includes('item') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the active and over container
      const activeContainer = findValueOfItems(active.id, 'item');
      const overContainer = findValueOfItems(over.id, 'item');

      // If the active or over container is not found, return
      if (!activeContainer || !overContainer) return;
      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === activeContainer.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === overContainer.id,
      );
      // Find the index of the active and over item
      const activeitemIndex = activeContainer.items.findIndex(
        (item) => item.id === active.id,
      );
      const overitemIndex = overContainer.items.findIndex(
        (item) => item.id === over.id,
      );

      // In the same container
      if (activeContainerIndex === overContainerIndex) {
        let newItems = [...containers];
        newItems[activeContainerIndex].items = arrayMove(
          newItems[activeContainerIndex].items,
          activeitemIndex,
          overitemIndex,
        );
        setContainers(newItems);
      } else {
        // In different containers
        let newItems = [...containers];
        const [removeditem] = newItems[activeContainerIndex].items.splice(
          activeitemIndex,
          1,
        );
        newItems[overContainerIndex].items.splice(
          overitemIndex,
          0,
          removeditem,
        );
        setContainers(newItems);
      }
    }
    // Handling item dropping into Container
    if (
      active.id.toString().includes('item') &&
      over?.id.toString().includes('container') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the active and over container
      const activeContainer = findValueOfItems(active.id, 'item');
      const overContainer = findValueOfItems(over.id, 'container');

      // If the active or over container is not found, return
      if (!activeContainer || !overContainer) return;
      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === activeContainer.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === overContainer.id,
      );
      // Find the index of the active and over item
      const activeitemIndex = activeContainer.items.findIndex(
        (item) => item.id === active.id,
      );

      let newItems = [...containers];
      const [removeditem] = newItems[activeContainerIndex].items.splice(
        activeitemIndex,
        1,
      );
      newItems[overContainerIndex].items.push(removeditem);
      setContainers(newItems);
    }
    setActiveId(null);
  }

Now let's add some dummy content to our containers state and see if we can sort items and containers.

  const [containers, setContainers] = useState<DNDType[]>([
    {
      id: `container-${uuidv4()}`,
      title: 'Container 1',
      items: [
        {
          id: `item-${uuidv4()}`,
          title: 'Item 1',
        },
      ],
    },
    {
      id: `container-${uuidv4()}`,
      title: 'Container 2',
      items: [
        {
          id: `item-${uuidv4()}`,
          title: 'Item 2',
        },
      ],
    },
  ]);

Now, we can sort the items and containers.

Add Container Modal -

Now that we have core functionality working for our Kanban board let's add the ability to add a container.

• First, we are going to add a button to add a container

• When we click that button we are going to open a modal and let the user enter the name for the container and then append that container to our container's state.

  const onAddContainer = () => {
    if (!containerName) return;
    const id = `container-${uuidv4()}`;
    setContainers([
      ...containers,
      {
        id,
        title: containerName,
        items: [],
      },
    ]);
    setContainerName('');
    setShowAddContainerModal(false);
  };

Add Item Modal

After adding the functionality of creating a container, we can similarly add the functionality to create an item in a particular container using currentContainerId state.

const onAddItem = () => {
    if (!itemName) return;
    const id = `item-${uuidv4()}`;
    const container = containers.find((item) => item.id === currentContainerId);
    if (!container) return;
    container.items.push({
      id,
      title: itemName,
    });
    setContainers([...containers]);
    setItemName('');
    setShowAddItemModal(false);
  };

Drag Overlay

At last, we need to add a drag overlay so that we can render a preview of the element we are dragging wither container or items.

 <DragOverlay adjustScale={false}>
              {/* Drag Overlay For item Item */}
              {activeId && activeId.toString().includes('item') && (
                <Items id={activeId} title={findItemTitle(activeId)} />
              )}
              {/* Drag Overlay For Container */}
              {activeId && activeId.toString().includes('container') && (
                <Container id={activeId} title={findContainerTitle(activeId)}>
                  {findContainerItems(activeId).map((i) => (
                    <Items key={i.id} title={i.title} id={i.id} />
                  ))}
                </Container>
              )}
            </DragOverlay>

Final Code -

import { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

// DnD
import {
  DndContext,
  DragEndEvent,
  DragMoveEvent,
  DragOverlay,
  DragStartEvent,
  KeyboardSensor,
  PointerSensor,
  UniqueIdentifier,
  closestCorners,
  useSensor,
  useSensors,
} from '@dnd-kit/core';
import {
  SortableContext,
  arrayMove,
  sortableKeyboardCoordinates,
} from '@dnd-kit/sortable';

import { Inter } from 'next/font/google';

// Components
import Container from '@/components/Container';
import Items from '@/components/Item';
import Modal from '@/components/Modal';
import Input from '@/components/Input';
import { Button } from '@/components/Button';

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

type DNDType = {
  id: UniqueIdentifier;
  title: string;
  items: {
    id: UniqueIdentifier;
    title: string;
  }[];
};

export default function Home() {
  const [containers, setContainers] = useState<DNDType[]>([]);
  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
  const [currentContainerId, setCurrentContainerId] =
    useState<UniqueIdentifier>();
  const [containerName, setContainerName] = useState('');
  const [itemName, setItemName] = useState('');
  const [showAddContainerModal, setShowAddContainerModal] = useState(false);
  const [showAddItemModal, setShowAddItemModal] = useState(false);

  const onAddContainer = () => {
    if (!containerName) return;
    const id = `container-${uuidv4()}`;
    setContainers([
      ...containers,
      {
        id,
        title: containerName,
        items: [],
      },
    ]);
    setContainerName('');
    setShowAddContainerModal(false);
  };

  const onAddItem = () => {
    if (!itemName) return;
    const id = `item-${uuidv4()}`;
    const container = containers.find((item) => item.id === currentContainerId);
    if (!container) return;
    container.items.push({
      id,
      title: itemName,
    });
    setContainers([...containers]);
    setItemName('');
    setShowAddItemModal(false);
  };

  // Find the value of the items
  function findValueOfItems(id: UniqueIdentifier | undefined, type: string) {
    if (type === 'container') {
      return containers.find((item) => item.id === id);
    }
    if (type === 'item') {
      return containers.find((container) =>
        container.items.find((item) => item.id === id),
      );
    }
  }

  const findItemTitle = (id: UniqueIdentifier | undefined) => {
    const container = findValueOfItems(id, 'item');
    if (!container) return '';
    const item = container.items.find((item) => item.id === id);
    if (!item) return '';
    return item.title;
  };

  const findContainerTitle = (id: UniqueIdentifier | undefined) => {
    const container = findValueOfItems(id, 'container');
    if (!container) return '';
    return container.title;
  };

  const findContainerItems = (id: UniqueIdentifier | undefined) => {
    const container = findValueOfItems(id, 'container');
    if (!container) return [];
    return container.items;
  };

  // DND Handlers
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );

  function handleDragStart(event: DragStartEvent) {
    const { active } = event;
    const { id } = active;
    setActiveId(id);
  }

  const handleDragMove = (event: DragMoveEvent) => {
    const { active, over } = event;

    // Handle Items Sorting
    if (
      active.id.toString().includes('item') &&
      over?.id.toString().includes('item') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the active container and over container
      const activeContainer = findValueOfItems(active.id, 'item');
      const overContainer = findValueOfItems(over.id, 'item');

      // If the active or over container is not found, return
      if (!activeContainer || !overContainer) return;

      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === activeContainer.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === overContainer.id,
      );

      // Find the index of the active and over item
      const activeitemIndex = activeContainer.items.findIndex(
        (item) => item.id === active.id,
      );
      const overitemIndex = overContainer.items.findIndex(
        (item) => item.id === over.id,
      );
      // In the same container
      if (activeContainerIndex === overContainerIndex) {
        let newItems = [...containers];
        newItems[activeContainerIndex].items = arrayMove(
          newItems[activeContainerIndex].items,
          activeitemIndex,
          overitemIndex,
        );

        setContainers(newItems);
      } else {
        // In different containers
        let newItems = [...containers];
        const [removeditem] = newItems[activeContainerIndex].items.splice(
          activeitemIndex,
          1,
        );
        newItems[overContainerIndex].items.splice(
          overitemIndex,
          0,
          removeditem,
        );
        setContainers(newItems);
      }
    }

    // Handling Item Drop Into a Container
    if (
      active.id.toString().includes('item') &&
      over?.id.toString().includes('container') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the active and over container
      const activeContainer = findValueOfItems(active.id, 'item');
      const overContainer = findValueOfItems(over.id, 'container');

      // If the active or over container is not found, return
      if (!activeContainer || !overContainer) return;

      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === activeContainer.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === overContainer.id,
      );

      // Find the index of the active and over item
      const activeitemIndex = activeContainer.items.findIndex(
        (item) => item.id === active.id,
      );

      // Remove the active item from the active container and add it to the over container
      let newItems = [...containers];
      const [removeditem] = newItems[activeContainerIndex].items.splice(
        activeitemIndex,
        1,
      );
      newItems[overContainerIndex].items.push(removeditem);
      setContainers(newItems);
    }
  };

  // This is the function that handles the sorting of the containers and items when the user is done dragging.
  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;

    // Handling Container Sorting
    if (
      active.id.toString().includes('container') &&
      over?.id.toString().includes('container') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === active.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === over.id,
      );
      // Swap the active and over container
      let newItems = [...containers];
      newItems = arrayMove(newItems, activeContainerIndex, overContainerIndex);
      setContainers(newItems);
    }

    // Handling item Sorting
    if (
      active.id.toString().includes('item') &&
      over?.id.toString().includes('item') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the active and over container
      const activeContainer = findValueOfItems(active.id, 'item');
      const overContainer = findValueOfItems(over.id, 'item');

      // If the active or over container is not found, return
      if (!activeContainer || !overContainer) return;
      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === activeContainer.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === overContainer.id,
      );
      // Find the index of the active and over item
      const activeitemIndex = activeContainer.items.findIndex(
        (item) => item.id === active.id,
      );
      const overitemIndex = overContainer.items.findIndex(
        (item) => item.id === over.id,
      );

      // In the same container
      if (activeContainerIndex === overContainerIndex) {
        let newItems = [...containers];
        newItems[activeContainerIndex].items = arrayMove(
          newItems[activeContainerIndex].items,
          activeitemIndex,
          overitemIndex,
        );
        setContainers(newItems);
      } else {
        // In different containers
        let newItems = [...containers];
        const [removeditem] = newItems[activeContainerIndex].items.splice(
          activeitemIndex,
          1,
        );
        newItems[overContainerIndex].items.splice(
          overitemIndex,
          0,
          removeditem,
        );
        setContainers(newItems);
      }
    }
    // Handling item dropping into Container
    if (
      active.id.toString().includes('item') &&
      over?.id.toString().includes('container') &&
      active &&
      over &&
      active.id !== over.id
    ) {
      // Find the active and over container
      const activeContainer = findValueOfItems(active.id, 'item');
      const overContainer = findValueOfItems(over.id, 'container');

      // If the active or over container is not found, return
      if (!activeContainer || !overContainer) return;
      // Find the index of the active and over container
      const activeContainerIndex = containers.findIndex(
        (container) => container.id === activeContainer.id,
      );
      const overContainerIndex = containers.findIndex(
        (container) => container.id === overContainer.id,
      );
      // Find the index of the active and over item
      const activeitemIndex = activeContainer.items.findIndex(
        (item) => item.id === active.id,
      );

      let newItems = [...containers];
      const [removeditem] = newItems[activeContainerIndex].items.splice(
        activeitemIndex,
        1,
      );
      newItems[overContainerIndex].items.push(removeditem);
      setContainers(newItems);
    }
    setActiveId(null);
  }

  return (
    <div className="mx-auto max-w-7xl py-10">
      {/* Add Container Modal */}
      <Modal
        showModal={showAddContainerModal}
        setShowModal={setShowAddContainerModal}
      >
        <div className="flex flex-col w-full items-start gap-y-4">
          <h1 className="text-gray-800 text-3xl font-bold">Add Container</h1>
          <Input
            type="text"
            placeholder="Container Title"
            name="containername"
            value={containerName}
            onChange={(e) => setContainerName(e.target.value)}
          />
          <Button onClick={onAddContainer}>Add container</Button>
        </div>
      </Modal>
      {/* Add Item Modal */}
      <Modal showModal={showAddItemModal} setShowModal={setShowAddItemModal}>
        <div className="flex flex-col w-full items-start gap-y-4">
          <h1 className="text-gray-800 text-3xl font-bold">Add Item</h1>
          <Input
            type="text"
            placeholder="Item Title"
            name="itemname"
            value={itemName}
            onChange={(e) => setItemName(e.target.value)}
          />
          <Button onClick={onAddItem}>Add Item</Button>
        </div>
      </Modal>
      <div className="flex items-center justify-between gap-y-2">
        <h1 className="text-gray-800 text-3xl font-bold">Dnd-kit Guide</h1>
        <Button onClick={() => setShowAddContainerModal(true)}>
          Add Container
        </Button>
      </div>
      <div className="mt-10">
        <div className="grid grid-cols-3 gap-6">
          <DndContext
            sensors={sensors}
            collisionDetection={closestCorners}
            onDragStart={handleDragStart}
            onDragMove={handleDragMove}
            onDragEnd={handleDragEnd}
          >
            <SortableContext items={containers.map((i) => i.id)}>
              {containers.map((container) => (
                <Container
                  id={container.id}
                  title={container.title}
                  key={container.id}
                  onAddItem={() => {
                    setShowAddItemModal(true);
                    setCurrentContainerId(container.id);
                  }}
                >
                  <SortableContext items={container.items.map((i) => i.id)}>
                    <div className="flex items-start flex-col gap-y-4">
                      {container.items.map((i) => (
                        <Items title={i.title} id={i.id} key={i.id} />
                      ))}
                    </div>
                  </SortableContext>
                </Container>
              ))}
            </SortableContext>
            <DragOverlay adjustScale={false}>
              {/* Drag Overlay For item Item */}
              {activeId && activeId.toString().includes('item') && (
                <Items id={activeId} title={findItemTitle(activeId)} />
              )}
              {/* Drag Overlay For Container */}
              {activeId && activeId.toString().includes('container') && (
                <Container id={activeId} title={findContainerTitle(activeId)}>
                  {findContainerItems(activeId).map((i) => (
                    <Items key={i.id} title={i.title} id={i.id} />
                  ))}
                </Container>
              )}
            </DragOverlay>
          </DndContext>
        </div>
      </div>
    </div>
  );
}

Github - https://github.com/chetanverma16/dndkit-guide

Conclusion

That's all I have for you! Hopefully, you learned something new.

If you enjoyed this article, give it a ❤️ so others can find it too.

For more such content, stay in touch on Twitter

Contact Me:

Portfolio | Github | LinkedIn | Twitter

Hey everyone in this tutorial we will create an awesome animated dropdown menu using chakra-UI and framer-motion.

we will be using next.js in this tutorial but you are free to use it on any react project.

so to get started let's set up our initial repository.

in your terminal run these commands

npx create-next-app my-project
cd my-project

so once we are done with the next.js app setup.

let's go to pages/_app.js and wrap the whole app with ChakraProvider .

import '@/styles/globals.css';
import { ChakraProvider } from '@chakra-ui/react';

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

Now,
Let's create a new folder in the root of our repository and let's call it components.

under components let's create three subfolders - Menu, MotionBox, and MotionText
so let's start with Menu the component that is gonna be the parent component of our awesome menu.

Menu -

Menu/index.js

import React, { createContext, useContext, useState } from 'react';
import { Box, Flex } from '@chakra-ui/react';
import MotionBox from '../MotionBox';
import MotionText from '../MotionText';

// Framer Motion transition Property
const transition = {
  type: 'spring',
  mass: 0.5,
  damping: 11.5,
  stiffness: 100,
  restDelta: 0.001,
  restSpeed: 0.001,
};

const MenuContext = createContext(null);

const useMenu = () => useContext(MenuContext);

export const Menu = ({ children }) => {
  const [activeItem, setActiveItem] = useState(null);

  return (
    <MenuContext.Provider value={{ activeItem, setActiveItem }}>
      <Flex
        as="nav"
        display="inline-flex"
        p={8}
        gap={8}
        onMouseLeave={() => setActiveItem(null)}
      >
        {children}
      </Flex>
    </MenuContext.Provider>
  );
};

about Menu Component -

• It has a state which is activeItem, which will help us in determining and setting the currently active item which is hovered over.

• we are using useContext hook to create a MenuContext which will help us in passing our state to other components.

• we are wrapping the children of our component with Flex provided by chakra so that we can align the items in line.

now let's create another component in Menu/index.js which is gonna be MenuItem

Menu Item -

MenuItem

import React, { createContext, useContext, useState } from 'react';
import { Box, Flex } from '@chakra-ui/react';
import MotionBox from '../MotionBox';
import MotionText from '../MotionText';

const transition = {
  type: 'spring',
  mass: 0.5,
  damping: 11.5,
  stiffness: 100,
  restDelta: 0.001,
  restSpeed: 0.001,
};

const MenuContext = createContext(null);

const useMenu = () => useContext(MenuContext);

export const MenuItem = ({ item, children }) => {
  const menu = useMenu();
  return (
    <Box
      pos="relative"
      color="white"
      onMouseEnter={() => {
        menu.setActiveItem(item);
      }}
    >
      <MotionText
        color="rgba(0,0,0, 0.5)"
        animate={{
          color:
            menu.activeItem === item ? 'rgba(0,0,0, 1)' : 'rgba(0,0,0, 0.5)',
        }}
        transition={{ duration: 0.25 }}
        cursor="pointer"
      >
        {item}
      </MotionText>
      {menu.activeItem !== null && (
        <MotionBox
          initial={{ opacity: 0, scale: 0.85 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={transition}
        >
          {menu.activeItem === item && (
            <Box
              pos="absolute"
              top="calc(100% + 1rem)"
              left="50%"
              transform="translateX(-50%)"
            >
              <MotionBox
                layoutId="active"
                bg="gray.200"
                rounded="2xl"
                overflow="hidden"
                borderWidth="1px"
                borderColor="whiteAlpha.200"
                transition={transition}
              >
                <MotionBox layout w="max-content" h="100%" p={4}>
                  {children}
                </MotionBox>
              </MotionBox>
            </Box>
          )}
        </MotionBox>
      )}
    </Box>
  );
};

export const Menu = ({ children }) => {
  const [activeItem, setActiveItem] = useState(null);

  return (
    <MenuContext.Provider value={{ activeItem, setActiveItem }}>
      <Flex
        as="nav"
        display="inline-flex"
        p={8}
        gap={8}
        onMouseLeave={() => setActiveItem(null)}
      >
        {children}
      </Flex>
    </MenuContext.Provider>
  );
};

about MenuItem -

• as the name suggests MenuItem will be used as an individual item on our menu.

• it takes in two props item, children.

• item prop is used to set up the currently active item based on which we will show our children and also as the title for our dropdown menu.

now that we have our basic structure added let's add some animation using framer-motion

Motion Box -

import { motion, isValidMotionProp } from 'framer-motion';
import { forwardRef, chakra } from '@chakra-ui/react';

const MotionBox = motion(
  forwardRef((props, ref) => {
    const chakraProps = Object.fromEntries(
      Object.entries(props).filter(([key]) => !isValidMotionProp(key)),
    );
    return <chakra.div ref={ref} {...chakraProps} />;
  }),
);

export default MotionBox;

• MotionBox is used to animate the div or children, it is using forwardRef from React to forward the ref to our chakra.div and we are also wrapping the whole component under motion so that we can provide framer-motion properties to it.

• we are also checking if the properties are valid or not using the utility function isValidMotionProp provided by framer-motion.

Now that we have our animation wrapper for our div let's create the animation wrapper for our text.

MotionText

import { motion } from 'framer-motion';
import { Text } from '@chakra-ui/react';

const MotionText = motion(Text);

export default MotionText;

ok so now that we have all of our components ready to go let's create our awesome navigation menu.

go to pages/index.js and create your menu using the components.

import React from 'react';
import { Stack, Text, Center, Link, HStack, Img } from '@chakra-ui/react';
import { Menu, MenuItem } from '@/components/Menu';

function App() {
  return (
    <div>
      <Center>
        <Menu>
          <MenuItem item="Title One">
            <HStack spacing={5} alignItems="start">
              <Stack spacing={1}>
                <Text color="gray.800" fontWeight={600}>
                  Heading
                </Text>
                <Link color="gray.600">Link One</Link>
                <Link color="gray.600">Link Two</Link>
                <Link color="gray.600">Link Three</Link>
                <Link color="gray.600">Link Four</Link>
              </Stack>
              <Stack spacing={2}>
                <Text color="gray.800" fontWeight={600}>
                  Showcase
                </Text>
                <Img
                  h="6.4rem"
                  w="8rem"
                  bg="whiteAlpha.50"
                  src="/secondary.avif"
                  objectFit="cover"
                  rounded="xl"
                  cursor="pointer"
                  alt="Beverage Can"
                />
              </Stack>
            </HStack>
          </MenuItem>
          <MenuItem item="Title Two">
            <Stack spacing={1}>
              <Link color="gray.600">Link One</Link>
              <Link color="gray.600">Link Two</Link>
              <Link color="gray.600">Link Three</Link>
              <Link color="gray.600">Link Four</Link>
            </Stack>
          </MenuItem>
          <MenuItem item="Title Three">
            <Stack spacing={1}>
              <Link color="gray.600">Link One</Link>
              <Link color="gray.600">Link Two</Link>
              <Link color="gray.600">Link Three</Link>
              <Link color="gray.600">Link Four</Link>
            </Stack>
          </MenuItem>
        </Menu>
      </Center>
    </div>
  );
}

export default App;

Conclusion

That's all I have for you! Hopefully, you learned something new.

If you enjoyed this article, give it a ❤️ so others can find it too.

For more such content, stay in touch.

Contact Me:

Portfolio | Github | LinkedIn | Twitter

Introduction

Hey everyone, in this post we will create a blob with react three fiber.

In this blog, we will use Next.js but you can follow this for any React Project.

So to get started with that we need to set up a Next.js app with React Three Fiber.

in your terminal run these commands -

npx create-next-app my-project
cd my-project

So once we have our next app ready.

we are going to add some bare-bone styles to it.

therefore, go to your styles/globals.css and add the CSS properties.

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  height: 100vh;
  width: 100vw;
}

Now that we have our basic styling done let's go to our pages/index.js and add Canvas with camera attribute and set it to [0.0,0.0,8.0].

pages/index.js

import { Canvas } from "@react-three/fiber";
import Blob from "../components/Blob";

export default function Home() {
  return (
    <div className="container">
      <Canvas camera={{ position: [0.0, 0.0, 8.0] }}>

      </Canvas>
    </div>
  );
}

Now that we have our canvas ready we can now add our blob to it.

Creating Blob Mesh

Before Creating Our Mesh Let's Understand what meshes are in threejs or react-three-fiber

Mesh - a mesh is a 3D Object which is made up of Geometry and Material

Therefore,

Mesh - Geometry + Material

• Geometry is what defines the shape of the Mesh.

• The Material defines how the object looks and also what gives it some specific properties like reflection, metalness, roughness, etc.

Now that we know what are meshes let's create one.

so go to your src and create a new folder called components

and under components folder, we are going to create our Blob folder which will contain all the files related to it.

components/Blob/index.js

import React, { useRef } from "react";
const Blob = () => {
// reference for mesh
  const mesh = useRef();

  return (
    <mesh
      ref={mesh}
      scale={1.5}
      position={[0, 0, 0]}
    >
// Mesh - Geometry + Material
// Geometry
      <icosahedronBufferGeometry args={[2, 20]} />
// Material
      <meshStandardMaterial />
    </mesh>
  );
};

export default Blob;

and let's add this back to our canvas.

    <Canvas camera={{ position: [0.0, 0.0, 8.0] }}>
        <Blob />
    </Canvas>

we will have our mesh look like this on the screen -

Yeah, it doesn't look like our blob yet for that we need to learn one more concept which is a shader.

What is a Shader -

A shader is a program, written in GLSL, that runs on the GPU. This program consists of two main functions that can output both 2D and 3D content:

and those two main functions are -

• Vertex Shader

• Fragment Shader

Let's learn about those ones by one, and then we will create our custom shader.

Vertex Shader -

The role of the vertex shader is to position each vertex of a geometry.
In simpler terms, this shader function allows you to programmatically alter the shape of your geometry and, potentially animate them.

Fragment Shader -

The role of the Fragment Shader is to set the color of each visible pixel of a geometry.

and when we combine vertex and fragment shader we get a totally new Material.

let's create our custom shader for our Blob

Creating Custom Shader

In our Blob component replace <meshStandardMaterial /> with <shaderMaterial/> , and pass in two functions vertexShader and fragmentShader this will create our custom shader material.

import React, { useMemo, useRef } from "react";
import vertexShader from "./vertexShader";
import fragmentShader from "./fragmentShader";

const Blob = () => {
  const mesh = useRef();

  return (
    <mesh
      ref={mesh}
      scale={1.5}
      position={[0, 0, 0]}
    >
      <icosahedronBufferGeometry args={[2, 20]} />
      <shaderMaterial
        vertexShader={vertexShader}
        fragmentShader={fragmentShader}
      />
    </mesh>
  );
};

export default Blob;

now let's add some GLSL to our shader.

now create a new file under components/Blob/vertexShader.js

vertexShader.js -

const vertexShader = `
uniform float u_intensity;
uniform float u_time;

varying vec2 vUv;
varying float vDisplacement

void main() {
      vUv = uv;
    vec3 newPosition = position + normal * vec3(u_intensity * sin(position.y * 10.0 + u_time));
    vDisplacement = sin(position.y * 10.0 + u_time);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
`;

export default vertexShader;

• you can see some variables defined with uniform and varying prefixes we will learn about those later in this post.

• this function runs for every vertex and sets a property called gl_Position that contains the x,y, and z coordinates of a given vertex on the screen.

Now we have our vertexShader function let's add fragmentShader function to complete our shaderMaterial.

fragmentShader.js

const fragmentShader = `
uniform float u_intensity;
uniform float u_time;

varying vec2 vUv;
varying float vDisplacement;

void main() {
    float distort = 2.0 * vDisplacement * u_intensity * sin(vUv.y * 10.0 + u_time);
// this defines our gradient
    vec3 color = vec3(abs(vUv - 0.5) * 2.0  * (1.0 - distort), 1.0);
    gl_FragColor = vec4(color, 1.0);
}

`;

export default fragmentShader;

• Similarly, here we have a uniform and varying variables.

• this function runs for each pixel and sets the color of that pixel and the variable which is responsible for that is gl_FragColor which is a vec4 .

after defining those let's see what we have on our screen.

Great, we have our blob with gradient .

now we just need to animate it and then we will have our Blob ready.

Let's do that.

Animating Our Blob.

To animate our Blob we need to understand what are uniforms and varying

Uniforms - To pass data from your Javascript code into your shader, we need to use uniforms. A uniform acts as an input to both vertex and fragment shader.

Varyings - A varying is a variable that can be declared and set in the vertex shader to be read by the fragment shader.

ok so now we know what are uniforms and varyings let's use this knowledge to animate our Blob.

so, in our Blob let's create a new memoized value using useMemo and name it uniforms and under that, we are going to add an object with the property u_time and u_intesity which we have already defined in our vertex and fragment shader functions.

  const uniforms = useMemo(() => {
    return {
      u_time: { value: 0 },
      u_intensity: { value: 0.3 },
    };
  });

and now let's pass our uniforms to our shaderMaterial

 <shaderMaterial
        vertexShader={vertexShader}
        fragmentShader={fragmentShader}
        uniforms={uniforms}
      />

Perlin Noise -

now we have our uniforms passed to our shaderMaterial, but to have an animation behave like an BLOB animation we need to use something called perlin noises .

let's add our perlin noise to our vertexShader

const vertexShader = `
uniform float u_intensity;
uniform float u_time;

varying vec2 vUv;
varying float vDisplacement;

// Classic Perlin 3D Noise 
// by Stefan Gustavson
//
vec4 permute(vec4 x) {
    return mod(((x*34.0)+1.0)*x, 289.0);
}

vec4 taylorInvSqrt(vec4 r) {
    return 1.79284291400159 - 0.85373472095314 * r;
}

vec3 fade(vec3 t) {
    return t*t*t*(t*(t*6.0-15.0)+10.0);
}

float cnoise(vec3 P) {
    vec3 Pi0 = floor(P); // Integer part for indexing
    vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
    Pi0 = mod(Pi0, 289.0);
    Pi1 = mod(Pi1, 289.0);
    vec3 Pf0 = fract(P); // Fractional part for interpolation
    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
    vec4 iy = vec4(Pi0.yy, Pi1.yy);
    vec4 iz0 = Pi0.zzzz;
    vec4 iz1 = Pi1.zzzz;

    vec4 ixy = permute(permute(ix) + iy);
    vec4 ixy0 = permute(ixy + iz0);
    vec4 ixy1 = permute(ixy + iz1);

    vec4 gx0 = ixy0 / 7.0;
    vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
    gx0 = fract(gx0);
    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
    vec4 sz0 = step(gz0, vec4(0.0));
    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
    gy0 -= sz0 * (step(0.0, gy0) - 0.5);

    vec4 gx1 = ixy1 / 7.0;
    vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
    gx1 = fract(gx1);
    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
    vec4 sz1 = step(gz1, vec4(0.0));
    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
    gy1 -= sz1 * (step(0.0, gy1) - 0.5);

    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);

    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
    g000 *= norm0.x;
    g010 *= norm0.y;
    g100 *= norm0.z;
    g110 *= norm0.w;
    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
    g001 *= norm1.x;
    g011 *= norm1.y;
    g101 *= norm1.z;
    g111 *= norm1.w;

    float n000 = dot(g000, Pf0);
    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
    float n111 = dot(g111, Pf1);

    vec3 fade_xyz = fade(Pf0);
    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
    return 2.2 * n_xyz;
}

// End of Perlin Noise Code


void main() {
    vUv = uv;

    vDisplacement = cnoise(position + vec3(2.0 * u_time));

    vec3 newPosition = position + normal * (u_intensity * vDisplacement);

    vec4 modelPosition = modelMatrix * vec4(newPosition, 1.0);
    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectedPosition = projectionMatrix * viewPosition;

    gl_Position = projectedPosition;
}
`;

export default vertexShader;

now let's add useFrame the function provided @react-three/fiber to change our uniform variables based on each frame, which will result in our blob animating.

import React, { useMemo, useRef } from "react";
import vertexShader from "./vertexShader";
import fragmentShader from "./fragmentShader";
import { useFrame } from "@react-three/fiber";
import { MathUtils } from "three";

const Blob = () => {
  const mesh = useRef();
  const uniforms = useMemo(() => {
    return {
      u_time: { value: 0 },
      u_intensity: { value: 0.3 },
    };
  });

  useFrame((state) => {
    const { clock } = state;
    if (mesh.current) {
      mesh.current.material.uniforms.u_time.value =
        0.4 * clock.getElapsedTime();

      mesh.current.material.uniforms.u_intensity.value = MathUtils.lerp(
        mesh.current.material.uniforms.u_intensity.value,
       0.15,
        0.02
      );
    }
  });
  return (
    <mesh
      ref={mesh}
      scale={1.5}
      position={[0, 0, 0]}
    >
      <icosahedronBufferGeometry args={[2, 20]} />
      <shaderMaterial
        vertexShader={vertexShader}
        fragmentShader={fragmentShader}
        uniforms={uniforms}
      />
    </mesh>
  );
};

export default Blob;

and now, we will have our blob animating -

Conclusion

That's all I have for you! Hopefully, you learned something new.

If you enjoyed this article, give it a ❤️ so others can find it too.

For more such content, stay in touch on Twitter

Contact Me:

Portfolio | Github | LinkedIn | Twitter

Introduction

Hey Everybody, In this tutorial, we are going the implement Zustand which is an amazing React State Management Library.

Preview of what we are going to create in this tutorial -

Initial Setup

So, to get started with this tutorial we are going to do some initial setup, which is a Next.js app with TailwindCSS & NextUI.

so let's create our Next.js app.

npx create-next-app your-project-name

then we are going to cd into our project, and then we are going to install tailwindCSS

you can follow this installation guide for installing TailwindCSS in your project. Installation Guide - https://tailwindcss.com/docs/guides/nextjs

So, once we have our TailwindCSS Setup.

Let's Install NextUI with this command: npm install @nextui-org/react

Ok, now we have everything that we need to follow along with this tutorial.

let's go to the index.js of our app, and create some UI for our app.

Index.js

import { Button, Input, Card } from "@nextui-org/react";
import {useState} from "react";

export default function Home() {
 const [newtodo, setNewTodo] = useState("");

  return (
    <div className="container text-black mx-auto flex flex-col items-center p-28">
      <div className="w-full">
        <h1 className="text-3xl">Todo</h1>
      </div>
      <div className="mt-2 flex items-center w-full">
        <Input
          value={newtodo}
          onChange={(e) => setNewTodo(e.target.value)}
          fullWidth
          placeholder="Enter TODO"
          clearable
        />
        <Button shadow className="m-2">
          ADD
        </Button>
      </div>
        <div className="mt-5 w-full flex items-center">
          <Card className="w-full">
            <Card.Body>Todo One</Card.Body>
          </Card>
          <Button
            size="lg"
            shadow
            auto
            color="error"
            className="m-2"
          >
            Delete
          </Button>
        </div>

    </div>
  );
}

We will have something like this on the screen -

Implementing Zustand

Let's add Zustand to our app now, to do that we need to create store.js inside our app.

In our store we are going to have three things

todos:[]: this array will help us in keeping track of all the todos and help us in rendering the todos.

addTodo: addTodo will help us in adding a new todo to our todos array, it takes in a todo as an argument, spread the previous state(...state.todos), and add the new todo at the end.

removeTodo: this function will help us in deleting a particular todo with the provided index.

here is the code for our store.js -

import create from "zustand";

const useStore = create((set) => ({
  todos: [],
  todo: "",
  addTodo: (todo) => set((state) => ({ todos: [...state.todos, todo] })),
  removeTodo: (index) =>
    set((state) => ({ todos: state.todos.filter((_, i) => i !== index) })),
}));

export default useStore;

Ok, so now we have our store. Let's bind everything up and use it in our app.

go back to index.js-

and import useStore from "../store.js`

import useStore from "../store";

ok so now we have our store imported let's get our current todos, and functions for handling all the logic.

  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const removeTodo = useStore((state) => state.removeTodo);

Let's connect everything up and see if everything works or not.

index.js -

import { Button, Input, Card } from "@nextui-org/react";
import { useState } from "react";
import useStore from "../store";
export default function Home() {
  const [newtodo, setNewTodo] = useState("");

  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const removeTodo = useStore((state) => state.removeTodo);

// this function will check if the input is valid or not
  const AddNewTodo = () => {
    if (newtodo.length > 0) {
      addTodo(newtodo);
      setNewTodo("");
    }
  };


  return (
    <div className="container text-black mx-auto flex flex-col items-center p-28">
      <div className="w-full">
        <h1 className="text-3xl">Todo</h1>
      </div>
      <div className="mt-2 flex items-center w-full">
        <Input
          value={newtodo}
          onChange={(e) => setNewTodo(e.target.value)}
          fullWidth
          placeholder="Enter TODO"
          clearable
        ></Input>
        <Button onClick={AddNewTodo} shadow className="m-2">
          ADD
        </Button>
      </div>

// Map all the current Todos
      {todos.map((todo, index) => (
        <div key={index} className="mt-5 w-full flex items-center">
          <Card className="w-full">
            <Card.Body>{todo}</Card.Body>
          </Card>
          <Button
            onClick={() => removeTodo(index)}
            size="lg"
            shadow
            auto
            color="error"
            className="m-2"
          >
            Delete
          </Button>
        </div>
      ))}
    </div>
  );
}

After connecting all the things up, we will be able to create new todo and delete todo.

AWESOME!

now we have Zustand Working on our app.

Bonus

This part of our app is completely optional. you can go through this if you want to discover a cool animation library that will help you add animation with just 3 lines of code.

Let's begin,

so we want to make our to-do app more amazing by adding some cool animation to it. to do that we are going to use auto-animate, it is an amazing animation library from formkit.

we are going to import useEffect, useRef from react & auto-animate from @formkit/auto-animate.

after importing these,

create a ref with any name, I am calling it parent.

const parent = useRef(null);

after That in our useEffect hook we are going to add parent as a dependency and pass parent.current to autoAnimate

  useEffect(() => {
    parent.current && autoAnimate(parent.current);
  }, [parent]);

ok, so the last thing we need to do is to add the ref to our parent element.

this is how our whole code will look like -

index.js

import { Button, Input, Card } from "@nextui-org/react";
import { useEffect, useState, useRef } from "react";
import useStore from "../store";
import autoAnimate from "@formkit/auto-animate";
export default function Home() {
  const parent = useRef(null);
  const [newtodo, setNewTodo] = useState("");
  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const removeTodo = useStore((state) => state.removeTodo);

  const AddNewTodo = () => {
    if (newtodo.length > 0) {
      addTodo(newtodo);
      setNewTodo("");
    }
  };

  useEffect(() => {
    parent.current && autoAnimate(parent.current);
  }, [parent]);

  return (
    <div
      className="container text-black mx-auto flex flex-col items-center p-28"
// here we are using our parent ref
      ref={parent}
    >
      <div className="w-full">
        <h1 className="text-3xl">Todo</h1>
      </div>
      <div className="mt-2 flex items-center w-full">
        <Input
          value={newtodo}
          onChange={(e) => setNewTodo(e.target.value)}
          fullWidth
          placeholder="Enter TODO"
          clearable
        ></Input>
        <Button onClick={AddNewTodo} shadow className="m-2">
          ADD
        </Button>
      </div>
      {todos.map((todo, index) => (
        <div key={index} className="mt-5 w-full flex items-center">
          <Card className="w-full">
            <Card.Body>{todo}</Card.Body>
          </Card>
          <Button
            onClick={() => removeTodo(index)}
            size="lg"
            shadow
            auto
            color="error"
            className="m-2"
          >
            Delete
          </Button>
        </div>
      ))}
    </div>
  );
}

Now, If you will try adding and removing todo, you will see some cool animations.

Github Repo -https://github.com/chetanverma16/Zustand-tutorial

Conclusion

That's all I have for you! Hopefully, you learned something new.

If you enjoyed this article, give it a ❤️ so others can find it too.

For more such content, stay in touch on Twitter

Contact Me:

Portfolio | Github | LinkedIn | Twitter

Introduction

Hey Everyone,
In this tutorial, we are going to create a full stack Notes app with Solid.js and Supabase.

Let's get started

Setting Up Supabase

• Go to https://app.supabase.com/

• Click on New Project.

• After Filling in all the project details.

• Click on Create

Installing Solid

Now, that we have our supabase app running let's create the frontend of our app. we are going to use Solid.js in this app.

• To Create a Solid.js App We are going to use this command.
  npx degit solidjs/templates/js solid-app

• Now we are going to cd into
  cd solid-app

• After that, we are going to install all the dependencies, In this tutorial I will be using yarn but you are free to use npm or pnpm.

• Now Let's run and see what we have.
  yarn dev

you will have your solid-app running -

Now we have everything running, let's add some packages which we are going to use to bring this app to life. I am a big fan of TailwindCSS, It helps me style my app pretty fast, I use it in every app. so let's do that.

• Run this command in your terminal.
  yarn add tailwindcss@latest postcss@latest autoprefixer@latest --dev

• Next, generate your tailwind.config.js and postcss.config.js files
  npx tailwindcss init -p

this command will create two files in your root directory: tailwind.config.js and postcss.config.js.

Now, Let's open the tailwind.config.js and update the purge property to include the path to our src folder and index.html file.

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Now, we will add the Tailwind's style using the @tailwind directive within you main CSS file (src/index.css)

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Now, we have TailwindCSS in our app.

• The next thing we need to add is supabase-js
yarn add @supabase/supabase-js

Now, after adding these let's add the environment variables

VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

at last, we need to create a Supabase Client which will help us in initializing the Supabase with our environment variables.

src/supabaseClient.jsx -

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Authentication

let's start with adding authentication to our app,

we need to have different routes for different parts of our app, for example /login route will help us in handling authentication, and once authenticated we need to have the dashboard unlocked at / this route.

so to handle different routes we need to add @solidjs/router.

yarn add @solidjs/router

once we have our router we need to create a new router with a new component under components/login.jsx

components/login.jsx -

import { createEffect, createSignal } from "solid-js";
import { supabase } from "../supabaseClient";
import Button from "./button";
import { useNavigate } from "@solidjs/router";

const Login = () => {
  const [email, setEmail] = createSignal("");
  const [loading, setLoading] = createSignal(false);
  const navigate = useNavigate();

  createEffect(() => {
    if (supabase.auth.session()) {
      navigate("/");
    }
  });

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      const { error } = await supabase.auth.signIn({ email: email() });
      if (error) throw error;
      alert("Check your email for the login link!");
    } catch (error) {
      alert(error.error_description || error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex mt-20 items-center justify-center">
      <div className="flex flex-col border p-4 rounded-lg shadow-lg w-64">
        <h1 className="text-2xl">Login.</h1>
        {loading() ? (
          "Sending magic link..."
        ) : (
          <>
            <input
              id="email"
              className="mt-2 border p-2 rounded-sm"
              type="email"
              placeholder="Your email"
              value={email()}
              onChange={(e) => setEmail(e.target.value)}
            ></input>
            <Button onClick={handleLogin}>Send Magic Link</Button>
          </>
        )}
      </div>
    </div>
  );
};

export default Login;

after creating our component we need to add the router to our src/index.jsx

src/index.jsx -

/* @refresh reload */
import { render } from "solid-js/web";
import "./index.css";
import App from "./App";
import { Router } from "@solidjs/router";

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("root")
);

Now, we need to add the Routes to our app entry point which is src/App.jsx

src/App.jsx -

import { createSignal, createEffect } from "solid-js";
import Login from "./components/login";
import Dashboard from "./components/dashboard";
import { supabase } from "./supabaseClient";
import Button from "./components/button";
import { Routes, Route, useNavigate } from "@solidjs/router";
import AddNotes from "./components/AddNotes";
import EditNotes from "./components/EditNotes"

function App() {
  const [session, setSession] = createSignal(null);
  const navigate = useNavigate();

  createEffect(() => {
    setSession(supabase.auth.session());
    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });
  });

// If we don't have a supabase session we log in.
  createEffect(() => {
    if (!supabase.auth.session()) {
      navigate("/login");
    }
  });

  const handleLogout = () => {
    supabase.auth.signOut();
    navigate("/login");
  };

  return (
    <div className="container max-w-2xl mx-auto mt-10">
      <div className="flex items-center justify-between">
        <h1>solid-notes</h1>
        {session() && <Button onClick={handleLogout}>Logout</Button>}
      </div>
      <Routes>
        <Route path="/login" component={Login} />
      </Routes>
    </div>
  );
}

export default App;

Now, let's start our app.

yarn dev

we will have something like this on screen and we can log in to our app.

CRUD

Now Let's Work on the core of our app.

we will start by creating notes

Create Notes

To, Create Notes we need to first create a table in our supabase database so that we can push our data to that table.

• Go to your app dashboard in supabase https://app.supabase.com/

• Go to the table editor and click on New Table

• After that give it a name we are going to name it notes in this tutorial but you can name it anything you like.

• Add two columns - Title & Description - with Text Type.

Now, that we have our table setup, let's start adding some data to it.

Let's add all the route for all the component which we need we will add them as we go along in this tutorial.

// Add All The Routes
  <Routes>
        <Route path="/login" component={Login} />
        <Route path="/add" component={AddNotes} />
        <Route path="/edit">
          <Route path="/:id" component={EditNotes} />
        </Route>
        <Route path="/" component={Dashboard} />
 </Routes>

Let's create AddNotex.jsx component which will help us in adding notes.

src/AddNotes.jsx -

import { createSignal } from "solid-js";
import { supabase } from "../supabaseClient";
import Button from "./button";
import { useNavigate } from "@solidjs/router";

const AddNotes = () => {
  const navigate = useNavigate();
  const [title, setTitle] = createSignal("");
  const [description, setDescription] = createSignal("");

  const handleSave = async () => {
    if (title().length > 0 && description().length > 0) {
      try {
        await supabase
          .from("notes")
          .insert({ title: title(), description: description() });
      } catch (error) {
        console.error(error.message);
      }finally{
        navigate("/")
      }
    }
  };

  return (
    <div className="max-w-2xl flex items-center">
      <div className="flex flex-col w-full">
        <h1 className="text-2xl mt-5">Create Note</h1>
        <input
          value={title()}
          onChange={(e) => setTitle(e.target.value)}
          type="text"
          placeholder="Enter Title"
          className="border w-full rounded-md p-4 mt-2"
        />
        <textarea
          value={description()}
          onChange={(e) => setDescription(e.target.value)}
          className="mt-2 border rounded-md p-4"
          rows="5"
          placeholder="Notes Description"
        ></textarea>
        <Button onClick={handleSave} classes="py-5">
          Save
        </Button>
      </div>
    </div>
  );
};

export default AddNotes;

Preview-

this component will allow us to add Notes to our app.

Read Notes

After Creating Some notes let's display those on our main route /.

Let's add the route for the dashboard and render all the notes for the preview.

components/dashboard.jsx -

import Button from "./button";
import Cards from "./cards";
import { useNavigate } from "@solidjs/router";
import { createEffect, createSignal } from "solid-js";
import { supabase } from "../supabaseClient";

const dashboard = () => {
  const navigate = useNavigate();
  const [notes, setNotes] = createSignal([]);

  const fetchNotes = async () => {
    try {
      const { data, error } = await supabase.from("notes").select("*");
      if (data) {
        setNotes(data);
      }
      if (error) {
        console.error(error.message);
      }
    } catch (error) {
      console.error(error.message);
    }
  };

  createEffect(async () => {
    await fetchNotes();
  }, []);

  return (
    <div className="mt-10 flex items-center justify-center">
      <div className="w-full">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl">All Notes</h1>
          <Button onClick={() => navigate("/add")} classes="bg-blue-500">
            Add Note
          </Button>
        </div>
        {notes().length
          ? notes().map(({ id, title, description }) => (
              <Cards
                key={id}
                id={id}
                title={title}
                description={description}
                reload={fetchNotes}
              />
            ))
          : "Add a note to get started"}
      </div>
    </div>
  );
};

export default dashboard;

components/Cards.jsx -

import Button from "./button";
import { useNavigate } from "@solidjs/router";
import { supabase } from "../supabaseClient";

const Cards = ({ title, description, id, reload }) => {
  const navigate = useNavigate();

  return (
    <div className="w-full border p-2 mt-5 rounded-md">
      <h1 className="text-2xl">{title}</h1>
      <p className="opacity-50">{description}</p>
      <Button onClick={() => navigate(`/edit/${id}`)}>Edit</Button>
      <Button onClick={handleDelete} classes="bg-red-500 ml-2">
        Delete
      </Button>
    </div>
  );
};

export default Cards;

Preview -

Update Notes

Now, Let's need to add the edit route component (/edit) which helps us in editing the notes.

EditNotes.jsx -

import { createEffect, createSignal } from "solid-js";
import { supabase } from "../supabaseClient";
import Button from "./button";
import { useNavigate, useParams } from "@solidjs/router";

const EditNotes = () => {
  const navigate = useNavigate();
  const [title, setTitle] = createSignal("");
  const [description, setDescription] = createSignal("");
  const params = useParams();

  createEffect(async () => {
    try {
      const { data, error } = await supabase
        .from("notes")
        .select("title, description")
        .match({ id: params.id });

      setTitle(data[0].title);
      setDescription(data[0].description);
      if (error) {
        console.error(error.message);
      }
    } catch (error) {
      console.error(error.message);
    }
  }, []);

  const handleEdit = async () => {
    if (title().length > 0 && description().length > 0) {
      try {
        await supabase
          .from("notes")
          .update({ title: title(), description: description() })
          .match({ id: params.id });
      } catch (error) {
        console.error(error.message);
      } finally {
        navigate("/");
      }
    }
  };

  return (
    <div className=" max-w-2xl flex items-center">
      <div className="flex flex-col w-full">
        {title ? (
          <>
            <h1 className="text-2xl mt-5">Edit Note</h1>
            <input
              value={title()}
              onChange={(e) => setTitle(e.target.value)}
              type="text"
              placeholder="Update Title"
              className="border w-full rounded-md p-4 mt-2"
            />
            <textarea
              value={description()}
              onChange={(e) => setDescription(e.target.value)}
              className="mt-2 border rounded-md p-4"
              rows="5"
              placeholder="Update Description"
            ></textarea>
            <Button onClick={handleEdit} classes="py-5">
              Update
            </Button>
          </>
        ) : (
          "Loading..."
        )}
      </div>
    </div>
  );
};

export default EditNotes;

This component Will allow us to handle the editing part of our app.

Delete Notes

At last, we are going to handle deleting our notes.
for that, we will go to our cards.jsx component and add a new function called handleDelete which will delete the notes and fetch all the notes again.

cards.jsx -

import Button from "./button";
import { useNavigate } from "@solidjs/router";
import { supabase } from "../supabaseClient";

const Cards = ({ title, description, id, reload }) => {
  const navigate = useNavigate();
  const handleDelete = async () => {
    try {
      const { data, error } = await supabase
        .from("notes")
        .delete()
        .match({ id: id });
      if (data) {
        reload();
      }
    } catch (error) {
      console.error(error.message);
    }
  };
  return (
    <div className="w-full border p-2 mt-5 rounded-md">
      <h1 className="text-2xl">{title}</h1>
      <p className="opacity-50">{description}</p>
      <Button onClick={() => navigate(`/edit/${id}`)}>Edit</Button>
      <Button onClick={handleDelete} classes="bg-red-500 ml-2">
        Delete
      </Button>
    </div>
  );
};

export default Cards;

Conclusion

That's all I have for you! Hopefully, you learned something new.

Enjoy the rest of your day 👋

%[https://youtu.be/wgXLE_GZ9sM]

Hey Internet, In this blog, we will create text animations with framer-motion.

In this blog, we are going to use Next.js but you can follow this for any React Project.

So to get started with that we need to first set up a Next.js app with tailwindcss and framer-motion.

in your terminal run these commands -

npx create-next-app my-project
cd my-project

once that is complete we are going to add tailwindcss and framer-motion

for tailwind CSS follow this guide to set it up - https://tailwindcss.com/docs/guides/nextjs and for the framer-motion, we are going to run this command

npm i framer-motion

so once we are done and set up let's get started and animate the text.

Animating Text By Word

We are going to create a new component under component/AnimatedTextWord.js

import React from "react";
const AnimatedTextWord = ({ text }) => {
// This will split the text into an array of word 
const words = text.split(" ");

  return (
    <div>
      {words.map((word, index) => (
        <span key={index} style={{ marginRight: "5px" }}>
          {word}
        </span>
      ))}
    </div>
  );
};

export default AnimatedTextWord;

Centering Everything on the screen

After creating the barebone of the component let's add it to our index.js page.

pages/index.js

import AnimatedTextCharacter from "../component/AnimatedTextCharacter";
import AnimatedTextWord from "../component/AnimatedTextWord";

export default function Home() {
  return (
    <div className="container h-screen mx-auto flex flex-col items-center justify-center">
      <AnimatedTextWord text="animated text with framer-motion" />
    </div>
  );
}

We will have something like this on the screen -

So let's get started on animating the text.

The next thing we have to do is to add motion to our text elements

we are going to use variants from framer-motion to have the two-state - visible & hidden

hidden - Initial state of the elements

visible - final state of the elements

then, framer-motion is going to do its magic to create animation between those states.

Here is the code -

import React from "react";
import { motion } from "framer-motion";

const AnimatedTextWord = ({ text }) => {
  const words = text.split(" ");

// Variants for Container of words.
  const container = {
    hidden: { opacity: 0 },
    visible: (i = 1) => ({
      opacity: 1,
      transition: { staggerChildren: 0.12, delayChildren: 0.04 * i },
    }),
  };

// Variants for each word.

  const child = {
    visible: {
      opacity: 1,
      x: 0,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
    hidden: {
      opacity: 0,
      x: 20,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
  };

  return (
    <motion.div
      style={{ overflow: "hidden", display: "flex", fontSize: "2rem" }}
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {words.map((word, index) => (
        <motion.span
          variants={child}
          style={{ marginRight: "5px" }}
          key={index}
        >
          {word}
        </motion.span>
      ))}
    </motion.div>
  );
};

export default AnimatedTextWord;

after adding the motion to our elements we will have something like this -

Now we have our animating text word by word.

Let's quickly add the animation for letters.

we are going to do the same thing but now we are going to split the text into letters instead of words and remove some styling that we added in the word animation to add an extra margin to the left of each word.

components/AnimatedTextCharacter.js -

import React from "react";
import { motion } from "framer-motion";

const AnimatedTextCharacter = ({ text }) => {
// splitting text into letters
  const letters = Array.from(text);

// Variants for Container
  const container = {
    hidden: { opacity: 0 },
    visible: (i = 1) => ({
      opacity: 1,
      transition: { staggerChildren: 0.03, delayChildren: 0.04 * i },
    }),
  };

// Variants for each letter
  const child = {
    visible: {
      opacity: 1,
      x: 0,
      y: 0,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
    hidden: {
      opacity: 0,
      x: -20,
      y: 10,
      transition: {
        type: "spring",
        damping: 12,
        stiffness: 100,
      },
    },
  };

  return (
    <motion.div
      style={{ overflow: "hidden", display: "flex", fontSize: "2rem" }}
      variants={container}
      initial="hidden"
      animate="visible"
    >
      {letters.map((letter, index) => (
        <motion.span variants={child} key={index}>
          {letter === " " ? "\u00A0" : letter}
        </motion.span>
      ))}
    </motion.div>
  );
};

export default AnimatedTextCharacter;

Now at last we just need to add AnimatedTextCharacter To our index.js page.

import AnimatedTextCharacter from "../component/AnimatedTextCharacter";
import AnimatedTextWord from "../component/AnimatedTextWord";

export default function Home() {
  return (
    <div className="container h-screen mx-auto flex flex-col items-center justify-center">
      <AnimatedTextWord text="animated text with framer-motion" />
      <AnimatedTextCharacter text="animated text with framer-motion" />
    </div>
  );
}

Now, we will have both animations -

Conclusion

That's all I have for you! Hopefully, you learned something new, and you use later end up using this animation to liven up your own websites!

Enjoy the rest of your day 👋

If you enjoyed this article, give it a ❤️ so others can find it too.

For more such content, stay in touch on Twitter

Contact Me:

Portfolio | Github | LinkedIn | Twitter

Hi everyone, I am very excited to share a new release for my open source project react-portfolio-template (v3.0)

Project - https://github.com/chetanverma16/react-portfolio-template Release Notes - https://github.com/chetanverma16/react-portfolio-template/releases/tag/3.0

Some of the new things added -

• Added GUI for editing the personal Data.
• Blog CRUD GUI (Now create your blog fast and easy with the new UI)
• Responsive improvements
• New Mobile Menu
• some bug fixes and performance improvements.

If you don't want to read this article you can watch a youtube video about it

so, let's get started

Setting Up Locally

• To get started with the template, at first we need to get it up and running locally on our machine, so to do that you can clone this repo.
  git clone https://github.com/chetanverma16/react-portfolio-template

• once you have cloned this repo then we need to install some dependencies.
  npm install

• After installing the dependencies we can run the next.js server.
  npm run dev

after following these steps we will have something like this running on localhost:3000 -

now we are good to go with the next steps.

Editing Some Data

So, now we have something running on the screen let's edit the data and make this portfolio custom to our needs.

now, we just need to click on the button Edit Data which you can see on the bottom right corner of the home page or you can directly go to localhost:3000/edit

you will see a GUI something like this -

Where you will see a bunch of fields that we can edit and there are multiple tabs for different sections such as -

• Header - this tab is for editing the header of the website

• Project- edit the project section.

• Services - edit the services section.

• About - edit the about section.

• Social - edit the socials or personal links.

so, once you have edited the portfolio according to your needs you can now go and click on the save button.

and once this is saved you can go back to the home page (localhost:3000) you will be able to see all the changes you have made, and now we have our custom portfolio made in just 5 minutes.

Editing Blog Data

you might have noticed there is a blog page on our portfolio that can be hidden through the localhost:3000/edit page, if you don't want to have a blog on your portfolio.

but if you do, you might want to know how to edit the blogs. so, let's do that you might be able to see three demo blogs on the portfolio. to edit those blogs we need to go to our code and go to the _posts folder. you will find the demo blogs written in markdown you can go into any of those blogs and start editing those.

to create a new blog, we just need to create a new markdown blog and add some markdown variables for adding the structure to the blog.

here are the variables that we need to add-

---
date: '2022-06-10T18:30:00.000Z'
title: Ok Let's See How this blog will turn out
tagline: This is a Tagline If you want to add.
preview: >-
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book.
image: >-
  https://images.unsplash.com/photo-1656188505561-19f1a1b6cda8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80
keywords: "Keyword One, Keyword Two"
author:
  authorname: Author One
  authorimage: >-
    https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80
readingtime: 3
---
// Content Goes Here

so once you have added the variables and added the content for your blog you can save the file and try reloading localhost:3000 you will be able to see your new blog under localhost:3000/blog.

Deploying

Once we are done with our portfolio it's time to deploy. there are many ways to deploy this portfolio.

In this blog, we are going to do it through Netlify

• the first thing you have to do is to go to netlify.com and log in or create an account.

• once you are logged in you can create a new site by clicking on add new site and then import an existing project.

• after that click the git provider you are using to import your portfolio template.

• now select the repo you want to deploy

• and click on deploy site.

Netlify will do it's magic and will deploy your site 🚀.

Awesome now we have our portfolio up and running

Portfolio Template - https://github.com/chetanverma16/react-portfolio-template

Thank you for reading this far.

If you enjoyed this article, give it a ❤️ so others can find it too.

For more frequent tips, stay in touch on Twitter

Contact Me:

Portfolio | Github | LinkedIn | Twitter

Hey, Internet people, I am chetan verma a full stack web developer primarily working on the web side of things.

I started out in 2014 and have been working on the internet ever since and in this blog, I will take you around the internet to become one yourself.

if you don't want to read this full article you can jump to the last for actionable steps and resources.

so let's get going

so before getting into the details we need to understand the types of developers there are:

• Frontend Developer - These web developers focus on the user-facing sides of websites. They create intuitive user interfaces with a keen eye for compelling design.

• Backend Developer - These web developers specialize in websites' nuts and bolts, optimizing the crucial hidden elements most users never see. They often design databases and use languages like PHP, CSS, or Python.

• Fullstack Developer -These web developers combine front-end and back-end development. They consider the creation process from both angles and possess the skills to complete tasks on either end of the spectrum.

now that is out of the way let's talk about the skills that are required for each type of developer.

There are some core skills which is required by each type of developer and there is some certain skill set that is specific to the type of developer and type of work you are trying to accomplish.

So Let's talk about the core skill set which is required by all types of web developers (OGs).

Those Are -

• HTML
• CSS
• JavaScript

These are the only skillset required to spinoff a website that will work on the web and can get the job done pretty well. All the other fancy stuff in the web developer space are derived from these core languages only so learning those will definitely make you an awesome web developer.

let's talk about these in detail.

• HTML & CSS

These languages are easy to grasp and are collectively called markup languages which are used to define the part of web structure and styling of those elements.

• JavaScript

This is the language which I love the most. it is just amazing it is a scripting language used to add dynamic nature to the web and gives all the superpower to the website or web app.

Now we are aware that where to start.

Once you are comfortable with those skills, now it is time to go in more depth and learn modern web development and chose the path to follow.

Now Let's talk about more focused stuff.

Frontend Web Developer

Now here comes the framework for writing and structuring your website or web apps.

Let's talk about the most used framework in the frontend world and my personal favorite which I use every day.

All of these frameworks do similar work but the way of achieving those results are different in each of the frameworks.

• React (❤️): This is the most loved frontend framework developed by Facebook and used by gazillions of web apps. this is my personal favorite

• Vue: This framework started out as a side project by an awesome google developer Evan You. and now shares the leaderboard with other big frontend frameworks.

• Angular: This is the oldest and battle-tested framework by google to create awesome single-page applications.

So now we know what are the best frontend frameworks. you can choose any one of them to get started and become the full-fledged frontend web developer

Actionable Step - Learn React / Vue / Angular

Backend Web Developer

So, if you want to become a backend web developer there are tons of things you can learn to become one you can choose your favorite programming language and each one of them has a framework to create an awesome backend for you.

Some of thems are -

• Ruby On Rails
• Django / Flask (Python)
• Go
• Rust
• Express.js / koa.js (Node.js)

and many more... you can choose one of them and start learning those. personally, I like Express.js because it is based on javascript and we don't have to learn the syntax of a new language.

Actionable Step - Learn any of the above backend frameworks

Full Stack Web Developer

Now For the full stack web developer, you have to combine the skill sets of both the frontend web developer and backend developer.

Actionable Step - Learn any frontend framework and any backend framework

Some Other Important Stuff To Learn

• CSS Preprocessors (LESS & SASS)

These Are CSS Transpilers and make it very easy to write CSS.CSS Transpilers lets you do things that aren't normally supported, like nesting CSS rules and other awesome stuff.

• Design Patterns

It is the way of writing your code that can be reusable and easy to debug. Having a foundation in this will make you a far better developer in any programming language.

Resources - Javascript Design Patterns, Learning JavaScript Design Patterns.

• Git (Version Control)

This is by far the most important skill set that a web developer could possess. git is a super powerful tool that can help you keep a track of the changes you make to your code and commit those changes. if things go wrong you can revert back to those changes or commits.

Resources - https://www.atlassian.com/git/tutorials, https://learngitbranching.js.org/

Now, we are ready to get a job as web developers but there are certain things that we have to do on the web to get that job.

so let's start

Get a Portfolio :

you can get away without a portfolio but having one will make a huge difference in your job search it will get you more opportunities than you can imagine and if you have a blog as well then it is icing on the cake.

Create a portfolio with past projects which you have built while learning to code, if you don't have any you can create some projects for yourself and host those online.

Some Resources to get started with your portfolio -

there are a bunch of services that can help you create a portfolio over the web, you can do a google search to see which one you like.

I have a small portfolio template which based on react that you can use instantly to create your website.

here is the link -

• Github - https://github.com/chetanverma16/react-portfolio-template
• Live - https://react-portfolio-template.netlify.app/

Now that you have a portfolio let's go to the next step.

Start Applying.

Now it is time to start applying for the web developer role.

I am listing down some of the awesome job boards which I have used and are awesome to find your first job.

Job Boards -

• Angel List
• workatastartup
• Remote Hunt
• Himalyas App
• WeWorkRemotely
• LinkedIn Jobs

Thank you for reading out this article.

⚡

Here is a small summary of this article.

Conclusion

The job market is getting tougher. The more traditional jobs are phased out every day. So, why not learn a skill that will keep you employed (and possibly wealthy) for the foreseeable future?

That’s the big advantage of web development. The great part is- that you don’t need a fancy expensive degree to get into the field. Simply by following the steps we’ve listed out here, you can start out the path of becoming a web developer.

To recap, here are the basic steps to becoming a web developer:

• Learn the Basics of HTML, CSS, and Javascript
• Frontend Developer - Learn React / Vue / Angular
• Backend Developer -
  • Ruby On Rails
  • Django / Flask (Python)
  • Go
  • Rust
  • Express.js / koa.js (Node.js)
• Full Stack Web Developer - Do the actionable step of Frontend & Backend Development.

Now after getting ready with all those skill sets we have to get into the market steps :

• Get a Portfolio
• Get on Job Boards

All Resources -

• Free Code Camp
• Codecademy
• https://www.khanacademy.org/computing/computer-programming
• https://www.w3schools.com/
• https://www.theodinproject.com/
• Design Patterns - Javascript Design Patterns, Learning JavaScript Design Patterns
• Learn Git - https://www.atlassian.com/git/tutorials, https://learngitbranching.js.org/

Get Free Portfolio

• Github - https://github.com/chetanverma16/react-portfolio-template
• Live - https://react-portfolio-template.netlify.app/

Job Boards

• Angel List
• workatastartup
• Remote Hunt
• Himalyas App
• WeWorkRemotely
• LinkedIn Jobs

Thank you for reading this far.

If you enjoyed this article, give it a ❤️ so others can find it too.

For more frequent tips, stay in touch on Twitter

Contact Me:

Portfolio | Github | LinkedIn | Twitter