Forem: Minhazur Rahman Ratul

Checkout my latest blog! I explained how to design better hero sections and transform your boring hero section into a HeroMaxxed one.

Minhazur Rahman Ratul — Mon, 11 Aug 2025 16:13:03 +0000

Minhazur Rahman Ratul

Aug 11 '25

Let the Product Sell Itself

#webdev #design #tutorial #startup

Comments 1

3 min read

Let the Product Sell Itself

Minhazur Rahman Ratul — Mon, 11 Aug 2025 16:04:40 +0000

In this blog-post, I will explain how I transform hero sections for better conversions and aesthetics.

Sometimes the best way to explain your product… is to just show it.

That’s exactly what I did with PageAI Pro — a powerful landing page builder for busy developers. The original site was clean, but it didn’t reflect the strength of the product. So I gave it a full design roast at HeroMaxx.

Here’s how it went down 👇

🔥 The HeroMaxx Roast Process

Before jumping into visuals, I always follow a clear process:

Understand the product’s personality
Break down the current landing page
Use the product to get real insights
Analyze competitors
Define the audience, use cases, and USPs
Roast it
Redesign it ✨

This ensures every design decision is grounded in research, clarity, and conversion.

🧠 Understanding PageAI Pro

While researching, I defined these key points:

Audience: Marketers, Developers

Use case: No-Code tool, AI-powered builder, Website generator

Competitors: Framer, Typedream, Webflow AI

Problems solved:

Made for busy devs who want to launch fast
Generates the whole codebase, not just a mockup
Built with Next.js, TypeScript, Tailwind CSS & Shadcn UI
Highly customizable templates
Designer-friendly interface
Complete landing page in 3-5 minutes
Full ownership and easy handoff

🧪 Let’s See the Original

The original version was clean and minimal — which I liked. But it lacked energy and missed the chance to show off the product’s strengths.

Here’s what I thought could be better:

◆ Vague diagrams — no real value

◆ Generic copy — doesn’t speak to devs or marketers

◆ Neutral CTA — not actionable or clear

◆ Flat hero — lacks depth

◆ No interactivity — no way to try the product

🎯 What Matters in the First 5 Seconds

You’ve got one shot to explain your product’s value. That means:

◆ Say what the product is

◆ Show why it matters

For PageAI Pro, this meant:

“An AI landing page builder for busy devs — with full code control.”

✍️ Typography with Personality

I chose Geist as the primary typeface — clean, modern, and developer-friendly.

Then I paired it with Lora to bring in some character and warmth.

It’s a subtle combo that balances clarity and brand feel.

🤖 Let the Product Speak

Since the product is strong, I wanted users to try it upfront.

So I added a small AI chatbox right in the hero. You can type a prompt, and see the product do its magic. This kind of interaction builds instant trust.

🌈 Color with Intention

I kept their existing palette, which already worked well — but added more depth. I used colors more intentionally, especially for CTAs, to follow strong UX principles.

Contrast = Clarity.

🛠 Set Expectations Early

People don’t like surprises. So I added a simple stepper to show the journey.

This helps guide users and makes them more likely to take action.

✅ Remove Friction, Add Hooks

To lower hesitation, I added copy like:

“Free to get started. No credit card required.”

It’s simple, but effective. It gives users a reason to click, right now.

🧩 Final Result

Brought everything together into a polished new hero section:

More depth
More clarity
More interaction
Stronger CTA
Product-first storytelling

🚀 Final Thoughts

This wasn’t just a redesign. It was a rethink — grounded in real product insights and strategic design decisions.

Want your product’s landing page to actually convert?

Let it speak for itself — and let me help you do it right.

✨ Make Your First 5 Seconds Count

Your hero section is the handshake, the elevator pitch, and the first impression — all in one. If it’s not clear, engaging, and product-first, you’re losing people before they even scroll.

At HeroMaxx.design, I take your existing landing page and transform the hero into a high-converting, product-showcasing powerhouse — grounded in research, clarity, and interaction.

Because when your product is this good, it deserves to be seen at its best.

Let’s make your hero unforgettable →

How I am approaching becoming a better programmer...

Minhazur Rahman Ratul — Tue, 23 Apr 2024 17:17:29 +0000

Math puts your brain into logical thinking. It’s like a lifting session for your brain. Math will help you become a clear thinker and help you approach life more logically and help you solve any problem in a much easier way.

Today I was given a problem to implement a feature that would calculate the distance between two places and show the paths within those distances in a map. After some research and chatting with GPT, I came across the solution using the Haversine formula related to Trigonometry. Now I could implement that feature by implementing that mathematical algorithm and was thinking about doing that until I came across a helper function provided by the Google Maps api. Which would just take in the distances and calculate the number. Now since it is a development project, I would prefer using this helper function over writing one myself so I can focus on the core logic of the feature.

That's what I have been doing for a long time. Always picking up libraries to solve my problems quickly and easily. While it is a good development practice since I am focusing on shipping features but it kinda destroys my ability to create those functions myself. Understand the behind-the-scenes of those functions and be more logical. It's about developing those muscles.

I realized that due to the extensive amount of library and helper functions usage, I am losing my maths muscles. Ability to be more logical which I should be as a programmer. While I am using those helper functions and getting my job done, I could create them myself and become a better programmer.

Here's my CTA:

Put more focus on maths. Get better at maths
Leetcoding - Solve programming problems
Read books on DSA
Study and understand the behind-the-scenes of the libraries and frameworks I use daily.

A routine must be created in order to maintain those in the long term.

Let me know what advice you have regarding that.

It was a monologue blog, very different than my usual posts. I will share more of these in the coming days. Sharing my learnings and lessons.

How to internationalize Next.js app directory

Minhazur Rahman Ratul — Thu, 23 Nov 2023 06:00:00 +0000

In the ever-expanding digital landscape, reaching a global audience is not just a goal but a necessity. Whether you're building a personal portfolio or a sophisticated web application, making it accessible to users around the world is a game-changer. And that's where the magic of internationalization comes into play!

In this blog, we'll embark on a journey to internationalize your Next.js application with app directory, unlocking the power to speak to users in their preferred languages and creating a more inclusive and user-friendly experience. Don't worry if you're new to the concept – we'll guide you through the process step by step, making it an enjoyable and enlightening adventure.

So, grab your favorite coding beverage ☕, put on your explorer hat 🎩, and let's dive into the exciting world of internationalization with Next.js! 🚀🌐

Terminology

Locale: An identifier for a set of language and formatting preferences. This usually includes the preferred language of the user and possibly their geographic region.
- en-US: English as spoken in the United States
- de-DE: Deutsch as spoken in Germany

Setup

First, let's create a fresh next.js app. Make sure our versions of Next.js match. At the moment, I am using Next v14. To sync up with the package.json file, make sure you checkout this repository created just for this tutorial.

pnpm dlx create-next-app nextjs-appdir-intl

Make sure you are using app dir because this is what we will be covering today.

Install necessary packages:

pnpm add next-intl

We are all set 🚀

Folder structure

├── locales
│   ├── en-US.json
│   └── de-DE.json
├── next.config.js
├── middleware.ts
├── i18n.ts
├── formatters.ts
└── app
    └── [locale]
        ├── layout.tsx
        └── page.tsx

Localized routing

Let's sprinkle some magic into the user experience! Instead of making users figure out which language to choose, why not check what language their browser likes and take them straight to the right page?

Here's the plan:

English about page: /en-US/about
German about page: /de-DE/about

Let's edit the i18n.ts file:

import { getRequestConfig } from "next-intl/server";

export const supportedLocales = ["en-US", "de-DE"];
export const defaultLocale = "en-US";

export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`./locales/${locale}.json`)).default,
}));

next.config.js

const withNextIntl = require("next-intl/plugin")("./i18n.ts");

/** @type {import('next').NextConfig} */
const nextConfig = withNextIntl({});

module.exports = nextConfig;

middleware.ts

import createMiddleware from "next-intl/middleware";
import { defaultLocale, supportedLocales } from "./i18n";

export default createMiddleware({
  // A list of all locales that are supported
  locales: supportedLocales,

  // Used when no locale matches
  defaultLocale,
});

export const config = {
  // Match only internationalized pathnames
  matcher: ["/", "/(de-DE|en-US)/:path*"],
};

app/[locale]/layout.tsx

import { defaultLocale, supportedLocales } from "@/i18n";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { notFound } from "next/navigation";
import { ReactNode } from "react";
import "./globals.css";

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

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

interface Props {
  children: ReactNode;
  params: { locale: string };
}

