DEV Community: Aashish Panthi

SVG path animation in Nextjs using GSAP

Aashish Panthi — Wed, 29 May 2024 09:21:51 +0000

Before starting out, let me quickly share what we're building today.

Open codesandbox.io or visit gsap-svg-path-animation.netlify.app.

Seems interesting, let's start.

Introduction

You might have visited some websites where when you scroll, things move; some elements move up, some sideways, and sometimes move down also. The elements follow a path when they move and often the path they follow is drawn using <path> element in SVG.

Brief overview of SVG animation

Unlike raster images, the SVGs don't lose their quality on zooming because SVGs are just a bunch of coordinates to make mathematical polygons. Also, unlike raster images, SVGs can be animated. We can change color, change size, change shape, and do more cooler stuff. That's all about the SVG animation.

Now let me explain what an SVG path animation means. So, if you've worked with SVGs before, there are different shapes that you can draw. There are ellipses, lines, polygons, rectangles, circles, and many others. You can find the complete list here. In particular, there is something called path that is used to draw lines, irregular lines; as you do with your hands. Unlike hand-drawn lines, the lines drawn with path elements can be animated. The path is used to guide some elements to move in a specific direction, basically a path and sometimes used to animate the line itself.

Introduction to Next.js

I assume you know Next.js. If you don't that's ok. You'll get almost everything out of this article. So, for those who don't know what Next.js is, let me quickly share about the most loved framework by lazy developers (I don't know if it's most loved or not; I love it).

Next.js is a javascript framework, like React.js but better. Next. js supports Server-Side Rendering (SSR), whereas React. js supports client-side rendering. Doesn't sound like a big deal but it is. SSR improves the application performance and speed and that's the reason I love Next.js.

Introduction to GSAP (GreenSock Animation Platform)

Unlike Next.js, I don't assume you know GSAP. So, GSAP which stands for GreenSock Animation Platform is another javascript framework (yes, there are millions of javascript frameworks) that is used to animate elements on websites. Open their website (gsap.com) to explore the type of animations you can make using GSAP.

Purpose and scope of the article

The article's purpose is to help you make GSAP animations in your Next.js project. It's the same for React also. In particular, we'll be looking at SVG path animation on scroll. I assume you saw the demo above.

Setting Up the Development Environment

Now let's move on to the actually stop so we are going to set up our development environment and we will be using the npm package manager and create our next application, and use the GSAP library.

Installing Node.js and npm

I assume you already have nodejs installed. If you don't then head over to not nodejs.org and download the latest version. Remember I want you to download the long-term support (LTS) version. If you're on Linux then this:

This one: https://blog.aashish-panthi.com.np/install-node-and-npm-using-linux-binaries or this: https://dev.to/aashishpanthi/3-easy-ways-to-install-nodejs-in-linux-lc4 article will help you.

To confirm you've installed node.js, run this command on your command prompt or terminal:

node --version

And you should be seeing some numbers on the screen that represent the version of node.js installed on your machine. It looks like this:

Now that you have installed the node.js, you need to take for the npm. In most of the cases, the npm gets installed automatically but if it does not, you can install it manually. So let's check if the npm is installed or not. Run the following command on your terminal:

npm --version

And if the npm is installed then, you'll see the version like this:

The basic setup is complete. Now let's move on to nitty-gritty.

Setting up a new Next.js project

If you would love to read the official documentation on installing nextjs then here it is. Otherwise, I'm here to help.

Now, to install next.js we need to run this command on our terminal:

npx create-next-app@latest

Now, it'll ask a few questions. These questions are important and carefully answer them.

First, you'll be asked to name the project. Please name it.
You'll be asked if you want to use typescript or not. I prefer typescript but it's your call. (In the rest of the article, we'll be using typescript but I'll provide the javascript code at the end).
I like to use Eslint.
Also, I'll be using tailwind CSS. If you want to sit and write your custom CSS then you've a right to opt out.
Next, it will ask if you'd like to have a src directory or not. It's more of a personal preference and I would say yes here.
And please use the app router. Please...
The final question asks you about the default import alias. We don't want to do that so select no.

So, after a few seconds, your project will be ready and I would love if you open the project on some code editor. I'll be using Visual Studio Code.

Go inside of the project and open the terminal. Run the start command to start the project:

npm run dev

And visit http://localhost:3000/ to see your project running.

Installing GSAP

Let's quickly install the GSAP packages also. Use the following command to install gsap and @gsap/react packages:

npm i @gsap/react gsap

That's all. First, let's have our SVG ready and then we'll animate. Alright?

Creating SVG Graphics

I assume you already have your SVG element ready. If you have it on your figma, export it as SVG. If you don't have you can make one.

Designing SVG graphics

I quickly made this shape in Figma using pen tool. It is basically the path over which we'll be moving stuff on the scroll event. I still don't know what I'll be moving.

To export your SVG from Figma, select the shape you want to export. If you have more than one shape, select the shapes and group them then export them as SVG. You'll see the export option at the right end of the screen:

Well, if you would like to use mine then here is the SVG code:

<svg width="462" height="829" viewBox="0 0 462 829" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.4996 4L429.5 238C449.666 250 479 284.9 435 328.5C391 372.1 151 480.333 36.4996 529C12.1662 545.167 -21.9004 587.7 36.4996 628.5C94.8996 669.3 326.5 776.167 435 824.5" stroke="#0000FF" stroke-width="8"/>
</svg>

Ok, that's the path and let's move a card along that path. Sound great? I've made a car. I'm not a designer. Please don't judge me:

I've grouped the two items and exported them as SVG. If you want the code, here it is:


<svg width="462" height="844" viewBox="0 0 462 844" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M36.4996 18.9999L429.5 253C449.666 265 479 299.9 435 343.5C391 387.1 151 495.333 36.4996 544C12.1662 560.167 -21.9004 602.7 36.4996 643.5C94.8996 684.3 326.5 791.167 435 839.5" stroke="#0000FF" stroke-width="8"/>
    <path d="M37.7316 37.3941L46.4471 37.0985C46.7214 37.0872 46.9392 36.9896 47.1001 36.8317L60.2671 45.3825C62.7497 46.9947 65.6719 46.8955 66.7971 45.163L73.9314 34.1771C75.0579 32.4425 73.9598 29.7326 71.4773 28.1204L58.3102 19.5696C58.3877 19.3605 58.3896 19.1198 58.2883 18.8645L55.0122 10.7844C54.706 10.0288 53.6614 9.44663 52.673 9.47815C51.6862 9.51362 51.134 10.152 51.4373 10.9057L53.7501 16.6082L41.4135 8.59676C38.9339 6.98646 36.0087 7.08368 34.8822 8.81829L27.7479 19.8042C26.6228 21.5367 27.7237 24.2485 30.2034 25.8588L42.5399 33.8703L36.387 34.081C35.5765 34.1085 35.2193 34.8705 35.5882 35.7864C35.9614 36.7022 36.9182 37.4197 37.7316 37.3941ZM56.9649 23.0482L56.3711 23.9626L46.2266 17.3747L46.8204 16.4603L56.9649 23.0482ZM40.0447 12.0601L43.6442 15.6977L37.5977 25.0085L32.8092 23.2018L40.0447 12.0601ZM39.5849 27.602L40.1801 26.6855L50.3246 33.2734L49.7294 34.1899L39.5849 27.602ZM52.8688 34.9256L58.9153 25.6149L63.7025 27.4236L56.467 38.5653L52.8688 34.9256Z" fill="#E52A2D"/>
</svg>

Importing SVG files into the Next.js project

No, we are not going to import the SVG file. Rather we will have SVG inside our JSX file with other react neety-greety.

Let's create a separate component for the Animation thing and we'll import it inside of our page.tsx file. And the root page.tsx file should look like this:

import PathAnimation from "@/components/PathAnimation";

export default function Home() {
  return (
    <main className="flex-col min-h-screen w-full dark:text-white">
      <div className="h-screen w-full flex flex-col items-center justify-center">
        <h1 className="text-[#432826] text-[24px] leading-[36px] font-[400] text-center dark:text-white">
          SVG Path Animation
        </h1>
        <p className="text-[16px] leading-[27px] text-[#432826] font-[400] text-center dark:text-white">
          This is a simple animation of a bee following a path using GSAP
          MotionPath plugin.
        </p>
      </div>

      <PathAnimation />

      <div className="h-screen w-full flex flex-col items-center justify-center">
        <h1 className="text-[#432826] text-[24px] leading-[36px] font-[400] dark:text-white">
          You saw that?
        </h1>
        <p className="text-[16px] leading-[27px] text-[#432826] font-[400] dark:text-white">
          The bee is following the path. Isn't that cool?
        </p>
      </div>
    </main>
  );
}

And let's have our PathAnimation.jsx file separately (create a components folder and place it there). The component looks like this:

function PathAnimation() {
  return (
    <section
      className="py-16 px-4 md:px-2 bg-secondary w-full"
    >
      <div className={`max-w-[1250px] w-full mx-auto relative mt-16 mb-20`}>
        <svg
          width="462"
          height="844"
          viewBox="0 0 462 844"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-full"
        >
          <path
            d="M36.4996 18.9999L429.5 253C449.666 265 479 299.9 435 343.5C391 387.1 151 495.333 36.4996 544C12.1662 560.167 -21.9004 602.7 36.4996 643.5C94.8996 684.3 326.5 791.167 435 839.5"
            stroke="#0000FF"
            strokeWidth="8"
          />
          <path
            d="M37.7316 37.3941L46.4471 37.0985C46.7214 37.0872 46.9392 36.9896 47.1001 36.8317L60.2671 45.3825C62.7497 46.9947 65.6719 46.8955 66.7971 45.163L73.9314 34.1771C75.0579 32.4425 73.9598 29.7326 71.4773 28.1204L58.3102 19.5696C58.3877 19.3605 58.3896 19.1198 58.2883 18.8645L55.0122 10.7844C54.706 10.0288 53.6614 9.44663 52.673 9.47815C51.6862 9.51362 51.134 10.152 51.4373 10.9057L53.7501 16.6082L41.4135 8.59676C38.9339 6.98646 36.0087 7.08368 34.8822 8.81829L27.7479 19.8042C26.6228 21.5367 27.7237 24.2485 30.2034 25.8588L42.5399 33.8703L36.387 34.081C35.5765 34.1085 35.2193 34.8705 35.5882 35.7864C35.9614 36.7022 36.9182 37.4197 37.7316 37.3941ZM56.9649 23.0482L56.3711 23.9626L46.2266 17.3747L46.8204 16.4603L56.9649 23.0482ZM40.0447 12.0601L43.6442 15.6977L37.5977 25.0085L32.8092 23.2018L40.0447 12.0601ZM39.5849 27.602L40.1801 26.6855L50.3246 33.2734L49.7294 34.1899L39.5849 27.602ZM52.8688 34.9256L58.9153 25.6149L63.7025 27.4236L56.467 38.5653L52.8688 34.9256Z"
            fill="#E52A2D"
          />
        </svg>
      </div>
    </section>
  );
}

export default PathAnimation;

Now, if you save and look at the browser, you should be able to see the SVG covering up the whole screen.