export default function RootLayout(props: Props) {
  const { children, params } = props;

  if (!supportedLocales.includes(params.locale)) notFound();

  return (
    <html lang={params.locale || defaultLocale}>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

It's all it takes. Now if you run the app and refresh, you should be able to see the localized path on the URL.

Add translations

Now that we have got localized routing and we can keep track of the current locale, let's go ahead and add the translations that we are gonna need.

locales/en-US.json

{
  "home_page": {
    "top_card": "Get started by editing app/page.tsx",
    "cards": {
      "card_1": {
        "title": "Docs",
        "description": "Find in-depth information about Next.js features and API."
      },
      "card_2": {
        "title": "Learn",
        "description": "Learn about Next.js in an interactive course with quizzes!"
      },
      "card_3": {
        "title": "Templates",
        "description": "Explore starter templates for Next.js."
      },
      "card_4": {
        "title": "Deploy",
        "description": "Instantly deploy your Next.js site to a shareable URL with Vercel."
      }
    }
  },

  "common_words": {
    "by": "By"
  }
}

locales/de-DE.json

{
  "home_page": {
    "top_card": "Beginnen Sie mit der Bearbeitung von app/page.tsx",
    "cards": {
      "card_1": {
        "title": "Dokumente",
        "description": "Hier finden Sie ausführliche Informationen zu den Funktionen und der API von Next.js."
      },
      "card_2": {
        "title": "Learn",
        "description": "Erfahren Sie mehr über Next.js in einem interaktiven Kurs mit Quiz!"
      },
      "card_3": {
        "title": "Vorlagen",
        "description": "Entdecken Sie Starter-Vorlagen für Next.js."
      },
      "card_4": {
        "title": "Einsetzen",
        "description": "Stellen Sie Ihre Next.js-Site sofort mit Vercel unter einer gemeinsam nutzbaren URL bereit."
      }
    }
  },

  "common_words": {
    "by": "Von"
  }
}

Translating

Now that we have all the translations, it's time to apply them in the code. We will have to replace all the hard code texts.

Translating server components

export default async function Home(props: { params: { locale: string } }) {
  const t = await getTranslations({ locale: props.params.locale });
  return (
    <div>
      <h1>{t("home_page.top_card")}</h1>
    </div>
  );
}

Translating client components

import { useTranslations } from "next-intl";

export default function Home(props: { params: { locale: string } }) {
  const t = useTranslations();
  return (
    <div>
      <h1>{t("home_page.top_card")}</h1>
    </div>
  );
}

Let's apply this into app/[locale]/page.tsx file:

import { getTranslations } from "next-intl/server";
import Image from "next/image";

export default async function Home(props: { params: { locale: string } }) {
  const t = await getTranslations({ locale: props.params.locale });
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          {t("home_page.top_card")}
        </p>
        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
          <a
            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            {t("common_words.by")}{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className="dark:invert"
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>

      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
        <Image
          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />
      </div>

      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
        <a
          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            {t("home_page.cards.card_1.title")}{" "}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            {t("home_page.cards.card_1.description")}
          </p>
        </a>

        <a
          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            {t("home_page.cards.card_2.title")}{" "}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            {t("home_page.cards.card_2.description")}
          </p>
        </a>

        <a
          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            {t("home_page.cards.card_3.title")}{" "}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            {t("home_page.cards.card_3.description")}
          </p>
        </a>

        <a
          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            {t("home_page.cards.card_4.title")}{" "}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            {t("home_page.cards.card_4.description")}
          </p>
        </a>
      </div>
    </main>
  );
}

Translating Dates and Numbers

Now we have all the content localized but we still have to localize the dates and numbers. For that, we can use builtin JavaScript Intl.

formatters.ts

export class NumberFormatter {
  private readonly formatter: Intl.NumberFormat;

  constructor(locale: string, options?: Intl.NumberFormatOptions) {
    this.formatter = new Intl.NumberFormat(locale, options);
  }

  format(value: number): string {
    return this.formatter.format(value);
  }
}

export class DateFormatter {
  private readonly formatter: Intl.DateTimeFormat;

  constructor(locale: string, options?: Intl.DateTimeFormatOptions) {
    this.formatter = new Intl.DateTimeFormat(locale, {
      month: "long",
      year: "numeric",
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
      ...options,
    });
  }

  format(value: Date): string {
    return this.formatter.format(value);
  }
}

This is how they have to be initialized:

const dateFormatter = new DateFormatter(props.params.locale);
const numFormatter = new NumberFormatter(props.params.locale);

Let's put them into action in the app/[locale]/page.tsx file:

import { DateFormatter, NumberFormatter } from "@/formatters";
import { getTranslations } from "next-intl/server";
import Image from "next/image";

export default async function Home(props: { params: { locale: string } }) {
  const t = await getTranslations({ locale: props.params.locale });
  const dateFormatter = new DateFormatter(props.params.locale);
  const numFormatter = new NumberFormatter(props.params.locale);
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          {t("home_page.top_card")}
        </p>
        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
          <a
            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
          >
            {t("common_words.by")}{" "}
            <Image
              src="/vercel.svg"
              alt="Vercel Logo"
              className="dark:invert"
              width={100}
              height={24}
              priority
            />
          </a>
        </div>
      </div>

      <div className="relative gap-8 flex flex-col place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
        <Image
          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
          src="/next.svg"
          alt="Next.js Logo"
          width={180}
          height={37}
          priority
        />
        <div>
          <h2>The current time is {dateFormatter.format(new Date())}</h2>
          <p>It takes {numFormatter.format(0)} to start learning</p>
        </div>
      </div>

      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
        <a
          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            {t("home_page.cards.card_1.title")}{" "}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            {t("home_page.cards.card_1.description")}
          </p>
        </a>

        <a
          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            {t("home_page.cards.card_2.title")}{" "}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            {t("home_page.cards.card_2.description")}
          </p>
        </a>

        <a
          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            {t("home_page.cards.card_3.title")}{" "}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            {t("home_page.cards.card_3.description")}
          </p>
        </a>

        <a
          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
          target="_blank"
          rel="noopener noreferrer"
        >
          <h2 className={`mb-3 text-2xl font-semibold`}>
            {t("home_page.cards.card_4.title")}{" "}
            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
              -&gt;
            </span>
          </h2>
          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
            {t("home_page.cards.card_4.description")}
          </p>
        </a>
      </div>
    </main>
  );
}

Conclusion

And that's a wrap 🚀

Kudos to your patience for making it until the end. Hope you found it helpful, and it was a value for your time. If you have something to add or correct or got any question, please feel free to comment. That would help all of us out. Until then, see you in the next one.

References

Connect with me

Follow me on socials to consume the different types of content.

👤 Minhazur Rahman Ratul

Twitter (@developeratul)
Github (@developeratul)
Instagram (@developeratul)

PublishWise: The one place to write and publish your blogs

Minhazur Rahman Ratul — Tue, 18 Jul 2023 10:12:41 +0000

What I built

PublishWise is a tool that allows you to write and publish blogs from a single platform. It includes an ideal editor for writing blogs and publishing them on Dev.to and HashNode (with more to come). You can easily make updates to your blog that has been published in both Dev.to and HashNode by modifying it once on PublishWise. It simplifies cross-posting and consolidates your blogs onto a single platform. This project has a lot of potential and will continue to add more valuable features in the future.

Category Submission:

Best Overall Project
Most Visually Pleasing
Most Technical Impressive
Best Project built using Supabase as the main data provider for the refine app.

App Link

The project is live at PublishWise.ink

Screenshots

Description

This project was bootstrapped using Refine. It uses Supabase as the database, storage, and auth provider. The UI is built using the Mantine UI library together with Refine. It uses Refine data hooks for performing queries and mutations throughout the application. The whole application is built on top of the Next.js app directory and utilizes the new features of Next.js.

Link to Source Code

The source of this app is available on GitHub

Permissive License

Apache-2.0 license

Background (What made you decide to build this particular app? What inspired you?)

I have been publishing blogs for a while now. I usually publish them on multiple platforms meaning I cross-post them on Dev.to, HashNode, Medium, and Showcase. I find that process extremely repetitive, overwhelming, and time-consuming. When it comes to updating them, it's even more repetitive and exhausting. So an idea popped into my mind. Why not build an app that would let me write my article and publish them on all of these platforms at once? That was my purpose behind building PublishWise. It not only allows you to write and publish your blogs but also edit them from one platform and your edit will be reflected in all of your blogs. It is going to solve my own problem plus thousands of other technical writers out there. I have bigger plans for that app and would like to add more useful features to it so it can add more value to the users and I will be doing that in public on my Twitter account (@developeratul).

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

I learned a lot while building PublishWise. I studied the apis of my favorite blogging platforms. I got more familiar with the new Next.js app directory and React server components. I got exposure to amazing tools/libraries/services that would make my development job so much easier. Such as Refine, Supabase, Mantine UI, and Tiptap.

Additional Resources/Info

This blog was written and published through PublishWise 😉

How to implement subscription model using LemonSqueezy in Next.js (13.4 stable app router)

Minhazur Rahman Ratul — Sat, 27 May 2023 06:00:00 +0000

Introduction
Getting Started
Setup Next.js app
User Registration
Setup LemonSqueezy account
How subscription works
Implementing Subscription
- Creating a checkout
- Synchronization with Webhook
- Check the subscription status
- Manage subscription
Deployment
Conclusion
Connect with me

Introduction

Hey guys! In this blog post, we will implement a subscription model using LemonSqueezy in our Next.js app with the latest App router. If you're interested in learning about it, this is the post for you.

Getting Started

Let me tell you what I am going to cover in this blog post. First, we are going to bootstrap our Next.js project. Then we will set up our LemonSqueezy account. After that, we will learn how the subscription process works and how we are going to integrate LemonSqueezy subscriptions into our Next.js app. Then we will write code and finally deploy our app on Vercel. So we will cover everything from start to finish. This blog post expects you to have familiarity with React and Next.js (App router). If you know the basics you are good to go.

What we will be building today? We are going to build a simple app that will let the user create an account and subscribe to our product. Later he can cancel it anytime, change credit card credentials, and all that. So that’s the overview of what we are going to build.

Setup Next.js app

For this tutorial, I have created a GitHub repo that has a branch called starter You will have to follow a simple GitHub workflow and checkout to this branch to get the starter code to follow along with this tutorial. The final code will be in the main branch.

User Registration

Let’s create a very simple authentication where users can register and log in. No session management and all that other authorization stuff since that’s not the main purpose of this tutorial.

Let’s make some edits in the app/sign-up/page.tsx

"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React from "react";
import { toast } from "react-hot-toast";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { axios } from "~/lib/axios";
import { useAuth } from "~/providers/auth";
import { SignUpResponse } from "../api/auth/sign-up/route";

export default function SignUp() {
  const [input, setInput] = React.useState({ email: "", password: "" });
  const { setUser, user } = useAuth();
  const router = useRouter();
  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = ({
    target: { value, name },
  }) => {
    setInput((pre) => ({ ...pre, [name]: value }));
  };
  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
    try {
      e.preventDefault();

      const { email, password } = input;

      if (!email || !password) return;

      const { user, message } = await axios.post<any, SignUpResponse>("/api/auth/sign-up", {
        email,
        password,
      });

      setUser(user);
      router.push("/");
      toast.success(message);
    } catch (err) {
      //
    }
  };
  return (
    <div className="flex flex-col justify-center items-center gap-8 w-full">
      <div className="w-full max-w-md bg-white/5 p-8 rounded-lg border border-gray-900">
        <form onSubmit={handleSubmit} className="flex flex-col justify-center items-center gap-4">
          <h2 className="text-2xl">Sign up</h2>
          <Input
            required
            type="email"
            onChange={handleInputChange}
            name="email"
            placeholder="Enter email"
          />
          <Input
            required
            type="password"
            placeholder="Enter password"
            onChange={handleInputChange}
            name="password"
          />
          <Button type="submit" className="w-full">
            Sign up
          </Button>
        </form>
      </div>
      <div>
        <p>
          Already have an account?{" "}
          <Link className="text-blue-300 hover:underline underline-offset-4" href="/login">
            Login
          </Link>
        </p>
      </div>
    </div>
  );
}

Let create the API route. app/api/sign-up/route.ts

import bcrypt from "bcryptjs";
import { NextResponse } from "next/server";
import { prisma } from "~/prisma/db";
import { User } from "~/providers/auth";

export type SignUpResponse = {
  user: User;
  message: string;
};

export async function POST(req: Request) {
  try {
    const { email, password } = await req.json();

    const prevUser = await prisma.user.findUnique({
      where: { email },
    });

    if (prevUser) return NextResponse.json({ message: "Email already in use" }, { status: 409 });

    const hashedPassword = await bcrypt.hash(password, 12);

    const user = await prisma.user.create({
      data: { email, password: hashedPassword },
      select: { id: true, email: true },
    });

    return NextResponse.json({
      user,
      message: "Your account has been created!",
    } satisfies SignUpResponse);
  } catch (err) {
    if (err instanceof Error) {
      return NextResponse.json({ message: err.message }, { status: 500 });
    }
  }
}

We are done with sign-up. Now let’s implement login.

app/login/page.tsx

"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React from "react";
import { toast } from "react-hot-toast";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { axios } from "~/lib/axios";
import { useAuth } from "~/providers/auth";
import { SignUpResponse } from "../api/auth/sign-up/route";

export default function Login() {
  const [input, setInput] = React.useState({ email: "", password: "" });
  const { setUser, user } = useAuth();
  const router = useRouter();
  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = ({
    target: { value, name },
  }) => {
    setInput((pre) => ({ ...pre, [name]: value }));
  };
  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
    try {
      e.preventDefault();

      const { email, password } = input;

      if (!email || !password) return;

      const { user, message } = await axios.post<any, SignUpResponse>("/api/auth/login", {
        email,
        password,
      });

      setUser(user);
      router.push("/");
      toast.success(message);
    } catch (err) {
      //
    }
  };
  return (
    <div className="flex flex-col justify-center items-center gap-8 w-full">
      <div className="w-full max-w-md bg-white/5 p-8 rounded-lg border border-gray-900">
        <form onSubmit={handleSubmit} className="flex flex-col justify-center items-center gap-4">
          <h2 className="text-2xl">Login</h2>
          <Input
            required
            type="email"
            placeholder="Enter email"
            name="email"
            value={input.email}
            onChange={handleInputChange}
          />
          <Input
            required
            type="password"
            placeholder="Enter password"
            name="password"
            value={input.password}
            onChange={handleInputChange}
          />
          <Button type="submit" className="w-full">
            Login
          </Button>
        </form>
      </div>
      <div>
        <p>
          Don&apos;t have an account?{" "}
          <Link className="text-blue-300 hover:underline underline-offset-4" href="/sign-up">
            Sign up
          </Link>
        </p>
      </div>
    </div>
  );
}

app/api/auth/login/route.ts

import bcrypt from "bcryptjs";
import { NextResponse } from "next/server";
import { prisma } from "~/prisma/db";

export async function POST(req: Request) {
  const { email: emailInput, password: passwordInput } = await req.json();

  const user = await prisma.user.findUnique({
    where: { email: emailInput },
    select: { id: true, email: true, password: true },
  });

  if (!user) return NextResponse.json({ message: "Your account does not exist" }, { status: 404 });

  const { id, password, email } = user;

  const passwordMatched = await bcrypt.compare(passwordInput, password);

  if (!passwordMatched)
    return NextResponse.json({ message: "Invalid credentials" }, { status: 403 });

  return NextResponse.json({ user: { id, email }, message: "Welcome back!" });
}

That’s all about user registration.

Setup LemonSqueezy account

Before I start discussing how subscription works, let’s get our LemonSqueezy account ready. For that, I would highly suggest following their guide.

How subscription works

A subscription is a signed agreement between a supplier and customer that the customer will receive and provide payment for regular products or services. Subscription payments are collected in different intervals like Month, Week, Year, etc.

Before the user pays, he must subscribe to our product. Once he subscribes, he will automatically get charged after the specified interval from his credit card until he cancels the subscription which he can do anytime.

Once the user has subscribed and paid for our product, we use a webhook that will send a request to our API endpoint with a payload. We will make changes in our database according to that payload and the customer will get access to the premium plan or whatever.

So that’s basically how subscription works. Now let’s start implementing it in our code.

Implementing Subscription

If you have got your LemonSqueezy account ready, go to this page and generate a new API key. Also, create a test product. Here’s a guide on that. Now add this line in our .env file:

LEMONSQUEEZY_API_KEY="[YOUR API KEY]"

We need those credentials to proceed further:

Store id
Product id

You can get this through the API they provide. Make an API request to this endpoint https://api.lemonsqueezy.com/v1/products while having the authorization header present in your request.

The first marked credential is the Product id and the second one is the Store id Now let’s add them to our .env file:

LEMON_SQUEEZY_STORE_ID="[YOUR STORE ID]"
LEMONS_SQUEEZY_PRODUCT_ID="[YOUR PRODUCT ID]"

Creating a checkout

Now that we have the required credentials, let create a checkout option in our app. First, we will add a button on the home page.

app/page.tsx

"use client";
import { useRouter } from "next/navigation";
import React from "react";
import { Button } from "~/components/ui/button";
import { axios } from "~/lib/axios";
import { useAuth } from "~/providers/auth";
import { CreateCheckoutResponse } from "./api/payment/subscribe/route";

export default function Home() {
  const { isAuthenticated, user } = useAuth();
  const router = useRouter();

  React.useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login");
    }
  }, [isAuthenticated, router]);

  if (!isAuthenticated || !user) return <></>;

  const handleClick = async () => {
    try {
      const { checkoutURL } = await axios.post<any, CreateCheckoutResponse>(
        "/api/payment/subscribe",
        { userId: user.id }
      );
      window.location.href = checkoutURL;
    } catch (err) {
      //
    }
  };

  return (
    <div className="w-full max-w-md bg-white/5 border border-gray-900 p-8 rounded-lg">
      <div className="flex flex-col gap-4">
        <h2 className="text-2xl">Your profile</h2>
        <Button onClick={handleClick}>Subscribe</Button>
      </div>
    </div>
  );
}

Before proceeding furture, we need to install a package:

yarn add lemonsqueezy.ts

This is an unofficial wrapper around the official API. Lets initialize it.

lib/lemons.ts

import { LemonsqueezyClient } from "lemonsqueezy.ts";

export const client = new LemonsqueezyClient(process.env.LEMONSQUEEZY_API_KEY as string);

Let’s create the API route for creating a checkout.

app/api/payment/subscribe/route.ts

import type { CreateCheckoutResult } from "lemonsqueezy.ts/dist/types";
import { NextResponse } from "next/server";
import { axios } from "~/lib/axios";
import { client } from "~/lib/lemons";
import { prisma } from "~/prisma/db";

export type CreateCheckoutResponse = {
  checkoutURL: string;
};

export async function POST(request: Request) {
  try {
    const { userId } = await request.json();

    const user = await prisma.user.findUnique({
      where: { id: userId },
      select: { id: true, email: true },
    });

    if (!user) return NextResponse.json({ message: "Your account was not found" }, { status: 404 });

    const variant = (
      await client.listAllVariants({ productId: process.env.LEMONS_SQUEEZY_PRODUCT_ID })
    ).data[0];

    const checkout = (await axios.post(
      "https://api.lemonsqueezy.com/v1/checkouts",
      {
        data: {
          type: "checkouts",
          attributes: { checkout_data: { email: user.email, custom: [user.id] } },
          relationships: {
            store: { data: { type: "stores", id: process.env.LEMON_SQUEEZY_STORE_ID } },
            variant: { data: { type: "variants", id: variant.id } },
          },
        },
      },
      { headers: { Authorization: `Bearer ${process.env.LEMONSQUEEZY_API_KEY}` } }
    )) as CreateCheckoutResult;

    return NextResponse.json({ checkoutURL: checkout.data.attributes.url }, { status: 201 });
  } catch (err: any) {
    return NextResponse.json({ message: err.message || err }, { status: 500 });
  }
}