Integrating GSAP with Next.js

Oh the juicy part, let's start with the animation. We got to move that car along the path, right? Let's do that.

Importing GSAP into Next.js components

First we need to import the gsap and then import the useGSAP hook. The useGSAP hook is fairly new release and you don't find it around the internet (as of early 2024).

import gsap from "gsap";
import { useGSAP } from "@gsap/react";

After that, we need to import the plugins and register those plugins:

import MotionPathHelper from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(useGSAP, ScrollTrigger);
gsap.registerPlugin(MotionPathHelper);

That's all about importing and registering stuffs related to GSAP. Now, let's move on to the next part.

Using useRef to handle events

You know in react and next.js, we cannot directly manipulate the elements. So, we need to use useRef hook. We're going to have four refs:

  const lineRef = useRef<SVGPathElement>(null);
  const carRef = useRef<SVGPathElement>(null);
  const container = useRef<SVGSVGElement>(null);
  const sectionRef = useRef<HTMLDivElement>(null);

As you might have already guessed where you need to place these refs. Well, here it is:

return (
    <section
      className="py-16 px-4 md:px-2 bg-secondary w-full"
      ref={sectionRef}
    >
      <div className={`max-w-[1250px] w-full mx-auto relative mt-16 mb-20`}>
        <svg
          width="462"
          height="844"
          viewBox="0 0 462 844"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-full overflow-visible"
          ref={container}
        >
          <path
            ref={lineRef}
            d="M36.4996 18.9999L429.5 253C449.666 265 479 299.9 435 343.5C391 387.1 151 495.333 36.4996 544C12.1662 560.167 -21.9004 602.7 36.4996 643.5C94.8996 684.3 326.5 791.167 435 839.5"
            stroke="#0000FF"
            strokeWidth="8"
          />
          <path
            ref={carRef}
            d="M45.5126 32.8551L52.6609 27.8605C52.8849 27.7015 53.0143 27.5011 53.0633 27.281L68.7632 27.281C71.7233 27.281 74.1201 25.6064 74.1201 23.5405V10.4414C74.1201 8.37307 71.7233 6.69838 68.7632 6.69838L53.0633 6.69838C53.0143 6.4808 52.8849 6.27788 52.6609 6.11897L45.5126 1.12674C44.8442 0.659786 43.6511 0.740459 42.8393 1.3052C42.0311 1.87239 41.9156 2.70852 42.5804 3.17547L47.6259 6.69838L32.9163 6.69838C29.9596 6.69838 27.5593 8.37307 27.5593 10.4414L27.5593 23.5405C27.5593 25.6064 29.9596 27.281 32.9163 27.281L47.6259 27.281L42.5804 30.8088C41.9156 31.2734 42.0311 32.107 42.8393 32.6742C43.6511 33.239 44.8442 33.3196 45.5126 32.8551ZM53.8296 10.3485V11.4388L41.7337 11.4388V10.3485L53.8296 10.3485ZM33.6545 10.3485L38.6546 11.4388L38.6546 22.5406L33.6545 23.6334L33.6545 10.3485ZM41.7337 23.6334V22.5406L53.8296 22.5406L53.8296 23.6334L41.7337 23.6334ZM56.8632 22.5406V11.4388L61.8632 10.3485L61.8632 23.6334L56.8632 22.5406Z"
            fill="#E52A2D"
          />
        </svg>
      </div>
    </section>
  );

The svg code for car has been changed. Basically, I rotated the card. That's all.

So, after changing the path element, import the useEffect hook from react and we are going to set the position of the car.

useEffect(() => {
    gsap.set(carRef.current, {
      yPercent: 0,
      xPercent: 20,
      rotate: 30,
    });
  }, []);

The above code positions the car at y=0%, x=20% and rotation=30deg (property names aren't exactly the same, it's used to just explain)

So, our path is there, car is there. And our code looks like this:

"use client";
import { useEffect, useRef } from "react";

//gsap
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import MotionPathHelper from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(useGSAP, ScrollTrigger);
gsap.registerPlugin(MotionPathHelper);

function PathAnimation() {
  const lineRef = useRef<SVGPathElement>(null);
  const carRef = useRef<SVGPathElement>(null);
  const container = useRef<SVGSVGElement>(null);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    gsap.set(carRef.current, {
      yPercent: 0,
      xPercent: 20,
      rotate: 30,
    });
  }, []);

  return (
    <section
      className="py-16 px-4 md:px-2 bg-secondary w-full"
      ref={sectionRef}
    >
      <div className={`max-w-[1250px] w-full mx-auto relative mt-16 mb-20`}>
        <svg
          width="462"
          height="844"
          viewBox="0 0 462 844"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-full overflow-visible"
          ref={container}
        >
          <path
            ref={lineRef}
            d="M36.4996 18.9999L429.5 253C449.666 265 479 299.9 435 343.5C391 387.1 151 495.333 36.4996 544C12.1662 560.167 -21.9004 602.7 36.4996 643.5C94.8996 684.3 326.5 791.167 435 839.5"
            stroke="#0000FF"
            strokeWidth="8"
          />
          <path
            ref={carRef}
            d="M45.5126 32.8551L52.6609 27.8605C52.8849 27.7015 53.0143 27.5011 53.0633 27.281L68.7632 27.281C71.7233 27.281 74.1201 25.6064 74.1201 23.5405V10.4414C74.1201 8.37307 71.7233 6.69838 68.7632 6.69838L53.0633 6.69838C53.0143 6.4808 52.8849 6.27788 52.6609 6.11897L45.5126 1.12674C44.8442 0.659786 43.6511 0.740459 42.8393 1.3052C42.0311 1.87239 41.9156 2.70852 42.5804 3.17547L47.6259 6.69838L32.9163 6.69838C29.9596 6.69838 27.5593 8.37307 27.5593 10.4414L27.5593 23.5405C27.5593 25.6064 29.9596 27.281 32.9163 27.281L47.6259 27.281L42.5804 30.8088C41.9156 31.2734 42.0311 32.107 42.8393 32.6742C43.6511 33.239 44.8442 33.3196 45.5126 32.8551ZM53.8296 10.3485V11.4388L41.7337 11.4388V10.3485L53.8296 10.3485ZM33.6545 10.3485L38.6546 11.4388L38.6546 22.5406L33.6545 23.6334L33.6545 10.3485ZM41.7337 23.6334V22.5406L53.8296 22.5406L53.8296 23.6334L41.7337 23.6334ZM56.8632 22.5406V11.4388L61.8632 10.3485L61.8632 23.6334L56.8632 22.5406Z"
            fill="#E52A2D"
          />
        </svg>
      </div>
    </section>
  );
}