Let me explain this code to you. First, we are checking if the user exists or not. Secondly, we are listing all the variants of our product. In Stripe, we call it Price but in LemonSqueezy, we call it a Variant. A variant id is required for creating a checkout. If you have not created any variants for your product, LemonSqueezy automatically created a default variant for your product. In that case, that is what we are retrieving. Thirdly, We are creating a checkout through the API. I have passed the user email and the Id as the payload. This will be needed when we will deal with webhooks. I have also passed some required fields in the body and a auth header. Finally, send the checkout URL within the response. The client will redirect the user to this URL.

Synchronization with Webhook

Now that we are done with checkout where users can pay and subscribe to our product, it’s time to keep in sync with them. To create and test webhooks locally, we can use a service like ngrok. I have a Twitter thread on how it’s done. So not going into much detail.

// Detect dark theme var iframe = document.getElementById('tweet-1645260200906043404-609'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1645260200906043404&theme=dark" }

Run the following command once you have got ngrok installed on your computer.

ngrok http 3000 # or wherever your app is running

Copy this URL. Go to this page on your LemonSqueezy dashboard, create a new webhook, and add this as a callback URL which should look like this http://[YOUR URL]/payment/webhook. We still have to create this route. Then, add a signing secret. We will listen to those events:

subscription_created
subscription_updated

Now we have to update our .env file.

LEMONS_SQUEEZY_SIGNATURE_SECRET="[YOUR SECRET]"

Whenever a user checks out and subscribes to our product, LemonSqueezy is going to send a post request to the endpoint specified in the webhook with a payload. So now let’s create that route. Before that, run the following command to install a package that will be used to validate the webhook signature.

yarn add raw-body

Now lets prepare our route for handling webhook requests.

api/api/payment/webhook/route.ts

import { Buffer } from "buffer";
import crypto from "crypto";
import { headers } from "next/headers";
import { NextResponse } from "next/server";
import rawBody from "raw-body";
import { Readable } from "stream";
import { client } from "~/lib/lemons";
import { prisma } from "~/prisma/db";

export async function POST(request: Request) {
  const body = await rawBody(Readable.from(Buffer.from(await request.text())));
  const headersList = headers();
  const payload = JSON.parse(body.toString());
  const sigString = headersList.get("x-signature");
  const secret = process.env.LEMONS_SQUEEZY_SIGNATURE_SECRET as string;
  const hmac = crypto.createHmac("sha256", secret);
  const digest = Buffer.from(hmac.update(body).digest("hex"), "utf8");
  const signature = Buffer.from(
    Array.isArray(sigString) ? sigString.join("") : sigString || "",
    "utf8"
  );

  // Check if the webhook event was for this product or not
  if (
    parseInt(payload.data.attributes.product_id) !==
    parseInt(process.env.LEMONS_SQUEEZY_PRODUCT_ID as string)
  ) {
    return NextResponse.json({ message: "Invalid product" }, { status: 403 });
  }

  // validate signature
  if (!crypto.timingSafeEqual(digest, signature)) {
    return NextResponse.json({ message: "Invalid signature" }, { status: 403 });
  }

  const userId = payload.meta.custom_data[0];

  // Check if custom defined data i.e. the `userId` is there or not
  if (!userId) {
    return NextResponse.json({ message: "No userId provided" }, { status: 403 });
  }

  switch (payload.meta.event_name) {
    case "subscription_created": {
      const subscription = await client.retrieveSubscription({ id: payload.data.id });

      await prisma.user.update({
        where: { id: userId },
        data: {
          subscriptionId: `${subscription.data.id}`,
          customerId: `${payload.data.attributes.customer_id}`,
          variantId: subscription.data.attributes.variant_id,
          currentPeriodEnd: subscription.data.attributes.renews_at,
        },
      });
    }

    case "subscription_updated": {
      const subscription = await client.retrieveSubscription({ id: payload.data.id });

      const user = await prisma.user.findUnique({
        where: { subscriptionId: `${subscription.data.id}` },
        select: { subscriptionId: true },
      });

      if (!user || !user.subscriptionId) return;

      await prisma.user.update({
        where: { subscriptionId: user.subscriptionId },
        data: {
          variantId: subscription.data.attributes.variant_id,
          currentPeriodEnd: subscription.data.attributes.renews_at,
        },
      });
    }

    default: {
      return;
    }
  }
}

Let me explain this code to you. First, we are validating the webhook signature for security concerns. Secondly, we are checking if the webhook was for the specific product which we are integrating into this app. Then we are checking if the payload contains our custom-defined credential in that case, it’s the userId. After that, we have two switch cases. One for the subscription_created and the other for the subscription_updated event.

subscription_created Whenever a user subscribes and pays for our product, this event is called. When this event is called, we wanna capture the subcriptionId, customerId, variantId, and the currentPeriodEnd in our database*.*
subscription_updated Whenever the subscription gets updated, this event is called. Updating a subscription refers to Paying at the period’s end, canceling the subscription, etc. When this event is called, we wanna update our variantId (just in case, the user picks a different pricing/variant) and the currentPeriodEnd.

I will explain the purpose of storing currentPeriodEnd later in this blog when will check the user’s subscription status.

Check the subscription status

Now that, we are done with checkout and synchronization, it’s time to fetch the user’s subscription status and limit his account accordingly.

lib/subscription.ts

import { prisma } from "~/prisma/db";
import { client } from "./lemons";

export async function getUserSubscriptionPlan(userId: string) {
  const user = await prisma.user.findUnique({
    where: { id: userId },
    select: {
      subscriptionId: true,
      currentPeriodEnd: true,
      customerId: true,
      variantId: true,
    },
  });

  if (!user) throw new Error("User not found");

  // Check if user is on a pro plan.
  const isPro =
    user.variantId &&
    user.currentPeriodEnd &&
    user.currentPeriodEnd.getTime() + 86_400_000 > Date.now();

  const subscription = await client.retrieveSubscription({ id: user.subscriptionId });

  // If user has a pro plan, check cancel status on Stripe.
  let isCanceled = false;

  if (isPro && user.subscriptionId) {
    isCanceled = subscription.data.attributes.cancelled;
  }

  return {
    ...user,
    currentPeriodEnd: user.currentPeriodEnd?.getTime(),
    isCanceled,
    isPro,
    updatePaymentMethodURL: subscription.data.attributes.urls.update_payment_method,
  };
}

In this code above, we are first checking if the user exists or not. Then we are checking if the user is on the pro plan or not and store it in the isPro var. This was the purpose of storing the currentPeriodEnd Then if the user is on the pro plan, check if he has canceled the plan or not. Finally, return all of these within an object. We will use this function to retrieve if the user is on the pro plan or not and limit his account accordingly.

Now we will be making some updates to our home page. Until now, the home page was being rendered as a client component. Now we will render it as a server component. We have to make make our authentication persistent as well. So there will be a bit more addition to it.

app/page.tsx

import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { getUserSubscriptionPlan } from "~/lib/subscription";
import SubscribeButton from "./SubscribeButton";

export default async function Home() {
  const cookiesList = cookies();
  const userId = cookiesList.get("userId")?.value || "";

  if (!userId) return redirect("/login");

  const { isPro } = await getUserSubscriptionPlan(userId);
  return (
    <div className="w-full max-w-md bg-white/5 border border-gray-900 p-8 rounded-lg">
      <div className="flex flex-col gap-4">
        <h2 className="text-2xl">Your profile</h2>
        {isPro ? <p>You&apos;re subscribed</p> : <SubscribeButton />}
      </div>
    </div>
  );
}

Fetching the subscription status and hide the subscribe button accordingly.

app/SubscribeButton.tsx

"use client";
import { useRouter } from "next/navigation";
import React from "react";
import { Button } from "~/components/ui/button";
import { axios } from "~/lib/axios";
import { useAuth } from "~/providers/auth";
import { CreateCheckoutResponse } from "./api/payment/subscribe/route";

export default function SubscribeButton() {
  const { isAuthenticated, user } = useAuth();
  const router = useRouter();

  React.useEffect(() => {
    if (!isAuthenticated) {
      router.push("/login");
    }
  }, [isAuthenticated, router]);

  if (!isAuthenticated || !user) return <></>;

  const handleClick = async () => {
    try {
      const { checkoutURL } = await axios.post<any, CreateCheckoutResponse>(
        "/api/payment/subscribe",
        { userId: user.id }
      );
      window.location.href = checkoutURL;
    } catch (err) {
      //
    }
  };

  return <Button onClick={handleClick}>Subscribe</Button>;
}

Since the home page is a RSC now, we had to separate this button to a client component.

app/login/page.tsx One Small addition (Storing cookie)

"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React from "react";
import { toast } from "react-hot-toast";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { axios } from "~/lib/axios";
import { useAuth } from "~/providers/auth";
import { SignUpResponse } from "../api/auth/sign-up/route";

export default function Login() {
  const [input, setInput] = React.useState({ email: "", password: "" });
  const { setUser, user } = useAuth();
  const router = useRouter();
  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = ({
    target: { value, name },
  }) => {
    setInput((pre) => ({ ...pre, [name]: value }));
  };
  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
    try {
      e.preventDefault();

      const { email, password } = input;

      if (!email || !password) return;

      const { user, message } = await axios.post<any, SignUpResponse>("/api/auth/login", {
        email,
        password,
      });

      setUser(user);
      // ADDITION: Store the user id in a cookie 👇
      document.cookie = `userId=${user?.id}`;
      router.push("/");
      toast.success(message);
    } catch (err) {
      //
    }
  };
  return (
    <div className="flex flex-col justify-center items-center gap-8 w-full">
      <div className="w-full max-w-md bg-white/5 p-8 rounded-lg border border-gray-900">
        <form onSubmit={handleSubmit} className="flex flex-col justify-center items-center gap-4">
          <h2 className="text-2xl">Login</h2>
          <Input
            required
            type="email"
            placeholder="Enter email"
            name="email"
            value={input.email}
            onChange={handleInputChange}
          />
          <Input
            required
            type="password"
            placeholder="Enter password"
            name="password"
            value={input.password}
            onChange={handleInputChange}
          />
          <Button type="submit" className="w-full">
            Login
          </Button>
        </form>
      </div>
      <div>
        <p>
          Don&apos;t have an account?{" "}
          <Link className="text-blue-300 hover:underline underline-offset-4" href="/sign-up">
            Sign up
          </Link>
        </p>
      </div>
    </div>
  );
}

app/sign-up/page.tsx One Small addition (same as login)

"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React from "react";
import { toast } from "react-hot-toast";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import { axios } from "~/lib/axios";
import { useAuth } from "~/providers/auth";
import { SignUpResponse } from "../api/auth/sign-up/route";

export default function SignUp() {
  const [input, setInput] = React.useState({ email: "", password: "" });
  const { setUser, user } = useAuth();
  const router = useRouter();
  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = ({
    target: { value, name },
  }) => {
    setInput((pre) => ({ ...pre, [name]: value }));
  };
  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
    try {
      e.preventDefault();

      const { email, password } = input;

      if (!email || !password) return;

      const { user, message } = await axios.post<any, SignUpResponse>("/api/auth/sign-up", {
        email,
        password,
      });

      setUser(user);
      // ADDITION: Store the user id in a cookie 👇
      document.cookie = `userId=${user?.id}`;
      router.push("/");
      toast.success(message);
    } catch (err) {
      //
    }
  };
  return (
    <div className="flex flex-col justify-center items-center gap-8 w-full">
      <div className="w-full max-w-md bg-white/5 p-8 rounded-lg border border-gray-900">
        <form onSubmit={handleSubmit} className="flex flex-col justify-center items-center gap-4">
          <h2 className="text-2xl">Sign up</h2>
          <Input
            required
            type="email"
            onChange={handleInputChange}
            name="email"
            placeholder="Enter email"
          />
          <Input
            required
            type="password"
            placeholder="Enter password"
            onChange={handleInputChange}
            name="password"
          />
          <Button type="submit" className="w-full">
            Sign up
          </Button>
        </form>
      </div>
      <div>
        <p>
          Already have an account?{" "}
          <Link className="text-blue-300 hover:underline underline-offset-4" href="/login">
            Login
          </Link>
        </p>
      </div>
    </div>
  );
}

Now those changes are made, this feature should be functional.

Manage subscription

Now that the user has subscribed, he should be able to cancel it anytime he wants so he will not get changed anymore also resume the subscription if he wants to continue again. We will create another component for that in the home page.

Create the ManageSubscription component.

app\ManageSubscription.tsx

"use client";
import { useRouter } from "next/navigation";
import { toast } from "react-hot-toast";
import { Button } from "~/components/ui/button";
import { axios } from "~/lib/axios";

export default function ManageSubscription(props: {
  userId: string;
  isCanceled: boolean;
  currentPeriodEnd?: number;
}) {
  const { userId, isCanceled, currentPeriodEnd } = props;
  const router = useRouter();

  // If the subscription is cancelled, let the user resume his plan
  if (isCanceled && currentPeriodEnd) {
    const handleResumeSubscription = async () => {
      try {
        const { message } = await axios.post<any, { message: string }>(
          "/api/payment/resume-subscription",
          { userId }
        );
        router.refresh();
        toast.success(message);
      } catch (err) {
        //
      }
    };

    return (
      <div className="flex flex-col justify-between items-center gap-4">
        <p>
          You have cancelled the subscription but you still have access to our service until{" "}
          {new Date(currentPeriodEnd).toDateString()}
        </p>
        <Button className="bg-blue-300 hover:bg-blue-500 w-full" onClick={handleResumeSubscription}>
          Resume plan
        </Button>
      </div>
    );
  }

  // If the user is subscribed, let him cancel his plan
  const handleCancelSubscription = async () => {
    try {
      const { message } = await axios.post<any, { message: string }>(
        "/api/payment/cancel-subscription",
        { userId }
      );
      router.refresh();
      toast.success(message);
    } catch (err) {
      //
    }
  };

  return (
    <div className="flex flex-col justify-between items-center gap-4">
      <p>You are subscribed to our product. Congratulations</p>
      <Button className="bg-red-300 hover:bg-red-500 w-full" onClick={handleCancelSubscription}>
        Cancel
      </Button>
    </div>
  );
}

Let’s add this component to our home page:

app/page.tsx

import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { getUserSubscriptionPlan } from "~/lib/subscription";
import ManageSubscription from "./ManageSubscription";
import SubscribeButton from "./SubscribeButton";

export default async function Home() {
  const cookiesList = cookies();
  const userId = cookiesList.get("userId")?.value || "";

  if (!userId) return redirect("/login");

  const { isPro, isCanceled, currentPeriodEnd } = await getUserSubscriptionPlan(userId);
  return (
    <div className="w-full max-w-md bg-white/5 border border-gray-900 p-8 rounded-lg">
      <div className="flex flex-col gap-4">
        <h2 className="text-2xl">Your profile</h2>
        {isPro ? (
          <ManageSubscription
            userId={userId}
            isCanceled={isCanceled}
            currentPeriodEnd={currentPeriodEnd}
          />
        ) : (
          <SubscribeButton />
        )}
      </div>
    </div>
  );
}

Now we have to create the API routes which are being used in the ManageSubscription component. Let’s do that.

app\api\payment\cancel-subscription\route.ts

import { NextResponse } from "next/server";
import { axios } from "~/lib/axios";
import { getUserSubscriptionPlan } from "~/lib/subscription";
import { prisma } from "~/prisma/db";

export async function POST(request: Request) {
  try {
    const { userId } = await request.json();

    const user = await prisma.user.findUnique({
      where: { id: userId },
      select: {
        id: true,
        email: true,
        subscriptionId: true,
        variantId: true,
        currentPeriodEnd: true,
      },
    });

    if (!user) return NextResponse.json({ message: "User not found" }, { status: 404 });

    const { isPro } = await getUserSubscriptionPlan(user.id);

    if (!isPro) return NextResponse.json({ message: "You are not subscribed" }, { status: 402 });

    await axios.patch(
      `https://api.lemonsqueezy.com/v1/subscriptions/${user.subscriptionId}`,
      {
        data: {
          type: "subscriptions",
          id: user.subscriptionId,
          attributes: {
            cancelled: true, // <- ALl the line of code just for this
          },
        },
      },
      {
        headers: {
          Accept: "application/vnd.api+json",
          "Content-Type": "application/vnd.api+json",
          Authorization: `Bearer ${process.env.LEMONSQUEEZY_API_KEY}`,
        },
      }
    );

    const endsAt = user.currentPeriodEnd?.toLocaleString();

    return NextResponse.json({
      message: `Your subscription has been cancelled. You will still have access to our product until '${endsAt}'`,
    });
  } catch (err) {
    console.log({ err });
    if (err instanceof Error) {
      return NextResponse.json({ message: err.message }, { status: 500 });
    }
  }
}

This route lets the user cancel his plan. Once his plan is canceled, the subscription object will get updated which belongs to this user and a value of true will be assigned to the cancelled property. Remember we used this property while checking if the user has canceled his plan or not?

// lib\subscription.ts
isCanceled = subscription.data.attributes.cancelled;

app\api\payment\resume-subscription\route.ts

import { NextResponse } from "next/server";
import { axios } from "~/lib/axios";
import { getUserSubscriptionPlan } from "~/lib/subscription";
import { prisma } from "~/prisma/db";

export async function POST(request: Request) {
  try {
    const { userId } = await request.json();

    const user = await prisma.user.findUnique({
      where: { id: userId },
      select: {
        id: true,
        email: true,
        subscriptionId: true,
        variantId: true,
        currentPeriodEnd: true,
      },
    });

    if (!user) return NextResponse.json({ message: "User not found" }, { status: 404 });

    const { isPro } = await getUserSubscriptionPlan(user.id);

    if (!isPro) return NextResponse.json({ message: "You are not subscribed" }, { status: 402 });

    await axios.patch(
      `https://api.lemonsqueezy.com/v1/subscriptions/${user.subscriptionId}`,
      {
        data: {
          type: "subscriptions",
          id: user.subscriptionId,
          attributes: {
            cancelled: false, // <- Cancel
          },
        },
      },
      {
        headers: {
          Accept: "application/vnd.api+json",
          "Content-Type": "application/vnd.api+json",
          Authorization: `Bearer ${process.env.LEMONSQUEEZY_API_KEY}`,
        },
      }
    );

    return NextResponse.json({
      message: `Your subscription has been resumed.`,
    });
  } catch (err) {
    console.log({ err });
    if (err instanceof Error) {
      return NextResponse.json({ message: err.message }, { status: 500 });
    }
  }
}

This will do the opposite of the previous route.

We’re done. The subscription management component should now be functional.

In addition, the user should be able to change his credit card and other credentials so lets add this option.

app\ManageSubscription.tsx