export default PathAnimation;

Now, the only thing remaining is the ignition of the engine and letting the car move.

Creating animation timelines

It's time to use useGSAP hook provided by gsap to create an animation timeline.

useGSAP(
    (context, contextSafe) => {
      let tl = gsap.timeline({});

      tl.to(carRef.current, {
        motionPath: {
          path: lineRef.current || "",
          align: lineRef.current || "",
        },
        ease: "power1.inOut",
      });

      return tl;
    },
    {
      scope: container,
    }
  );

The above timeline is a basic timeline. If you want to dive deep into the useGSAP hook then I recommend this official documentation. Allow me to simplify further.

First, we are creating a timeline with gsap.timeline({}) and we're passing empty object because we don't want to pass anything right now (we'll do in a few seconds). Then the timeline is stored in tl variable, tl is short for the timeline. We're storing the timeline on a variable to easily access the timeline in the future.

Then, we're passing the actual props to animate the stuff. The animation is targeted to the car path, we're using carRef to point to our car. Then, we're proving motionPath, inside of the motionPath, we can provide the path (along which the car moves) and another path (along which the car aligns).

At the end, we're providing the scope also. It's helpful when you've multiple animations and you don't want to mess up.

Now, let's make a final timeline.

useGSAP(
    (context, contextSafe) => {
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: sectionRef.current,
          scrub: true,
          start: "top center",
          end: "bottom center",
        },
      });

      tl.to(carRef.current, {
        motionPath: {
          path: lineRef.current || "",
          align: lineRef.current || "",
          alignOrigin: [0.2, 0.5],
          autoRotate: true,
          start: 0,
          end: 1,
        },
        ease: "power1.inOut",
      });

      return tl;
    },
    {
      scope: container,
    }
  );

Here, we're triggering the animation on scroll with scrollTrigger. Inside scrollTrigger, we're passing a trigger prop; trigger prop is used to identify by with element the animation is going to trigger. Here we're triggering or starting the animation when the section is scrolled halfway to the screen from the top and stops when the bottom end of the section goes halfway through the screen. scrub is set true to allow animation to take place both forward and backward.

Next, we're aligning the car to perfectly center in that path and also allowing the car to autoRotate so that the car makes a smooth turn. And, you can add a lot of transitions. Choose the one that suits you best.

Conclusion

In this article, you learned how to create SVG path animations using GSAP in a Next.js project. We covered setting up the development environment, installing necessary packages, creating and importing SVG graphics, and integrating GSAP for smooth animations triggered by scroll events. By the end, you have a car following a path on your webpage, showcasing the power of SVG and GSAP animations.

I would like to end this article with a few resources:

GitHub repository -> https://github.com/aashishpanthi/svg-path-animation
CodeSandBox -> https://codesandbox.io/p/github/aashishpanthi/svg-path-animation/main

Introducing Lootle - for MongoDB Atlas Hackathon

Aashish Panthi — Thu, 08 Dec 2022 16:42:47 +0000

What I built

Lootle -> (loot-le) is a website and MIT license open source project where you can keep track of the price of your MacBook or of your favorite Raspberry Pi or the stock price of Microsoft. You just enter the URL of the product/stock then the website keeps the history of the price fluctuation, presents it to you, and even notifies via email you when the price drops down that you specified.

Category Submission:

Choose Your Own Adventure

App Link

lootle.live

Video Overview

Screenshots

Home page
Dashboard
Product detailed view with graph
Email notification for stock price
Email notification for product price drop
MongoDB Atlas Stats

Description

The app checks the price of the product specified. Not only it checks the price, it extracts the name and information of the product from the website. It gathers information on a regular interval of fiveteen minutes and stores inside of the database. If the current price is found to be less than the specified price by the user then, the user will be updated with an email. And the user can also check the history of the price fluctuation through the nice little dashboard.

Tech stack 👩‍💻

Reactjs -> For frontend
MongoDB Atlas -> For mongoDB database
Express.js -> For API
Digital Ocean -> Deployment
Puppeteer/Cheerio -> Getting Price
Nodemailer -> To send email

Link to Source Code

All source code of frontend, backend and bot in same repository:

aashishpanthi / lootle.live

Amazon, Flipkart, and Daraz product's price tracker and Stock price on CNBC tracker

lootle

Project introduction

Lootle -> (loot-le) is a website and MIT license open source project where you can keep track of the price of your MacBook or of your favorite Raspberry Pi or the stock price of Microsoft. You just enter the URL of the product/stock then the website keeps the history of the price fluctuation, presents it to you, and even notifies you when the price drops down that you specified.

Functions ⚒