"use client";
import { useRouter } from "next/navigation";
import { toast } from "react-hot-toast";
import { Button } from "~/components/ui/button";
import { axios } from "~/lib/axios";

export default function ManageSubscription(props: {
  userId: string;
  isCanceled: boolean;
  currentPeriodEnd?: number;
  updatePaymentMethodURL: string;
}) {
  const { userId, isCanceled, currentPeriodEnd, updatePaymentMethodURL } = props;
  const router = useRouter();

  // If the subscription is cancelled, let the user resume his plan
  if (isCanceled && currentPeriodEnd) {
    const handleResumeSubscription = async () => {
      try {
        const { message } = await axios.post<any, { message: string }>(
          "/api/payment/resume-subscription",
          { userId }
        );
        router.refresh();
        toast.success(message);
      } catch (err) {
        //
      }
    };

    return (
      <div className="flex flex-col justify-between items-center gap-4">
        <p>
          You have cancelled the subscription but you still have access to our service until{" "}
          {new Date(currentPeriodEnd).toDateString()}
        </p>
        <Button className="w-full" onClick={handleResumeSubscription}>
          Resume plan
        </Button>
        <a
          href={updatePaymentMethodURL}
          className="w-full"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Button className="w-full">Update payment method</Button>
        </a>
      </div>
    );
  }

  // If the user is subscribed, let him cancel his plan
  const handleCancelSubscription = async () => {
    try {
      const { message } = await axios.post<any, { message: string }>(
        "/api/payment/cancel-subscription",
        { userId }
      );
      router.refresh();
      toast.success(message);
    } catch (err) {
      //
    }
  };

  return (
    <div className="flex flex-col justify-between items-center gap-4">
      <p>You are subscribed to our product. Congratulations</p>
      <Button className="bg-red-300 hover:bg-red-500 w-full" onClick={handleCancelSubscription}>
        Cancel
      </Button>
      <a href={updatePaymentMethodURL} className="w-full" target="_blank" rel="noopener noreferrer">
        <Button className="w-full">Update payment method</Button>
      </a>
    </div>
  );
}

Added two buttons that will redirect the user to the page where he can perform that action. Note that, this component now accepts an additional prop so make sure you are passing it from the parent component. In that case it’s the home page.

import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { getUserSubscriptionPlan } from "~/lib/subscription";
import ManageSubscription from "./ManageSubscription";
import SubscribeButton from "./SubscribeButton";

export default async function Home() {
  const cookiesList = cookies();
  const userId = cookiesList.get("userId")?.value || "";

  if (!userId) return redirect("/login");

  const { isPro, isCanceled, currentPeriodEnd, updatePaymentMethodURL } =
    await getUserSubscriptionPlan(userId);

  return (
    <div className="w-full max-w-md bg-white/5 border border-gray-900 p-8 rounded-lg">
      <div className="flex flex-col gap-4">
        <h2 className="text-2xl">Your profile</h2>
        {isPro ? (
          <ManageSubscription
            userId={userId}
            isCanceled={isCanceled}
            currentPeriodEnd={currentPeriodEnd}
            updatePaymentMethodURL={updatePaymentMethodURL}
          />
        ) : (
          <SubscribeButton />
        )}
      </div>
    </div>
  );
}

That’s all about managing subscriptions.

Deployment

We are done developing this app and it is ready to be shipped. You can use Vercel, Render, or any other platform for the deployment. It’s a straightforward process. Import your repo > Enter env variables and deploy.

Conclusion

That’s all folks. Hope that article was able to add value and you have found a way to receive payments for your SaaS. I wish you all the best in implementing that feature. The full source code can be found on my Github. If you think there is any bug in my code, please feel free to let me know or you can send a PR on GitHub. Thanks for reading this article until the end and I will see you in the next one ✌️

Connect with me

👤 Minhazur Rahman Ratul

It took me hours to write that article, but you need only a few to support it. You can support me by liking it, sharing it, and buying me a coffee.

You are one tool away from becoming a 10x developer! 🚀

Minhazur Rahman Ratul — Fri, 24 Feb 2023 17:59:00 +0000

Introduction

Hello everyone 👋. I hope you're all doing well. I recently posted an article about how to use ChatGPT to increase your development efficiency. I was recently introduced to Bito AI and am amazed by its ability to help developers to increase their efficiency. Today's article will introduce you to Bito AI and demonstrate how you may use it to become a 10x developer or at least save a couple of hours a day. Let’s begin.

What is Bito AI 🤔

Bito AI is an AI assistant integrated right into your editor. It uses ChatGPT under the hood. But it is specially trained on billions and millions of code to get the best answer for your question, it’s pretty incredible what Bito AI can help you do without having to search the web. It has the following capabilities:

☝️ Command Syntax
🥇 Test Cases
🔑 Explain code
🔥 Generate Code
✍️ Comment Method
⚡ Improve Performance
🔒 Check Security

Bito’s AI Assistant is like a Swiss Army knife that can do so many things – and make you that elusive 10x developer! It works right in your favorite IDE (we support Visual Studio Code and all JetBrains IDEs like IntelliJ, PyCharm, GoLand, etc) and is also available as a Chrome Extension.

This product was launched recently. The maintainers are constantly working to improve it. They recently added a bunch of shortcut options and keyboard shortcuts. They have also done a lot around prompt engineering to get you the best answer with no work on your part.

Check out their official website.
Download their VS code extension

Now, let’s talk about how to utilize this tool to increase productivity.

How Can Bito AI Be Used to Boost Developer Productivity?

Bito AI works similarly to ChatGPT, but it is integrated directly into your IDE. So you can stay focused. I have it in my VS code setup. I follow a three-column layout in my VS Code editor, which makes using this tool extremely enjoyable.

If you have opened Bito AI, It is now available in your context menu.

Let’s go over some of them one by one to give you a demo.

🔥 Generate Code

You can ask Bito any technical question, and it will answer it while also writing code. I'll ask it how to use nodemailer to send emails in nodejs. And this is the response I got.

// To send an email using the nodemailer module in nodejs, you will need to install the nodemailer package first. After that, add the following code to your nodejs app:

const nodemailer = require("nodemailer");
let transporter = nodemailer.createTransport({
  service: "gmail",
  auth: {
    user: "your-email-address@gmail.com", // REPLACE WITH YOUR EMAIL ADDRESS
    pass: "your-password", // REPLACE WITH YOUR PASSWORD
  },
});
let mailOptions = {
  from: "your-email-address@gmail.com", // REPLACE WITH YOUR EMAIL ADDRESS
  to: "recipient-email-address@gmail.com", // REPLACE WITH RECIPIENT'S EMAIL ADDRESS
  subject: "Your Subject Line",
  text: "Your message goes here!",
};
transporter.sendMail(mailOptions, function (err, data) {
  if (err) {
    console.log("Error occurs");
  } else {
    console.log("Email sent!");
  }
});

This is the optimal solution to the question I asked. It saved me a lot of time and provided the most accurate solution while I was in my editor.

🪜 Explain Steps

Bito can explain the procedure of your code. All you have to do is just select the portion of your code you want it to explain by steps and then click on Explain Steps as shown in the previous screenshot. For a simple example, I will ask it to explain this code below:

const handleToggleAnswer = () => {
  if (label === "") return;

  if (["MCQ", "TRUE-OR-FALSE"].includes(type)) {
    form.setFieldValue("answers", [label]);
  } else if (type === "CHECKBOXES") {
    // if the answer is already included in the list remove it
    // otherwise add it. just like how checkboxes work
    if (answers.includes(label)) {
      const filteredAnswers = answers.filter((answer) => answer !== label);
      form.setFieldValue("answers", filteredAnswers);
    } else {
      form.setFieldValue("answers", [...answers, label]);
    }
  }
};

Here’s what response I got:

1. The code is defining a function named handleToggleAnswer.
2. It is using an if statement to check if the label is an empty string. If it is, the function will return.
3. The next if statement is using the Array.includes() method to check if the type is either "MCQ" or "TRUE-OR-FALSE". If it is, the form's field value of answers will be set to the label.
4. If the type is "CHECKBOXES", the code will use the Array.includes() method to check if the answers array includes the label.
5. If it does, the code will use the Array.filter() method to create a new array with all the answers except for the label. This filtered array will be set as the form's field value of answers.
6. If the label is not in the answers array, the code will use the spread operator to add the label to the answers array and set it as the form's field value of answers.

Excellent and clear response. I truly loved the syntax highlighting feature that they released a few days ago.

✍️ Generate Comment

Bito AI can also generate comments for your code. I use this feature whenever I'm finished writing a function and want to document it. Let’s try generating a comment for the same code that we just wrote:

const handleToggleAnswer = () => {
  if (label === "") return;

  if (["MCQ", "TRUE-OR-FALSE"].includes(type)) {
    form.setFieldValue("answers", [label]);
  } else if (type === "CHECKBOXES") {
    // if the answer is already included in the list remove it
    // otherwise add it. just like how checkboxes work
    if (answers.includes(label)) {
      const filteredAnswers = answers.filter((answer) => answer !== label);
      form.setFieldValue("answers", filteredAnswers);
    } else {
      form.setFieldValue("answers", [...answers, label]);
    }
  }
};

Here’s the response that I got:

// This function handles the toggle of the answer when a user interacts with the form. If the label is empty, no action is taken. For MCQ and TRUE-OR-FALSE types, the label is set as the answer. For CHECKBOXES types, the label is added or removed from the answers array based on whether it is already included or not.

Excellent!

⚡ Performance Check

I have written a function that takes in a number, n, and returns the sum of all numbers from 0 to n.

function sum(n) {
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += i;
  }
  return result;
}

To improve the performance of the code, we could use a math formula. Let’s see if Bito AI can figure it out and fix the performance of this code. Here’s the response:

Code Performance Issues:
1. This code is inefficient because it uses a loop to add all the numbers from 0 to n. This is a time-consuming process that can be improved by using a mathematical formula.
 Rewritten Code:
function sum(n) {
  return n * (n + 1) / 2;
}

I must say I am beyond impressed with Bito AI! It saved me from a lot of headaches being right in my editor!

🔒 Security Check

You can eliminate potential security issues in your code by using Bito. Let’s check the security status of the function we wrote previously. Here’s the response:

Code Security Issues:
1. No input validation: The code does not check if the input given is valid or not.
 Rewritten Code:
function sum(n) {
  if (n < 0 || typeof n !== 'number') {
    return 'Please enter a valid number';
  }
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += i;
  }
  return result;
}

Doing input validation is very important for writing secure and bug-free code. Bito did that for me.

Summary

Overall, Bito is an amazing tool to have as a developer. It can do things that ChatGPT can do. But as a developer, having it right in your editor is much more productive and saves a lot of time. I showed you the features that I love. It has way more features than that. They have amazing features for teams. They are coming soon with a diff view of the IDEs. So you can compare the code you selected and that Bito fixed and then automatically accept the changes. I would highly encourage you to download their VS code extension and get your hands dirty with Bito. I am pretty sure you will love it. Let me know what you think about this tool 👇.

Conclusion

That's all for now. Hope you got value from this article. If you did, make sure you like it. Follow me on Twitter to get daily updates. Thank you so much for reading and I will see you in the next one. ✌️

Follow me on social 🌐

👤 Minhazur Rahman Ratul

Twitter (@developeratul)
Github (@developeratul)

Top 10 VS Code Extensions to boost your Productivity in 2023

Minhazur Rahman Ratul — Wed, 25 Jan 2023 11:02:11 +0000

Introduction
1. Bito AI
2. Bookmarks
3. Code Spell Checker
4. Better Comments
5. PolaCode
6. Prettier
7. Quokka
8. change-case
9. Code Runner
10. Color highlight
Conclusion

Introduction

Hey, everyone, 👋. Hope you all are doing great. I have been using VS code for over two years and have discovered a lot of amazing extensions that can save you a significant amount of time and increase your productivity. This article will give you a list of 10 code extensions, which will boost your developer productivity. So without any further delay, let's begin.

1. Bito AI

You are all aware of ChatGPT's effectiveness. We visit ChatGPT's website and gain anything from it. But what if ChatGPT could be added directly to your code editor? Bito AI is exactly this. It uses ChatGPT under the hood to generate code, fix bugs, writing test cases, code comment generation, code explanation and a lot more. They recently added a bunch of shortcut options, and keyboard shortcuts. They have also done a lot around prompt engineering to get you the best answer with no work on your part. In general, It is ChatGPT but specifically for coding purposes. I started using it recently and been loving it!

2. Bookmarks

I often forget to review a specific portion of code before pushing it to production. I was able to eliminate the mistake by using this extension.

3. Code Spell Checker

If you make a spelling mistake in your code, this extension will warn you. I no longer make common spelling mistakes because of this extension.

4. Better Comments

Comments are essential for clean, well-maintained code. This extension will help you create more human-friendly comments in your code.

5. PolaCode

We developers frequently seek help from other developers. We must share our code with others while asking for help. This extension will capture nice code snaps. So, you will be able to download them and share them to others.

6. Prettier

Prettier is an opinionated code formatter. It will help you maintain consistent formatting throughout your code. Whenever you save your file, it will automatically format your unformatted code.

7. Quokka

When I am playing with JS, I don't use the browser console or node REPL. I rather use this VSC extension to make this process faster and more fun. Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping.

8. Change Case

Convert words quickly between different naming conventions of the current selection or word.

9. Code Runner

Run your code instantly with just one click. No need to write commands. I use this extension while working with C/C++.

10. Color highlight

This extension styles css/web colors found in your document. It comes really handy while editing my tailwind css theme config. ABSOLUTELY nuts!

Conclusion

That's all for now. Hope you got value from this article. If you did, make sure you like it. I will publish a thread version of this article on my Twitter account. So, make sure you stay tuned. Thank you so much for reading and I will see in the next one. ✌️

Follow me on socials 🌐

👤 Minhazur Rahman Ratul

Twitter (@developeratul)
Github (@developeratul)

How to use ChatGPT to boost your developer productivity

Minhazur Rahman Ratul — Sat, 14 Jan 2023 11:35:19 +0000

Introduction
What is ChatGPT
How to use it to increase your productivity
- Code generation
- Code translation
- Bug detection and fixing
- Guidance
- Dummy data generation
Will it replace developers?!
Conclusion

Introduction

Hey, everyone, 👋. Hope you all are doing great. I recently came across ChatGPT and explored many amazing ways to use it to boost my development productivity. I'm going to show you exactly that in this article today. So, if it tickles your interest, please keep reading.

What is ChatGPT 🤔

ChatGPT (Generative Pre-trained Transformer) is a large language model developed by OpenAI that can understand and generate text like a human. It is trained on a large amount of text from the internet, so it can understand the context and generate text that makes sense. It can be used for many tasks such as answering questions, translating languages, summarizing text, and even writing text like a human, and even in the field of software development to help developers with tasks such as code generation and bug detection.

Using ChatGPT will make you feel like you are chatting with a human. It can maintain context very well which makes it more revolutionary than other AI models.

Overall, ChatGPT is a powerful tool that can save us a significant amount of time.

How to use it to increase your productivity 🔥

There are numerous ways you can use ChatGPT to automate your daily tasks. I'll go over some of them that will help us enhance developer productivity.

Code generation 🧑‍💻

This is the most common usage of ChatGPT. You can generate code in a variety of programming languages. Such as Python, Java, JavaScript, C++, and more. Here's an example below:

Sometimes, it explains way too must 😅. Just be aware of that.

Code translation 🗣️

You can even translate code from one language to another! Simply tell it you want to convert the x code to y code and then paste the code snippet. It is highly recommended to use markdown syntax when providing code. Here's an example below:

How cool is that!

Bug detection and fixing 🪲

We debug more than we write code as developers. ChatGPT can also debug and repair our code. Just give it a prompt saying, "What's wrong in the code below" and provide the code. Here's an example below:

That was a simple example. For more complex situations, you may have to provide more details.

Guidance 📖

After knowing about ChatGPT, now I am aspired to build an AI like it. So now I need guidance on that. Let's ask ChatGPT about it.

So amazing! It can give you a very good start on your journey. Here is another example:

Dummy data generation 🧩

Most of the time, when my front end is ready before the API, I test the UI with dummy data by hardcoding it. In this case, ChatGPT can be used to generate dummy data in your specified format. Here's an example:

There are endless ways you can use ChatGPT. I only mentioned 5 to give you an idea. I highly recommend you go and get your hands dirty with ChatGPT.

Will it replace developers?! 😨

ChatGPT is extremely smart and can code a lot faster than human coders. The only thing it can do is write code. But software development is not just about writing code. It's about Planning, Thinking, Problem-Solving, Teamwork, and much more than that. So ChatGPT is still not enough capable of replacing software developers. It will certainly replace the dummies who just copy-paste code from StackOverFlow without knowing how it works. When arguing whether ChatGPT will replace us, most people overlook the fact that it is only an assistant. So ChatGPT is not here to take our jobs, but rather to make our lives easier and more productive. Please let me know what you think about that. 👇

Conclusion

That's all for now. Hope you got value from this article. If you did, make sure you like it. I will publish a thread version of this article on my Twitter. So, make sure you stay tuned. Thank you so much for reading and I will see in the next one. ✌️

Follow me on socials 🌐

👤 Minhazur Rahman Ratul

Twitter (@developeratul)
Github (@developeratul)

5 Vs code extension's to increase your developer productivity

Minhazur Rahman Ratul — Sat, 22 May 2021 06:50:52 +0000

Hey there developers. How is it going. Today in this blog, I will be showing you 5 useful vs code extension's which will increase your developer productivity. So if you are interested, continue reading...

1. Bookmarks

I use this extension all the time when I am working on any project. Basically this extension allows you to add bookmarks in specific lines in a file. You can also add a note why you have added this bookmark. And you can also explore the bookmarks in the bookmarks tab. Which will show you all the bookmarks in a particular project.

2. Better Comments

This extension is super helpful if you want to improve code commenting. By default the comments have a dimmed color. By using this extension. You can make them colorful for any specific purpose. Like if there is something todo, you can use the TODO tag before writing the comment. Like so - // TODO: what to do. For more information's about usage, please check out the better comments documentation.

3. Code Spell Checker

If you misspell any word in vs code, by default it doesn't shows any warning if the spelling is not correct. By using this extension, You can will get a warning message in the problems tab if any of the word is not spelled correctly.

4. Prettier

This extension formats your unformatted code. So you don't need to focus on formatting you code. Prettier will do it for you. To start formatting your code with prettier, make sure you add these settings in your settings.json after installing it. And you will be good to go.

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",

5. Thunder Client

Are you still using Postman for api testing? Well that's fine. Postman does this duty just perfectly. But for me, when I am working on any project in vs code, I do like to be in vs code. I don't like to open any other external application, it effects on my productivity. So I use this cool Vs code extension. It works same as postman. Nothing new, you can send request to any kind of api from vs code. It really helps me to increase my developer productivity.