Oh, we haven't discussed much on the functions of the website 😅. It checks the price of the product specified. Not only it checks the price, it extracts the name and information of the product from the website. It gathers information on a regular interval of fiveteen minutes and stores inside of the database. If the current price is found to be less than the specified price by the user then, the user will be updated…

View on GitHub

Permissive License

MIT

Background

The irretation of checking the price constanly in ecommerce store is the motivation behind this project. To eliminate this process and rather automate the process, I built this web app. And further I am planning to release it as browser extension.

How I built it

It is not my first time using mongoDB. I have already built few projects using mongoDB (MongoDB Atlas to be more specific). But learning never stops. I didn't know that mongoDB provides change streams but when I come to know I had to try it once. I have tried it in the app to send push notification whenever price drops. But I felt like sending notification may look spammy so I choose the option to mail where I can send a detail description of the product with the interactive elements.

Currently supported sites:

Flipkart.com for available products only
Amazon.com for available products only
Amazon.co.uk for available products only
Amazon.in for available products only
cnbc.com for stock price
daraz.com.np for available products only

Important links 🔗

Introducing juhu - an open source search engine

Aashish Panthi — Mon, 29 Aug 2022 17:10:29 +0000

Overview of My Submission

Juhu is an open-source search engine that is built using Nodejs and Redis database. As you have already guessed the use case scenario of the website. Why not try on your own, Search for Elon Musk.

I was always curious to know about how search engine are built and most importantly how SEO is done. Throught the journey of building the new search engine, I have learnt a lot of things about how the data should be displayed on the website, what are the HTML tags needed to make the crawler understand what your website is all about. Also, using a pre-styled HTML elements (built for the specific purpose) are better than using a CSS to style the elements later.

Submission Category:

MEAN/MERN Mavericks Yes, I have used MERN, also replaced M with R, I mean I have used redis as a primary database

Video Explainer of My Project

Language Used:

I have used Javascript as a primary language and Nodejs as a runtime environment. I have used different libraries/packages to build this application. Some of them are:

Puppetter -> I have used this automation tool to scrape the websie
Redis OM -> Used to interact with redis services (Redis search/ JSON database)
Express -> To create server
React -> To create client side (frontend)
Mongoose -> To use secondary database (MongoDB)

Link to Code

The MERN application repository:

aashishpanthi / search-engine

This is an open source search engine built using redis and puppeteer

Juhu - search engine

Juhu is an open source search engine that doesn't track users and id fully customizable.

Overview video

Here's a short video that explains the project and how it uses Redis:

My submission video

How it works

Firstly of all a bot is used to run through different websites and that bot checks if the url is allowed to crawl or not. If able to crawl, it means it is able to be indexed. So, the bot scrapes the data from that website. Filters the data and stores in a form that it will be easier to search and index the scraped data. I want to attach a little architecture diagram here to clear out the things I said:

How the data is stored:

First of all, our server needs to be connected with the redis database. This is a long code but it works :).

import

…

View on GitHub

The bot repository:

aashishpanthi / web-crawler

Web-crawler

This is a web crawler made using puppeteer library in javascript. It visists different websites, scrapes the information and stores the information inside of a database which can be accessed by the search engine.

View on GitHub

Architecture:

Some Screenshots of the website

Home page

Text Result (Search result) page

Image result (Search result) page

Collaborators

@roshanacharya and me @aashishpanthi

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

The YouTube learning trap

Aashish Panthi — Tue, 17 May 2022 17:01:00 +0000

Ok, quick questions:

What was the educational video you searched for?
How many educational videos you've watched after finishing that video?
What is the ratio of educational and entertainment videos shown on your home feed?

The answer to the first question varies from person to person. But for the second and third questions, there should be an exact number. I have noticed for a while and found out I get boar after watching 2-3 educational videos in a row, which means I've only watched 2 or 3 educational videos after searching for an educational video.

Here, the educational video maybe a tutorial on how to make a todo app or a complete course on java, or perhaps it is a video explaining a physics concept.

Suppose I have to answer the third question. In that case, the ratio for an educational video to the entertainment or other form of content is 1:4 which basically means youtube recommends only 25% of videos from which I can gain knowledge and leave youtube with satisfaction.

Maybe you don't see the problem with the above segment and think that after all YouTube is there to generate a lot of profit and it is going to push content that keeps viewers to their platform, I think Google is that clever. Yes, it is a fact and we are also familiar that YouTube does this. But at the same time, content on YouTube is free and many people made their six-figure income after learning mostly from YouTube if not all.

Why YouTube is free? 💸

If you don't have a youtube premium account then you need to watch a lot of ads. And YouTube Premium is not also available in most countries. So, one thing I want to clear out from your mind is that YouTube isn't free. YouTube will eventually squeeze out all of its revenue from its viewers. And YouTube costs your time, YouTube is free when you look at it from the perspective of money but if you really value your time then you know YouTube costs time, a lot of time.

Let me share with you my personal statistics, YouTube is opened in at least one of my tabs when I use a laptop no matter if I am learning a new programming language or just a new concept. It is there to help me and to be fair, it does its job quite well. And I also have a habit of listening to songs while coding, and I prefer to use YouTube. Again, not many subscription services are available in my country, so I cannot pay for Spotify even if I wish. So I am totally inside of a YouTube ecosystem. Learning a new thing, listening to music, getting some entertainment, and sometimes getting news(from some independent creators) in all these cases, YouTube is there with me every second.

Things could be different for you but a thing that I learned from my own experiences it that if YouTube is there for me to help me with every task then I am spending almost all my day on YouTube. That's where YouTube gets an opportunity. When I am watching some knowledgeable content, it recommends me 7-8 videos at the side, some are related to the content I am consuming while others have no relation to the content I am watching right now. Usually, these contents are entertainment contents and we tend to be satisfied with the time we spent on YouTube but inner us knows what we were there for and what we received from there.

Satisfaction trap🎃

You are watching a video on how to make a responsive navbar using HTML and CSS, you see on the right side of the video there are a lot of videos related to either the same topic or a totally different topic. In most of the cases, you'll be recommended with a video titled how I got into FAANG without a degree or how I earn millions of dollars freelancing or a video talking about the best way to learn programming. Sometimes YouTube also recommends why coding is not for everyone, even if you are learning how to code.

90% of the time, you will click these videos. I can guarantee you that you haven't still finished making that navbar, but you have watched that distracting video for more than half of its length. Now you fall into the trap, the trap of satisfaction. You think that you knew about a developer's life in silicon valley or how a developer made millions of dollars after learning on his own. You feel like you gained much the value out of your invested time on YouTube but now is the time to reflect back on you and your plan of opening YouTube. You find that you were there to learn about how to make a navbar but at the end of the day you have watched 20 videos and still, your navbar is incomplete. That is what I call a satisfaction trap.

And I admit that I fell into this trap when I was very new to code. I used to watch a lot of these videos and start comparing myself with these developers. That is where you start procrastinating.

YouTube's algorithm 👨‍💻

Why YouTube was initially developed? Of course to share videos. Starting from just a video-sharing platform to the second most popular search engine, YouTube has come a long way. And I am sure in this long journey, the business strategy of YouTube must have been changed. The algorithm is designed in such a way that if a video keeps viewers on its platform, push it further to more audiences. And in the middle of this, educational videos suffer to gain enough views.

If there are fewer views, or if viewers are leaving the video in the middle of it, why would YouTube's algorithm push that video? That is the reason why my home feed is filled with entertainment-related videos, not educational videos. And I say YouTube's algorithm is not made for educational videos.

If you have come this far, I want you to ask yourself some more questions.

Why did you choose YouTube for learning?
How much time on average do you spend on YouTube and how much you are satisfied with your time investment? If you haven't thought of it, it is the best time to consider this question.
Do you really need YouTube videos to learn that thing or can you get the same level of knowledge from blogs or other documentation?
Why YouTube would care about you?
Can't you watch the same video in its embedded form from other websites?
Is your learning passive or active?

Recently, I don't depend upon YouTube videos. Mainly because I don't find my exact requirement. But I find that on official documentation or a blog written by some random guy. Embedded youtube videos are helpful as we cannot find dozens of videos on its side. And while I am reading blogs, I am actively learning, it's not like I am sitting on a sofa and watching a tutorial and grabbing a handful of popcorn. While reading, I need to interact with the website, I need to scroll and I need to test the code myself. When I am learning the same thing outside from YouTube, I tend to lose 20% less time on things that I don't want and don't like.

If you have got any solutions that can help anyone in this trap to get out it, I would be more than happy to hear about that.

Is Microsoft getting evil ?

Aashish Panthi — Sun, 06 Feb 2022 04:59:51 +0000

I don't know how many of you are gonna agree with me. It's fine if you don't agree with what I say, leave your personal opinion in comment below and its time to discuss dear folks.

Miscrosoft is releasing differnt tools that are making lifes of developer slightly better, if not better. So, what are the tools ?

GitHub Copilot

I don't know where do you live if you haven't heard about GitHub copilot. It is your AI pair programmer(at least, that is what I saw on the homepage of it).

I have tested this myself and it recommends pretty good suggests(most of the time). And it isn't still released to all.

GitHub

Why GitHub is being so nice to all of us? We can create as many repositories in our GitHub, make them public or private. And that is all for free. And now we hear the news, the company is training copilot with the code available in public repositories. And we know what GitHub did with 'color' and 'faker' libraries. But I think GitHub is a really good product, what do think ?

Sketch2code

Ok, this is fairly the new one (I heard a month ago) and most of you don't have any idea about what it is. Sketch2code converts your handsdrawn diagram into code (I am not saying that, Microsoft itself said that). But I have tested it and all I was left with is "what!". I mean how microsoft misebrely failed to convert my drawing into code. But it worked perfectly fine with the example provided in the website itself.

Feel free to leave your own opinion.....

What if you get access to GutHub copilot

Aashish Panthi — Tue, 01 Feb 2022 08:52:40 +0000

GitHub copilot is only available to some peoples as it is not released completely. If you haven't signed up, you should do it now because you get access after a month. Visit here.

I want to ask you all guys a question. What will you ask GitHub copilot to do if you get access to it?

Funny, serious, any type of idea is accepted in comment section👇.

Please suggest me an idea

Aashish Panthi — Tue, 11 Jan 2022 15:01:21 +0000

I want to start a startup with my friends but lacking ideas. Any suggestions will be accepted. Please comment below:

Zorin - The best OS for students

Aashish Panthi — Thu, 30 Dec 2021 06:16:29 +0000

The best Linux distribution for students is Zorin. I know this is a bold statement but I've come to this conclusion after using it. Let me tell you why I'm saying such.

What is Zorin OS

Zorin OS is a ubuntu-based Linux distribution. According to the official website of Zorin, "It is the alternative to Windows and macOS designed to make your computer faster, more powerful, secure, and privacy-respecting."

Are these all claims worth saying?

I have divided it into different categories and here they are:

Looks (UI):

Talking about the user interface, Zorin is gorgeous. Just look at the desktop, it is clean and so superior. When you use it, you get quite the same experience as Windows 7 but better. If you are a windows user then you will be pretty familiar with this OS in a day.

It has a really polished file manager to organize your school or work projects. It makes us easy to organize the files in just a right way.