Conclusion

These are the productivity vs code extension's, Which I use all the time and wanted to share with you guys. Now I wanted to know what are your productivity extension's? Let me know in the discussions. And make sure you follow me for all the cool article just like that.

:)

Get Me on ->

React useEffect() hook tutorial for begginers

Minhazur Rahman Ratul — Tue, 23 Feb 2021 11:35:24 +0000

In this post I will show you the usage of useEffect hook. Which is really really important if you are a reactjs dev. So if you are interested to learn it, continue reading....

Before using this hook, we have to import it from react.

import React, {useEffect} from 'react';

So what is the use of this hook and how do we use it? useEffect Hook lets you perform side effects in functional components. It performs an action once the page loads for the first time. Example:- Fetching requests, manipulating DOM directly, using timer functions like setTimeout(), and more. The component rendering and side-effect logic are independent. So it would be a mistake to perform side-effects directly in the body of the component. Let's try to use this hook.........

useEffect(() => {
    // put your code here
  }, dependencies)

This is the syntax of useEffect hook. It takes a callback function and an argument which is called dependencies. Dependencies is an optional array of dependencies. useEffect() executes callback only once the page loads...

useEffect(() => {
    console.log("HI there");
  });

In this code, I don't have any dependencies. It has printed - 'hi there' for a single time after the page has been loaded.

The dependencies of useEffect()

Dependencies are some arguments of useEffect hook. So with this arguments, you can control the side effects. To do that, we pass our dependencies under an array. But at first let's try with an empty array and let's see what happens.

useEffect(() => {
    console.log("HI there");
  }, []);

It has printed - 'hi there' for a single time after the page has been loaded.

Now look at the code below.

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

const App = () => {
  const [state, setState] = useState(0);
  useEffect(() => {
    console.log("HI there");
  }, [state]);
  return (
    <>
      <button
        onClick={() => {
          setState(state + 1);
        }}
      >
        Click Me
      </button>
    </>
  );
};

export default App;

Here in this code, I just have a button. Which will increment the current value of our state. And in useEffect I have put the state variable as a dependency of the hook. So what will be happened here?

This will execute the code under the callback every time the value of our state variable changes. You can perform any action here. And you can also perform multiple actions.. no problems or error's will be seen.

Fething Data

Now I will show you how fetch some data's from an api using useEffect hook.

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

const App = () => {
  const [data, setData] = useState("");
  const fetchData = async () => {
    const api = await fetch("https://jsonplaceholder.typicode.com/todos/");
    setData(await api.json());
  };
  console.log(data);
  useEffect(() => {
    fetchData();
  }, [data]);
  return <>
    <h1>I am fethcing some fake data's</h1>
</>;
};

export default App;

So let me explain you. I have a fake api which is giving me some fake data's. Now to fetch them in a React way, you have to use this useEffect hook.

And if you pass an async function as a callback under useEffect, it's not gonna return you anything. So I have passed a function there. Which is an asyncronous function and I am fetching the data from the api. Then I am storing the api data under my state variable and printing it in my console. That's all. Hope you are familiar with fetch api 😅

Clean up function

Cleanup works in this following ways:

1. After initial rendering, useEffect() invokes the callback having the side-effect. cleanup function is not invoked.

2. On later renderings, before invoking the next side-effect callback, useEffect() invokes the cleanup function from the previous side-effect execution (to clean up everything after the previous side-effect), then runs the current side-effect.

3. Finally, after unmounting the component, useEffect() invokes the cleanup function from the latest side-effect.

Let me show you an example.

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

const App = () => {
  const [state, setState] = useState(window.innerWidth);
  console.log(state);
  const resizeD = () => {
    setState(window.innerWidth);
  };
  useEffect(() => {
    window.addEventListener("resize", resizeD);
  }, [state]);
  return (
    <>
      <h1>{state}</h1>
    </>
  );
};

export default App;

Here I have a simple piece of code. Which giving me a live preview of my screen size. I have a useEffect here, which will be called every time when my variable value changes. And I am rendering the value of our variable under h1. So in this case, the state variable is changing every time when we resize the window. And if you print the value of the state variable in the console, you will see it is printing too many ( every time you resize the window ) times but it not removing anything. Which is not a good stuff. So in this case you application may crashed or the client may have a bad experience. So we use cleanup functions in useEffect. It immidietly removes the value when another new value exists for the same variable.

Before adding cleanup function -

Now let's add a cleanup function-

    return () => {
      window.removeEventListener("resize", resizeD);
      console.log("removed");
    };

That's all now the whole code will be look like that ->

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

const App = () => {
  const [state, setState] = useState(window.innerWidth);
  console.log(state);
  const resizeD = () => {
    setState(window.innerWidth);
  };
  useEffect(() => {
    window.addEventListener("resize", resizeD);
    return () => {
      window.removeEventListener("resize", resizeD);
      console.log("removed");
    };
  }, [state]);
  return (
    <>
      <h1>{state}</h1>
    </>
  );
};

export default App;

After adding a cleanup function ->

Did you see that now it is removing the previous data, when any new data exits for our variable. So this clean up function can increase you application performance. If there is any other use of this clean up function, please let me know.

So That's all I know about useEffect hook. Hope you enjoyed that. If you have any issue regarding that post, please let know. And make sure you follow me to receive all the informational posts just like that one.

:)

My productivity setup ( VS Code )

Minhazur Rahman Ratul — Sun, 21 Feb 2021 06:49:24 +0000

In this post I am gonna show you my personal vs code setup! Which makes me more productive. And gives me inspiration to do more coding. I will show you how turn this boring one, -

To this cool one-

And I will also provide you a list of useful VS code extentions which will make you life more easier as a developer. So if you are interested, continue reading...

Theme

When it comes about theme every people has a different choice. But I personally prefer to use - "The best theme". Yes if you take my opinion this is the best theme. Which gives an elegant look to my VS code. It's pretty similar to one dark pro. But this one is a little bit lighter than one dark pro. Which attracts me so much.

Font

I use Fira Code as the default font of my editor. Which looks pretty fine. It gives a nice look to my editor. And fira code 400 medium is recommended with the Best theme.

Icons

For icons I use Material Icon Theme Which makes my icons simple and elegant looking.

Useful Extentions

1. Prettier

Prettier is a really really useful extention. It formats your unformatted code once you save your file. So install it. And after installation, go to settings, and search - "Format on save" Then check the settings if it is marked. Then add some code in your settings.json

"editor.defaultFormatter": "esbenp.prettier-vscode",

2. Auto Rename Tag

This extention saves my time a lot When I am working with React, Html and XML. It renames the closing tag automatically when you try to rename the opening tag.

3. ES7 React/Redux/GraphQL/React-Native snippets

This extention saves a lot of time when I am working with react and react-native. It helps me to prevent writing all the boilerplate codes. Like when I type - 'rafce' if generates all the codes for a react functional component.

4. Live Server

This extention is so useful when you are working with html, css and js projects. It auto reloads the browser page once you save any file in your project.

5. Bracket Pair Colorizer

This extention is so much useful. It highlights the occurance of the opening and closing brackets. And it generates different colors of brackets. Which helps me a lot to have a more better and fast understanding.

6. Tabnine Autocomplete AI

Tabnine is autocomplete AI tool. This will help you a lot when it comes to coding! And I highly recommend it. Just install it and you are gonna stick with that! it's insane!

So that was my vs code setup. I enjoy working a lot with this setup. Let me know what is your productivity setup! in the discussions.

Forem: Minhazur Rahman Ratul

Checkout my latest blog! I explained how to design better hero sections and transform your boring hero section into a HeroMaxxed one.

Let the Product Sell Itself

Let the Product Sell Itself

🔥 The HeroMaxx Roast Process

🧠 Understanding PageAI Pro

🧪 Let’s See the Original

🎯 What Matters in the First 5 Seconds

✍️ Typography with Personality

🤖 Let the Product Speak

🌈 Color with Intention

🛠 Set Expectations Early

✅ Remove Friction, Add Hooks

🧩 Final Result

🚀 Final Thoughts

✨ Make Your First 5 Seconds Count

How I am approaching becoming a better programmer...

How to internationalize Next.js app directory

Terminology

Setup

Folder structure

Localized routing

Add translations

Translating

Translating server components

Translating client components

Translating Dates and Numbers

Conclusion

References

Connect with me

👤 Minhazur Rahman Ratul

PublishWise: The one place to write and publish your blogs

What I built

Category Submission:

App Link

Screenshots

Description

Link to Source Code

Permissive License

Background (What made you decide to build this particular app? What inspired you?)

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

Additional Resources/Info

How to implement subscription model using LemonSqueezy in Next.js (13.4 stable app router)

Table of contents

Introduction

Getting Started

Setup Next.js app

User Registration

Setup LemonSqueezy account

How subscription works

Implementing Subscription

Creating a checkout

Synchronization with Webhook

Check the subscription status

Manage subscription

Deployment

Conclusion

Connect with me

👤 Minhazur Rahman Ratul

You are one tool away from becoming a 10x developer! 🚀

Introduction

What is Bito AI 🤔

How Can Bito AI Be Used to Boost Developer Productivity?

🔥 Generate Code

🪜 Explain Steps

✍️ Generate Comment

⚡ Performance Check

🔒 Security Check

Summary

Conclusion

Follow me on social 🌐

👤 Minhazur Rahman Ratul

Top 10 VS Code Extensions to boost your Productivity in 2023

Table of contents

Introduction

1. Bito AI

2. Bookmarks

3. Code Spell Checker

4. Better Comments

5. PolaCode