Customization has been a great part of Linux distributions. But Zorin takes it to next level with excellent customization options. Using Zorin appearance, you can change the layout, themes, fonts, panels and you name it. Zorin OS absolutely kills it in the looks department.

Hardware requirements:

Zorin OS is not that resource-hungry when you compare it with pop os or other similar operating systems. Actually, they've especially designed a light version for the old computers and they claim, it can be run on any devices that were manufactured in the past 15 years. This is a huge claim but I've personally tested the lite version on my old PC. After installing Zorin lite, it works fine for me. You can run the lite version on a PC with 1GB RAM.

Education edition:

Zorin team has created Zorin OS Education with a huge library of educational apps and games. Zorin OS Education includes powerful and engaging tools that help you to teach coding and engineering. And if you are a student, you have a huge advantage over thousands of apps specially designed for students. They have very engaging software that helps you to learn anything quite faster and effectively.

Huge app resources

Zorin OS has thousands of apps in its app store. Unlike the Microsoft store, you don't need to download software from untrusted sites, double click and install. Nearly all software is available in the software store of Zorin. There is huge complexity that has been hidden inside the clean and polished UI of the software store. Zorin uses software from three different software providers but keeps them in one place so you don't need to worry about anything.

It's free

Yes, the pro edition costs $39 but it's for the support you'll get from the Zorin team. But there are other editions, core, education, and lite that costs nothing. As a student, you may need to use PowerPoint, word, excel, and a bunch of other software which cost a lot. Well, you find many alternatives like libre office, OpenOffice which are completely free. And of course, there is a major one google docs which is like a gem.

Other features

With Zorin, you get Zorin connect which helps you to connect with your mobile phone easily and securely and get all of your notifications right into your desktop. And you have the advantage of controlling your computer remotely with your phone. With Zorin 16, you can run windows files with .exe and .msi extension directly on your computer. Yes, it is possible to run Windows apps in Linux with wine but the process is very frustrating. But Zorin handles it so perfectly that Linux newcomers don't need to get overwhelmed with the complicated process.

There are a lot of other gorgeous and powerful Linux distros. But if you are a student, you may now know why to choose Zorin. The last message I want to give you is TRY ZORIN ONCE.

3 easy ways to install nodejs in linux

Aashish Panthi — Tue, 23 Nov 2021 16:40:40 +0000

Installing node in linux is quite challenging sometimes, especially if you are a beginner and don't have any idea on how to do that.

In this article, I will show you three different ways of installing Nodejs in linux. You can feel comfortable following the same process in any ubuntu-baseds distro you use.

1. Installation using apt package manager

Installation of Nodejs is insanely easy with apt package manager in linux. To install nodejs with apt package manager, just open up your terminal. Copy this command sudo apt update && sudo apt upgrade and paste here, hit enter, and type your password. Then we use the command sudo apt install nodejs, press enter, wait few seconds and you find your nodejs is successfully installed. To check the version just type the command node —version and you get the version.

2. Installation with Linux Binaries

To install linux binaries, just open up your browser and head over to nodejs.org. Click on downloads tab then choose linux binaries. After the download is completed, go to the directory where you've downloaded your nodejs. Then extract the tar file by right-clicking on it and click on extract here.

You'll have all the necessary folders here. Now, right-click and open the terminal here. Here we have to copy some folders from this directory(downloads) to our user(/user) directory. Copy this command sudo cp -r ./{lib,share,include,bin} /usr, paste it here, and hit enter. Then type your password and your nodejs is installed. If you verify if it’s actually installed or not. You can use the same command node --version and you get the nodejs version and npm --version returns the npm version.

3. Installation using NVM

If you’re wondering what this NVM is then it’s a node version manager which helps us to easily install and switch between different versions of node.
Actually installing NVM is also simple. We can directly install NVM using curl but in some cases, you may run into a problem. So, to avoid such problems just create some files with this command touch ~/.bash_profile ~/.bashrc ~/.zshrc ~/.profile. Again run the following command curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash or this one wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash. It's your choice but either of them downloads a script and runs it. Press enter and if it looks like you don't have curl installed. You can simply install the curl with the command sudo apt install curl and rerun that command again. To check if nvm has been installed or not, you need to restart the terminal so close the active one, and open a new one. Check the version with command nvm --version and if it returns the version then you have your NVM ready to use. And there are a lot of commands waiting for you to use them. One of them is nvm ls which lists all of the installed nodejs versions on your system. Then we have nvm ls-remote which basically lists all of the nodejs versions available till now. There will bw few LTS versions also in there but if we only want to install the latest LTS i.e 14.x (at the time of writing this article). Again to install nodejs, we have the simple command nvm install node which installs the latest release of nodejs but if we want to install some specific versions then instead of the node we give the version of nodejs that we want to install. In this case, it is 14.18.0. Press enter and it will download and install our desired version of the node. You can verify if it is installed or not by checking the version of nodejs.

You can install as many versions of the node you want on your computer. If you want to switch to nodejs version n from version m then there is indeed an easy way to switch between them with the command nvm use version_of_node. In this case, it's v14.18.0, hit enter and you can verify again by checking the version of nodejs. And you can also check the version of npm.

Those were the ways you can install nodejs with. Watch this video fully for the detailed information:

setTimeout is not a part of JavaScipt, why ?

Aashish Panthi — Tue, 31 Aug 2021 10:38:48 +0000

Maybe you think setTimeout like this -: The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. it's true, but let's dive deeper.

There aren't any methods like setTimeout() or setInterval() in JavaScript. They are not provided by the JavaScript engine itself but they are provided by browser as part of the window object. Let's break it down:

If javascript doesn't provide setInterval() and setTimeout() but when we run our javascript code which also contains setTImeout it works perfectly fine. Yes, that's the real problem. Many people know how to use and they don't have any idea about what's going on under the hood. Before knowing about windows object, let's look at web APIs.

Web APIs

A browser can perform many tasks like getting user's location, turning on/off bluetooth, storage tasks, timer related tasks and many more. And we as a developers need these things. So, all these things can be accessed by JavaScript via Web APIs. That's it, now we have all these things inside one place and that place is window object.

Some web APIs:

localStorage
setTimeout()
console
DOM APIs
fetch()
location
alert()
and others

If setTimeout() is present inside window object then why we don't write like this:

window.setTimeout(() => console.log('Timer finished'), 1000 );

Instead we write without window object:

setTimeout(() => console.log('Timer finished'), 1000 );

window is a global object and setTimeout() is present inside global object(at global scope), so we can access setTimeout() without window object. Not only with setTimeout(), we don't need to write window object to access alert, localstorage, and other web APIs.

Far by we've discussed that the browser provides web APIs, so we can use the things likesetTimeout() but nodejs is not a browser. Then how is it possible to access setTimeout() in node. Well, we don't have window object available while working with node. But we can still access setTimeout(), let me tell you something at this point setTimeout() function in node works similar to window.setTimeout(), however they are not exactly same. Read more about this here.

Top 5 JavaScript animation libraries 2021

Aashish Panthi — Sun, 29 Aug 2021 14:47:38 +0000

Animations are the game changer when it comes to quality user experience. Everyone wants to use it but in a way that website visitors don't want to quit. So I've gathered here best five JavaScript animation libraries. Let's start:

1. Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Well just look at this example:

2. Vivus

Vivus is a lightweight JavaScript library (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.

Just interact with the example below by clicking and holding:

3. GSAP

GSAP is a JavaScript library that is turning developers into animation superheroes. It is one of the most popular javascript libraries out there. You can animate almost anything with the help of this library.

Just use this library to create awesome animation like one given below:

4. Typeit.js

Typeit.js allows creating awesome typing animation in your website. If you want to add typing animation on your website then go for it.

Just look at this cool story of a programmer

5. ScrollOut

ScrollOut.js is a javascript library that detects changes in scroll for reveal, parallax, and CSS Variable effects.

Just scroll down this codepen

May be I've missed some other cool libraries, just let me know in the comment section down below. And I can't forget Threejs also.

Step by step instructions to install node and npm using Linux binaries

Aashish Panthi — Sat, 28 Aug 2021 11:08:29 +0000

Yes, you can install node through apt package manager with the command sudo apt install nodejs and you get the latest nodejs installed. But many people find it very complicated to install Binaries. So, I will be breaking down the process into four simple steps. (Note: I'm using pop os and will be installing node v14.17.3).

Let's start:

1. Get the binary file

So head to nodejs website and download binary files of latest stable nodejs.

2. Extract the tar file

Go to the directory where you've downloaded your nodejs. In my case its Downloads directory.

Then, extract the files with this command tar -xf "*your_downloaded_file*"

Or, go to Downloads folder using file manager, right click on tar file and extract (so simple).

3. Copy folders to /usr

Now we get these all folders inside our extracted node folder.

Here we need to cd inside that folder. Type the command sudo cp -r ./{lib,share,include,bin} /usr hit enter and type your password. Remember to use -r flag to make sure that all files inside those folders are also copied.

4. Check the node and npm version

You can check nodejs version with the command node --version or node -v and check npm version withnpm --version.

That's it, you have now installed nodejs and npm in your system. Enjoy 😎

DEV Community: Aashish Panthi

SVG path animation in Nextjs using GSAP

Introduction

Brief overview of SVG animation

Introduction to Next.js

Introduction to GSAP (GreenSock Animation Platform)

Purpose and scope of the article

Setting Up the Development Environment

Installing Node.js and npm

Setting up a new Next.js project

Installing GSAP

Creating SVG Graphics

Designing SVG graphics

Importing SVG files into the Next.js project

Integrating GSAP with Next.js

Importing GSAP into Next.js components

Using useRef to handle events

Creating animation timelines

Conclusion

Introducing Lootle - for MongoDB Atlas Hackathon

What I built

Category Submission:

App Link

Video Overview

Screenshots

Description

Tech stack 👩‍💻

Link to Source Code

aashishpanthi / lootle.live

Amazon, Flipkart, and Daraz product's price tracker and Stock price on CNBC tracker

lootle

Project introduction

Functions ⚒

Permissive License

Background

How I built it

Currently supported sites:

Important links 🔗

Introducing juhu - an open source search engine

Overview of My Submission

Submission Category:

Video Explainer of My Project

Language Used:

Link to Code

aashishpanthi / search-engine

This is an open source search engine built using redis and puppeteer

Juhu - search engine

Overview video

How it works

How the data is stored:

aashishpanthi / web-crawler

Web-crawler

Architecture:

Links:

Some Screenshots of the website

Collaborators

The YouTube learning trap

Why YouTube is free? 💸

Satisfaction trap🎃

YouTube's algorithm 👨‍💻

Is Microsoft getting evil ?

GitHub Copilot

GitHub

Sketch2code

What if you get access to GutHub copilot

Please suggest me an idea

Zorin - The best OS for students

What is Zorin OS

Looks (UI):

Hardware requirements:

Education edition:

Huge app resources

It's free

Other features

3 easy ways to install nodejs in linux

1. Installation using apt package manager

2. Installation with Linux Binaries

3. Installation using NVM

setTimeout is not a part of JavaScipt, why ?

Web APIs