In this tutorial, you’ll learn how to build an eCommerce store that you can fully customize and even prepare the ground for sending transactional notifications and messages to buyers.

As a developer, knowing how to build an eCommerce website with code is a practical and valuable skill. It opens up job opportunities, lets you work on real projects, and adds versatility to your skill set. Plus, in the world of web development, eCommerce is a stable and growing industry. So, whether you're into building your own projects, collaborating with others, or just want to stay in the loop with tech trends, diving into eCommerce coding can be a smart move.

1st rule in software development: Don't reinvent the wheel unless you really have to. It's fine to recreate something for learning or business purposes, BUT if something is not your core competency, pick a ready-to-use solution. This saves nerves, time, and money.

Open source is the developer’s way of giving back to humanity, so in this tutorial, we are going to use it. Everyone loves simple food recipes that don’t require tons of different ingredients, and in this meal, we are going to include ONLY TWO because that’s all we need.

Medusa is an open source, headless ecommerce engine that prides itself as an alternative to Shopify. It’s built on Node.js with modification in mind, Medusa is composed of three parts:

Headless commerce: The repository that exposes the REST API

Admin panel: Developers can use the Medusa admin panel to customize and manage their store functionalities

Frontend: You can develop the frontend with Next.js, a static site generator like Gatsby, or any other framework

You can learn more about Medusa by checking their GitHub repository.

The BIGGEST MISTAKE developers make is not thinking far ahead and plan for future potential needs. That is the main difference between software developers and software engineers. Building notifications infrastructure / systems is not even a real thought initially. It always starts with something small. Sending an email to confirm the purchase, sending a push notification about a sale going live, or even just an SMS with a confirmation code to authenticate the user in the registration stage. Very soon, it becomes a nightmare to build, maintain and oversee, and once the store takes off and requires to handle higher scale, the real pain come knocking on the door (It calls “Refactoring”) which in polite terminology means: “The code is crap and cannot be maintained so we need to rewrite the whole thing”.

So I came across a DevTool that does just that! An open-source READY-TO-INTEGRATE notifications infrastructure!

Honestly, I feel that sharing such a tool is almost like sharing a cheat code and competitive advantage, but they just won Producthunt’s Golden Kitty Award, so anyway, they are going to be on everyone's radar soon, so there is no real point in gatekeeping this. Enjoy!

Novu is the one tool you need for ALL of your notification needs in the present and the future.

All that is required from you is:

1. Create an account

2. Pick the channels you wish to communicate with your customers (Email, SMS, WhatsApp, etc.)

3. Connect your providers (SendGrid, Twillio, FCM, etc.)

4. Build your tailored notification workflow (Or just use their pre-made templates)

5. Add the code snippet to your Backend to call Novu’s API once an event accrued

And that’s it!

Anyway, at the end of this guide, you will have a clear idea about how to use Novu and how to implement it with your Medusa eCommerce store.

Are you not really a tutorial person? Or maybe just want a shortcut? I've got you covered.

You can obtain the source code for this tutorial on this GitHub repository.****

Prerequisites

You’re going to use TypeScript throughout this project, for that you need to have Node JS installed on your local computer. If you don’t already have it, you can download it from the official Node JS website.

It is recommended to have a preliminary idea about basic JavaScript concepts to make navigating through this tutorial easier but feel free to follow along even if you don’t have much experience.

Configuring Databases

To properly use Medusa and its notification features, you need to utilize two databases, namely PostgreSQL and Redis. Let’s discuss about installing each of those databases in this section.

Configuring Redis

If you’re using Linux or Mac, the process is fairly easier, you can just install Redis in your local computer following the instructions from Redis official documentation.

But if you are using windows, things are little more completed, you need to have WSL2 installed in order to use Redis locally. You can find instructions for that here.

Also if you don’t want to install Redis locally, you can deploy a small but free Redis instance in their free managed cloud platform as well.

Configuring PostgreSQL

PostgreSQL is the main database that is used by Medusa. Installing Postgres is fairly straightforward. You can download the relevant installer that matches your OS from their official website.

Once both of the databases are correctly configured, you can move on to the next step.

Configuring Medusa

Installing Medusa

To test Novu integration, you need a Medusa instance up and running on your local computer. A Medusa instance consists of 3 parts, you can install and setup all three of them all at once with one single command by using the “create-medusa-app” utility provided by Medusa.

To create a Medusa store, open your terminal at the location of your choice and run the following command.

npx create-medusa-app@latest

Once you run this command on your terminal, you will be presented with a series of questions, make sure to enter your PostgreSQL database’s connection information correctly and choose to install the Next.js starter storefront (You won’t be touching its code but it would be needed for testing the integration)

You can find more information about “create-medusa-app” in their documentation.

Now you can move into the main folder and the storefront folder and run yarn dev separately to start up the backend and frontend both in development mode.

Connecting Redis

Now that you have a Medusa server up and running, you need to connect your Redis instance that you created. To do this, open the Medusa server folder (not the storefront) in your text editor, open the .env file and add the following line at the end of it. (Make sure to add your actual Redis URL at the end)

REDIS_URL=

Next, open the medusa-config.js file and inside the modules constant which is already defined, include the following object.

eventBus: {
  resolve: "@medusajs/event-bus-redis",
  options: {
    redisUrl: REDIS_URL,
  },
},

Right below, in the projectConfig object, uncomment the line with the redis_url to enable Redis.

Congratulations ! You have successfully connected Redis to your Medusa instance. Make sure to restart the Medusa server because a restart might be necessary for these changes to reflect.

Configuring Novu

Now that you have a Medusa instance up and running, you have to configure Novu.

Creating a Novu Account

To create a Novu account, head on over to Novu Signup page and either use GitHub login or email and password to create yourself a brand new Novu account.

Now, before you go ahead and create a Novu workflow, there are a few things that you should take note of.

First, go to the Integration Store from the left menu and see the integrations that are currently created. You can use the Novu test providers for now but in production, you need to make use of a third party provider like SendGrid.

Next, head on over to the Settings section from the left hand side menu and copy the API Key. You are going to need that just in a bit inside your code.

Creating a Novu Workflow for Email Notifications

Basically a workflow is how you send notifications in Novu, you simply create a workflow from the dashboard and trigger that workflow from the backend of your code.

To start creating a workflow, go to the workflow tab and click on Add a workflow , then choose a Blank workflow for now. On the top left of the page, you can name your workflow, I am going to name mine as “Medusa Novu Integration”. Naming the workflow will be important because you will be calling this workflow by its name.

In the middle of the page, you can see the area you will build your workflow on. Click the plus button below the Workflow trigger block and choose Email because you are going to be sending just Email notifications for now.

Next, click on the pencil icon to start editing your Email notification.

Start by setting the Sender name and Subject per your preference and move on to the Editor section. This Editor is where you will craft your email. Now you can style, add images and do all sorts of things to the email that you’re going to be sending in a bit, but for the sake of simplicity, copy and paste the below text in your editor.

Hey {{name}},

Thank you for placing your order with us.

Order ID - {{orderId}}
Amount - {{amount}}

Notice that there are some variables inside the double curly braces. These are variables that you can define from the backend when you’re sending an email.

Now that you’ve finished the work on Novu dashboard, click on the Update button on the top right.

Handling Store Events with Novu

There is an extensive array of events in Medusa that you can use to notify users. You can take a look at the whole list of events in the Medusa documentation.

But for the sake of this guide, you are going to be using the order.placed event mainly. As the name suggests, this event will be called when a user places an order from the frontend.

To listen to these events and send notifications, you can create a Notification Provider. You can find more information about that in their documentation.

For the Notification Provider to properly work, we need to set up two things inside of the Medusa codebase. Namely,

• Service

• Loader

Creating the Notification Provider Service

Start by creating a new TypeScript file inside the service directory inside the src directory. Make sure to use kebab-case when naming the file. As an example, I used novu-notifications.ts

Then copy and paste the following code inside that file, I will explain how each code block works in a bit.

import { AbstractNotificationService, OrderService } from "@medusajs/medusa";
import { Novu } from "@novu/node";

class NovuNotificationsService extends AbstractNotificationService {
  static identifier = "novu-notifications";

  protected orderService: OrderService;

  protected novu: Novu;

  constructor(container) {
    super(container);

    this.orderService = container.orderService;
    this.novu = new Novu(process.env.NOVU_API_KEY);
  }

  async sendNotification(
    event: string,
    data: any,
    attachmentGenerator: unknown
  ): Promise<{
    to: string;
    status: string;
    data: Record<string, unknown>;
  }> {
    if (event === "order.placed") {
      const order = await this.orderService.retrieve(data.id, {
        relations: ["customer", "shipping_address", "payments"],
      });

      const orderData = {
        orderId: order.id.split("_")[1],
        name: `${order.shipping_address.first_name} ${order.shipping_address.last_name}`,
        amount: (order.payments[0].amount / 100).toLocaleString("en-US", {
          style: "currency",
          currency: "USD",
        }),
      };

      await this.novu.trigger("medusa-store-notifications", {
        to: {
          subscriberId: order.email,
          email: order.email,
        },
        payload: orderData,
      });

      return {
        to: order.email,
        status: "done",
        data: orderData,
      };
    }
  }

  async resendNotification(
    notification: any,
    config: any,
    attachmentGenerator: unknown
  ): Promise<{
    to: string;
    status: string;
    data: Record<string, unknown>;
  }> {
    const to: string = config.to ? config.to : notification.to;

    await this.novu.trigger("medusa-store-notifications", {
      to: {
        subscriberId: to,
        email: to,
      },
      payload: notification.data,
    });

    return {
      to,
      status: "done",
      data: notification.data,
    };
  }
}

export default NovuNotificationsService;

• Notice the imports. The AbstractNotificationService is the class that has extended the notification service class with. OrderService is used to access the order information like customer’s name and amount to include in the notification.

• The Novu class is imported from @novu/node in order to make requests to the Novu API.

  💡 Make sure to install the `@novu/node`package by running `npm i @node/novu` inside the Medusa server

• Next, you have the class named NovuNotificationService in this case and it requires a property named identifier. This will be used later inside the loader to call this specific notification service.

• There are two variables defined for the Medusa services and the Novu and all of those two variables are initialized inside the constructor.

  💡 Make sure to include the Novu API key you copied earlier inside the Novu constructor like this or via an environment variable. `this.novu = new Novu("MY_NOVU_API_KEY");`

Next, there are the two most important functions, sendNotification and resendNotification. The first function will be called when any of the events we have defined are triggered and the resend function is called when a resend notification is triggered from the admin panel.

Inside the sendNotification function,

• The event is first checked, in this case, it only proceeds further if the event is order.placed which means a new order is placed.

• Then all the details are accessed from the database with the call to orderService like this.

    const order = await this.orderService.retrieve(data.id, {
      relations: ["customer", "shipping_address", "payments"],
    });
  

• Then you can see the data from the database call is organized in to a new object that matches what Novu requires. Notice that the keys here are the same as what you defined inside the Novu dashboard.

    const orderData = {
      orderId: order.id.split("_")[1],
      name: `${order.shipping_address.first_name} ${order.shipping_address.last_name}`,
      amount: (order.payments[0].amount / 100).toLocaleString("en-US", {
        style: "currency",
        currency: "USD",
      }),
    };
  

• Finally, the Novu workflow you initially created is called with the necessary details to trigger an email notification like this. Notice that the email is passed into subscriberIdand email fields.

  I was having a problem here regarding sending emails to users without subscribing them to an email list. I was able to get immediate support in Novu’s Discord server. I highly recommend you to leave a message on the Discord server if you need some immediate support.

    await this.novu.trigger("medusa-store-notifications", {
      to: {
        subscriberId: order.email,
        email: order.email,
      },
      payload: orderData,
    });
  

Inside the resendNotification function,

• The previously sent notification details are passed into the function. So you can just take them and resend the notification as shown in the code.

That’s basically everything about the Notification Provider. The next important part is the loader function that will help this service class to be loaded in the Medusa environment.

Creating the Notification Provider Loader

Start by creating a new file named notifications.ts inside the src/loaders folder inside Medusa server with the following content.

import { MedusaContainer, NotificationService } from "@medusajs/medusa";

export default async (container: MedusaContainer): Promise<void> => {
  const notificationService = container.resolve<NotificationService>(
    "notificationService"
  );

  notificationService.subscribe("order.placed", "novu-notifications");
};

Notice in the last line, the service called novu-notifications is subscribed to the order.placed event. The service name here is the one that you defined as the identifier in the service file. Make sure that both the names across the files are matching.

Handling More Events

If you want to handle more events all you have to do is add another subscribe statement in the loader file like this.

notificationService.subscribe("order.refund_created", "novu-notifications");

In this case, this is being called when a refund is triggered.

And then send the notification with the related parameters from the service file. As it is mentioned earlier you can find all the events with their related data payloads are mentioned in the Medusa documentation.

That’s basically it. Now you should be ready to test this thing out!

Testing Notifications

To test notifications, go to the Medusa storefront, which is usually hosted on localhost:8000, choose a product, add it to the cart and place an order with some dummy details.

You can choose from a set of example products if you chose to seed dummy products in an earlier step.

If you have followed all the instructions and everything went well, you should now receive an email that looks something like this.

Conclusion

If you followed this tutorial, you should have a clear understanding of how to build an eCommerce store and even send a confirmation of purchase to the buyer!

Novu and Medusa have very responsive and helpful communities on Discord, so if you need help - just head there!

Thank you for reading so far! If you’ve found it helpful or would like me to cover something else, let me know down in the comments.

Introduction 🤩

Are you someone like me who loves Hashnode as well as Notion? Well, then this article is for you. Keep reading.

When I am writing my blog posts, most of the time I am used to writing the article in Notion and copying and pasting all of the content to Hashnode or any other blogging platform I use. You might be wondering why I do that because Hashnode already has an insanely good editor for writing your blog posts.

Yes, that is indeed true but writing it on Notion helps me back up my content and really helps me with publishing the same article to multiple places.

This product is simply a result of an attempt to streamline that process even more by making use of Hashnode GraphQL APIs and Notion APIs.

Also, I think it is worth mentioning that this Hackathon was quite a challenge for me because I don’t have much GraphQL experience and the very short time period I had to complete this project.

In case you’re curious about the weird name, Hasotion is derived from Hashnode + Notion 😉

How Hasotion Works? 🤔

For you to get a rough idea, let me go over the flow of this application in a few steps and explain them. You can also take a look at the explanation video I have linked below in the Demo section.

1. Log in to the application with Google

2. Connect your Notion account and duplicate the provided database

3. Connect your Hashnode account by providing the Personal access token (PAT) and the Blog ID

4. Go to the Notion database. Write your article on a new page. Fill in all the details

5. Check the Ready checkbox.

6. Just click on the Update Article button under the title

The whole process is that simple. Before going more into the notion page details (Step 4) and technical details (Step 6), let me start by introducing my tech stack, the APIs and the interesting packages I used throughout my project.

Tech Stack ⚙️

1. Next JS as the Javascript framework

2. Tailwind CSS as the CSS framework

3. PostgreSQL as the Database

4. Prisma ORM

5. Next Auth for Google Auth

6. Hashnode API to post the articles to Hashnode blog

7. Notion API to read content from the Notion pages. (Used this interesting package called notion-to-md to convert notion pages to markdown easily)

8. Cloudinary to store the blog covers of each post.

The Hashnode API was fairly easy to use. Even though I didn’t have much experience in GraphQL I was able to get it up and running by checking out the well-composed Hashnode API documentation.

I didn’t go for an advanced GraphQL library like apollo-client but kept it pretty simple by using the graphql-request package.

The Notion Database📄

Remember you cloned a Notion database to your account when you connected the Notion account to Hasotion. In this section, I am going to go over the Notion database and explain the ins and outs of that.

The database is pretty simple with just 6 columns that you need to interact with. The first five columns are pretty much self-explanatory if you have ever used Hashnode but I will go through each of them briefly.

• Title - Your blog article's title

• Slug - The ending part of the URL (If kept empty, it will automatically be generated from the Title)

• Subtitle - The subtitle of your blog article

• Cover Image - The image that will be displayed alongside your blog post in Hashnode

• Tags - The article tags (must be comma-separated to work correctly)

Then you have the final column which is Ready (No. 2)*, when you're done with writing your article and finally ready to publish the article, you check the ready box respective to the article and click on the **Update Articles (No. 1)* button below the title. That will trigger an article update.

The next section will explain what will happen behind the scenes once the update is triggered.

The Main Functionality - Posting Articles 📤

In this section, I will go over how the updating/posting article happens in the backend.

Firstly when you click on the Update Article button, a Next.JS API route will be triggered. You can find that particular API route with comments explaining each step here.

Inside that API route,

1. It first checks if the user is properly authenticated and if all the API tokens and stuff are configured.

2. The ID of the database you cloned in the earlier step in obtained via Notion API. We can just do a search and get the first result because according to Notion login, our integration should only have access to one database.

    const { results: notionResult } = await notion.search({
      page_size: 1,
      filter: {
        property: "object",
        value: "database",
      },
    });
   
    const databaseId = notionResult[0].id;
   

3. Then the database is searched to retrieve all the pages (aka. posts) with Ready being true. A sort is also done to help choose the latest article

    const { results: databaseItems } = await notion.databases.query({
      database_id: databaseId,
      sorts: [
        {
          timestamp: "last_edited_time",
          direction: "descending",
        },
      ],
      filter: {
        property: "Ready",
        checkbox: {
          equals: true,
        },
      },
    });
   

4. Then the content of that particular page is converted to Markdown by using the NPM package I mentioned earlier.

    const notionString = n2m.toMarkdownString(
      await n2m.pageToMarkdown(savingItem.id)
    );
   

5. Then, the data we obtained from the Notion page is fed into the Hashnode API with the GraphQL client.

    const data = await gqlClient.request(publishNewPostQuery, {
      input: {
        title,
        subtitle,
        publicationId: loggedInUser.hashnodePublicationId,
        contentMarkdown: notionString.parent,
        slug,
        tags,
        coverImageOptions: {
          coverImageURL,
        },
      },
    });
   

6. Finally, we uncheck all the posts in the Notion database for future purposes and save the published Hashnode article ID to the Notion database. The article ID is saved to the Notion database because it is needed to update the article in future.

    databaseItems.forEach(async (item) => {
      await notion.pages.update({
        page_id: item.id,
        properties: {
          Ready: {
            checkbox: false,
          },
        },
      });
    });
   
    await notion.pages.update({
      page_id: savingItem.id,
      properties: {
        "Hashnode Post ID": {
          rich_text: [
            {
              text: { content: data.publishPost.post.id.toString() },
            },
          ],
        },
      },
    });
   

7. Finally, to wrap everything up, the user is redirected to a page that displays the article title and the link

    return res.redirect(
      `/notion?title=${title}&url=${
        data?.publishPost?.post.url || data?.updatePost?.post.url
      }`
    );
   

That’s a rough technical explanation of the whole process.

Struggles 😶

First and foremost with the short duration of the hackathon, I couldn’t waste time on the design. So I had to whip up a quick and simple landing page. Despite it being really simple, I think it does a good job at conveying the message to the user.

I also had some problems with getting the Hashnode API working but managed to solve them easily by referring to the Hashnode Public API Docs.

The final and most crucial challenge was the mechanism used to update posts on Hashnode after editing them on Notion. There is no Notion button or Notion webhook feature to make this process a lot simpler. So I had the idea to create a Chrome extension as I did in one of my earlier projects but doing that will add a barrier of entry to users. So I gave up on that and finally settled on adding a little link that updates the latest article that you wrote on Notion.

Video Demo 📽️

Here is a video showing how to get started with Hasotion in less than 5 minutes.

Conclusion 🏁

Feel free to actually use Hasotion for your day-to-day needs because I plan to keep this project up and running forever for completely free and add more and more features down the line.

Also with the limited time I had, my goal was to make an application that does one single thing but that single thing at its best! I personally feel like I was able to stay up to my goals.

Finally, I thank Hashnode for this amazing opportunity to build something with Hashnode’s brand-new set of APIs.

Final Note 📝

If you’re curious, yes this article is written and posted completely by using Hasotion. Feel free to take a look at my Notion document.

⚠️ This is currently hosted on Render. So expect some cold-boots.

Links 🔗

• Hasotion Website

• GitHub Repository

Thank you so much for reading this article. Hope you enjoyed it. Let me know your ideas by leaving a comment below.

Introduction

TextQuest is a platform powered by AI that aims to solve a common problem students, including myself, face. Before diving into the project details, let me explain the problem and how this platform intends to provide a solution. As someone who prefers to tackle day-to-day issues through my projects, I believe TextQuest will be a helpful solution to all the students out there who struggle with studying.

If you're a student who spends most of your time studying loads and loads of textbooks, you might have noticed that you tend to forget things quickly. Now, there are many ways to minimize this problem, but in my opinion, one of the best ways is to make questions from the specific text and try to answer them yourself.

Well, even though this is one of the best ways to study your text material. This is an incredibly time-consuming process, you have to form questions from the text and try to answer them.

That whole process will be a lot easier with TextQuest because it generates the questions automatically with the help of MindsDB and OpenAI APIs by looking at your text.

How TextQuest Works

Before we talk more about how this works, I highly suggest you watch the video below to get a rough understanding of TextQuest and how you can use it.

Once you have logged in to TextQuest via Google,

1. Upload a textbook (or any PDF with text in it) and select the page which you want your questions to be generated from.

2. Choose the number of questions you need to generate.

and boom, after a few seconds you will see all the questions that were just generated with AI.

Now you can select the answers and click on the Check Answers button to verify your answers.

Under the hood, this uses the GPT 3.5 turbo model via the OpenAI handler that MindsDB comes with. I will get into more detail about the MindsDB integration in a later section of this article.

With that clear idea about how TextQuest works, let's move on to more technical details.

My Tech Stack

As always, I used my go-to tech stack for this project which is

• NextJS as the frontend Javascript framework (with Typescript)

• TailwindCSS for utility class-based CSS styling

• PostgreSQL and Prisma for the database

with the interesting addition of MindsDB to consume data from OpenAI APIs. Also, I used shadcn ui as the component library.

Technical Walkthrough

This section includes all the technical information of TextQuest and how you can set it up locally if you want to try it out yourself (The project is not hosted live as of now)

Setting up MindsDB

Since this project uses the facilities provided by MindsDB, I first had to install MindsDB locally on my computer. (unfortunately, the MindsDB cloud version is unavailable as of now)

I followed the instructions in the official MindsDB documentation to get MindsDB up and running. The Troubleshooting section was quite helpful in solving many issues that came up. (For some reason, I could only get it working with the pip from source installation method, so if you're facing some errors, maybe give it a try)

Connecting MindsDB to OpenAI

The next task on the list is getting access to OpenAI models from MindsDB, to do this I first had to install the OpenAI handler to MindsDB with the following command.

pip install .[openai]

Now that I had the OpenAI-related packages installed, I had to create the ML Engine and the Model from the MindsDB dashboard, to do this I opened the MindsDB dashboard which is hosted in http://localhost:47334 and ran the following commands to create them.

Creating ML Engine (OpenAI)

CREATE ML_ENGINE openai_engine
FROM openai
USING
    api_key = 'YOUR_API_KEY';

This engine will be used when you make calls to OpenAI APIs in the future, make sure to replace YOUR_API_KEY with a proper OpenAI API key.

Creating Model

To start consuming data from the backend of our application, you need to create a model inside of MindsDB.

CREATE MODEL mindsdb.question_generator
PREDICT questions
USING
    engine = 'openai_engine',
    model_name = 'gpt-3.5-turbo',
    prompt_template = 'Answer in JSON (json array named questions with each object having question, 4 answers and the actual answer. The key of actual answer should be "correct_answer"). All the questions SHOULD only have ONE CORRECT answer. Generate {{question_amount}} {{question_type}} questions (all the answers in mcq questions should be full) from the following text. IGNORE the sections {{exceptions}}. \n\n {{page_content}}. Ask questions other than {{ignore_questions}}. Only ask questions which are answerable by the given text',
    max_tokens = 3000;

• You can see that I've named this model as "question_generator" in the first line, this is how we will refer to this model in the future.

• In the engine parameter, the ML Engine's name will be inputted.

• In the model_name parameter, I have defined the OpenAI model that is being used. I am using the gpt-3.5-turbo model, while you can use any model such as a gpt4, I find that gpt-3.5-turbo is the perfect match considering cost and performance.

• The most important part of this query is the prompt_template parameter, this is basically where you define all of your instructions to the model. If you have read through this, I have instructed the model exactly how to generate questions and also you can notice that I have specified 5 variables, let's go over each of them and explain how each of these works.

  1. question_amount - Exactly as the name says, this is just the number of questions that I want to generate through a particular call.

  2. question_type - Right now, this variable only accepts the value mcq, this is kept as a variable to support more question types in the future (eg: long answer questions, short answer questions).

  3. exceptions - This variable supports an interesting addition for this application which is ignoring whole sections of the text for the question generation process.

  4. page_content - The content that is used for generating questions, it is the text in the textbook page in this scenario.

  5. ignore_questions - If you generate questions again from a page you have already generated questions from, the previously generated questions will be passed into this variable for the AI to not make the same questions again.

Handling PDFs from the Application

Now that the MindsDB part is completely configured, all I had to do was create a frontend and backend to read PDFs and call the MindsDB model with the page data.

First of all, I used Uploadthing as my storage bucket, so every PDF that the users upload will be stored there.

Since it is not feasible to feed the whole book to the GPT model because of the cost and speed concerns, I decided that letting the user choose what page they need the questions generated from is the best solution for this.

So here is what I came up with, a sliding panel to display the PDF and let the user choose the page that they need to generate the questions from. I managed to display the PDF with some react-pdf magic. It was a little buggy but I managed to get it to work flawlessly by downgrading the react-pdf version to 6.2.2 (A little tip if you're planning to work with react-pdf in the future)

Then once the user hits the Generate question button with the number of questions that they need, in the backend I load the PDF file again to read the content in that specific page of the PDF file and format them properly. I had to create a function myself (using some of the open-source code I found on GitLab) to do this because none of the out-of-the-box solutions was working properly. You can find my custom utils in my GitHub project here.

Feeding the Data to OpenAI via MindsDB

Then, I used the mindsdb-js-sdk package from the NextJS API routes to call the previously created model like this (When a user requests a generation)

const model = await MindsDB.Models.getModel("question_generator", "mindsdb");

const queryOptions = {
  where: [
    `page_content = "${pageContent}"`,
    `question_amount = "${numberOfQuestions}"`,
    `question_type = "${questionType}"`,
    `ignore_questions = "${samePageQuestions}"`,
    `exceptions = "${processedExceptions}"`,
  ],
};

const questions = JSON.parse(
  (await model?.query(queryOptions))?.value.toString() ?? "",
).questions.map((item: QuestionItem) => ({
  ...item,
  // To support answers like all of the above
  answers: [
    ...shuffleArray(item.answers.slice(0, 3)),
    ...item.answers.slice(3, 4),
  ],
}));

After I have gotten the questions and answers from the GPT request, you can notice that I have done some processing before saving them to the database, basically what I have done here (with reasons) are,

• Shuffle the MCQ answers list - gpt3.5 tends to always make the correct answer the first answer in the list.

• While making sure the last answer stays the same - To support some answers like "All of the above".

After all of the processing is done, I save them to the database and send them back to the client for the user to see.

Correcting User's Answers

This is the final step in the process which is also an extremely trivial task. In a separate API route which is called when the user clicks on the Check Answers button, I have this code where it simply throws the user's answer into the database.

const result = await prisma.$transaction(
  questionIdList.map((item) =>
    prisma.question.update({
      where: {
        id: item,
      },
      data: {
        userMCQAnswerIndex: pageAnswers[item],
      },
    }),
  ),
);

Now, this may not look like much but since we have the correct answer's index saved in the database, from the frontend we can compare the two answers and render it according. (In this case green border for correct answers and red border for wrong answers)

Here is the code relavant to correct and wrong answers being displayed.

Slack Bot

TextQuest is not limited to the web interface. At the same time, you can also access the main TextQuest feature through a Slack Bot as well. Yes, you heard that right. You can access it through a Slack bot.

This Slackbot works through a MindsDB Job. Let me go over how this works and how you can set it up locally.

Initializing Slack In MindsDB

First, we have to connect Slack to our MindsDB instance. You can find all the details on how to do that here in their documentation. Make sure to follow the second method as that's how we will connect to Slack.

You can initiate the connection by running this SQL statement in the MindsDB editor.

CREATE DATABASE mindsdb_slack
WITH
  ENGINE = 'slack',
  PARAMETERS = {
      "token": "MY_SLACK_TOKEN"
    };

Make sure to replace the Slack token according to the instructions in the documentation.

Creating OpenAI Model

Now that we have our Slack instance ready, we can create the OpenAI model to do the actual generation of questions.

CREATE MODEL mindsdb.slack_question_generator
PREDICT response
USING
    engine = 'openai_engine',
    model_name = 'gpt-3.5-turbo',
    prompt_template = 'Generate 5 MCQ Questions from the below text. Each question must have 4 choices and the correct answer. The correct answer list should be included at the end. Only ask questions which are answerable by the given text \n\n {{text}}',
    max_tokens=3000;

This model is pretty similar to the model we created before when creating the web interface but this is much simpler because we are just requesting 5 questions from the text.

You can test it out by running the following SQL statement if you want.

SELECT response FROM mindsdb.slack_question_generator WHERE text = 'Text to generate questions'

Creating the MindsDB Job

Finally, we create a MindsDB job for this to keep running and check for new messages and respond every minute.

CREATE JOB mindsdb.slack_question_generator_bot AS (
  INSERT INTO mindsdb_slack.channels(channel, text)
    SELECT
        t.channel as channel,
        t.text as input_text, 
        r.response as text
    FROM mindsdb_slack.channels as t
    JOIN mindsdb.slack_question_generator as r
    WHERE t.channel = 'general' AND t.created_at > "2023-07-25 05:22:00" AND t.created_at > "{{PREVIOUS_START_DATETIME}}"
    LIMIT 1;
)
EVERY minute;

If everything is correctly configured, once you send a text to the general chat (or any chat you have set up), it should respond with 5 MCQ questions and their answers at the bottom. Pretty efficient for a quick recap in my opinion.

Slack Bot For Administration

Before I wrap up this project, I wanted to play around with the MindsDB agents as well. So I built sort of an assistant for the Text Quest admin to monitor this application.

Conversational LLM Model

Before creating a MindsDB agent, a conversational model to access the LLM that we're going to be using should be created (Make sure to replace your gpt3.5 API key)

CREATE ML_ENGINE langchain
FROM langchain

CREATE MODEL mindsdb.text_quest_db_inspection
PREDICT answer
USING
    engine = 'langchain',
    input_column = 'question',
    api_key = 'API_KEY_HERE', 
    model_name = 'gpt-3.5-turbo',
    mode = 'conversational',
    user_column = 'question' ,
    assistant_column = 'answer',
    prompt_template='Answer the user input in a helpful way';

Connect Database

If you've already read the rest of the article, you know that I used PostgreSQL, so I am going to connect my PostgreSQL instance to MindsDB

CREATE DATABASE agent_db
WITH ENGINE = "postgres",
PARAMETERS = {
    "user": "postgres",
    "password": "PASSWORD_HERE",
    "host": "HOST_HERE",
    "port": "5432",
    "database": "postgres"
};

Creating the Skill and Agent

Once you've created the model and connected the database, you can proceed to create the skill and the agent as follows.

CREATE SKILL text_to_sql_skill
USING
    type = 'text_to_sql',
    database = 'agent_db',
    tables = ['User', 'Textbook', 'Question'];

CREATE AGENT text_to_sql_agent
USING
    model = 'text_quest_db_inspection',
    skills = ['text_to_sql_skill'];

Notice the tables property here, I am going to include the names of all of my tables so that they can be accessed from my chatbot.

Creating the Chatbot

Now that everything is ready, all that's left to do is create the actual chatbot. You can follow the instructions in the MindsDB documentation to connect Slack and the following query to create the chatbot.

CREATE CHATBOT text_to_sql_chatbot
USING
    database = 'mindsdb_slack', 
    agent = 'text_to_sql_agent',
    enable_dms = true,
    is_running = true;

Then inside the Slack DM with the bot, you can ask questions like "How many users are registered" and the bot will happily answer it for you!

Linting & Code Quality

As always, I used ESLint and Prettier for linting and keeping the code nice and formatted. I also used the prettier plugin @trivago/prettier-plugin-sort-imports to keep the import statements ordered which I think looks very clean.

Future Plans

I built this project with upgradability in mind so I am planning to add a lot more question types to the application and make the experience more gamified.

Self Deployment

Even though I would love to host this application and provide a link for you to try out, unfortunately, that's not possible due to MindsDB cloud being currently unavailable.

Feel free to take a look at the code in this repository - https://github.com/osadavc/textquest and contact me on Twitter (X) if you have any doubts regarding self-hosting, I will be very happy to guide you through the whole process.

Before wrapping up the article, I would like to thank Hashnode and MindsDB for providing this opportunity to build an amazing product.

Finally, thank you so much for reading the article, I hope this project will help you a lot if you're a student and if you have any comments I would love to hear them down below in the comments.

Passkeys have become the latest authentication trend. This new and convenient method eliminates the use of passwords or email codes for logging in. Passkeys allow users to access applications through their device's screen lock, such as fingerprint or face ID. Unlike passwords, passkeys are highly secure and protected from phishing attacks. They are also more secure than SMS OTPs, which can make users vulnerable to sim swapping.

Throughout this tutorial, you’re going to be learning about how you can implement passkeys authentication in your own app, with Authsignal which is an authentication as a service product which enables you to implement multi-factor passwordless authentication in the easiest ways possible.

Prerequisites

Having a basic knowledge of JavaScript and React is recommended to follow this tutorial more easily.

Configure Authsignal

Before proceeding with the tutorial, you need to create an Authsignal project. For this, you can go to authsignal.com and click on Create Free Account. Then you can go through their simple procedure and get your organization configured.

In the last step, you will create your first tenant - a project inside your Authsignal organization. Choose any name for your tenant and select the data storage region.

Configure Authenticators

Now that you have your Authsignal account configured you need to configure the authenticators that you’re going to be using for your project. We are going to be using email magic links and passkeys as the authenticators in this project. To configure those, click on the configure button you can see on the dashboard page.

and then you would see all the authenticators that you can use.

First, let’s configure the email magic link. To do that, click on the Set up Email Magic Link button and select Authsignal as the email provider. Now you have successfully configured email magic link as an authenticator.

Configuring passkeys has a pretty similar process, click on the Set up Passkey button. Since we’re just testing on localhost for the time being, make sure to set the Relying Party ID as localhost. (Make sure to change this when you’re moving your application to production)

Now you have successfully configured both the passkey and email magic link as authenticators.

API Keys

To connect Authsignal to your Next.JS application you would need the API key and some more information. You can obtain this information by clicking on the API Keys section in the left sidebar.

Take note of these because you’re going to need them in future steps.

Configuring the Next.JS Project

Now that we have completed the Authsignal setup, we can now proceed with the coding phase. We will be utilizing the Next.JS framework for our application development. Although React is an option, it requires a separate backend setup, making Next.JS a more practical choice.

Installing Next.JS

First, bootstrap a brand new Next.JS project by opening your CLI and running the following command.

npx create-next-app@latest

Then during the installation, you will see some prompts. I am going to use typescript and tailwind for this project but I am not going to use the Next.JS app router to keep this guide simple, also make sure to opt-in to creating a src folder to make following this tutorial easier.

Installing Required Dependencies

Now that you have the Next.JS project configured, let’s install the required dependencies. To do this cd into the folder that your project is in and run the following the command

npm i @authsignal/browser @authsignal/node axios cookie jwt-decode uuid && npm i -D @types/cookie @types/uuid

Two authsignal packages will be used to make communication with Authsignal servers easier, axios will be used to make HTTP requests to the backend from the frontend, uuid package will be used to generate a random identifier for new users, jwt-decode and cookie packages will be used to manage the user’s session inside the app.

Set up Magic Link Authentication with Authsignal

Before setting up authentication, you need to feed your API keys and other information into the project. In order to do this, create a .env.local file in the root of your project and add the following.

AUTHSIGNAL_SECRET=
NEXT_PUBLIC_AUTHSIGNAL_URL=
NEXT_PUBLIC_AUTHSIGNAL_TENANT_ID=
NEXT_PUBLIC_APP_URL=http://localhost:3000

You need to fill in this information with the details you obtain from your Authsignal dashboard and for the NEXT_PUBLIC_APP_URL you have to include the URL that your app is running on, so if you deploy your app, you need to replace this with the deployed URL.

If you're unfamiliar with email magic links, they're a method of authentication that involves entering your email address and receiving a link in your inbox. Once you click on that link, you'll be automatically logged in to the app.

Initializing Authsignal

To communicate with the Authsignal servers, you need to initialize two Authsignal clients. one for the front end and the other for the back end.

We’re going to make use of a custom react hook to initialize the front-end client. To do this, create a new file called useAuthsignalClient.ts inside the hooks folder inside the src folder and then paste the following code.

import { Authsignal } from "@authsignal/browser";
import { useEffect, useState } from "react";

const useAuthsignalClient = () => {
  const [client, setClient] = useState<Authsignal | null>(null);

  useEffect(() => {
    const authsignalClient = new Authsignal({
      tenantId: process.env.NEXT_PUBLIC_AUTHSIGNAL_TENANT_ID!,
      baseUrl: process.env.NEXT_PUBLIC_AUTHSIGNAL_API_BASE_URL!,
    });

    setClient(authsignalClient);
  }, []);

  return client;
};

export default useAuthsignalClient;

Here, we’re basically initializing a new object from the Authsignal class passing the tenantId and baserUrl to the constructor and we’re returning that from the hook so that we can use our authsignalClient without repeating this code snippet all over again.

Now to create our back-end client, create a file called authsignal.ts inside the lib folder and paste the following code snippet.

import { Authsignal } from "@authsignal/node";

const secret = process.env.AUTHSIGNAL_SECRET;

if (!secret) {
  throw new Error("AUTHSIGNAL_SECRET is undefined");
}

const apiBaseUrl = process.env.NEXT_PUBLIC_AUTHSIGNAL_API_BASE_URL;
const redirectUrl = `${process.env.NEXT_PUBLIC_APP_URL}/api/callback`;

export const authsignal = new Authsignal({ secret, apiBaseUrl, redirectUrl });

Here also we’re simply initializing an Authsignal object with the secret, apiBaseUrl and redirectUrl. Notice that the redirectUrl points to a backend function called callback, we will create that callback function in a moment.

Sign Up Backend Function

Authsignal SDK is designed in a way so that before doing anything in the front end, you first need to track that action through the backend. You can read more about this in the Authsignal’s documentation.

To do this, first, you have to set up an API route. In order to set up an API route, create a new file named email.ts inside the pages/api directory.

Then inside that email.ts file, paste this code.

import { authsignal } from "@/lib/authsignal";
import { NextApiHandler } from "next";
import { v4 } from "uuid";

const handler: NextApiHandler = async (req, res) => {
  const { url } = await authsignal.track({
    action: "signUp",
    userId: v4(),
  });

  res.status(200).json({
    url,
  });
};

export default handler;

Let’s go through the above code now,

• First, we import the authsignal object that we exported earlier from the lib folder.

• Then we’re going to track an action named signUp passing a random uuid that we can obtain with the u4 function in the uuid library as the userId

• Finally, we’re sending the URL we get back from the Authsignal servers to the front end.

Homepage Frontend

Now we have the backend ready, let’s move on to the front end and hook our API route with a UI.

In the pages folder, you will see a file named index.tsx, which is where you write your front-end logic in Next.JS. Open that file and remove all the content in that file (Also open the styles/globals.css file and remove everything after the 3rd line to get similar styles)

First, let’s code a simple interface that looks something like this.

Paste the following code in the index.tsx file. This should get a basic interface like the above screenshot up and running.

const HomePage = () => {
  return (
    <div className="p-5 font-inter flex flex-col justify-center items-center">
      <h2 className="text-center text-3xl font-bold">
        Next JS + AuthSignal Passkeys Demo
      </h2>

      <div className="border rounded-lg flex flex-col mt-16 w-fit p-16 min-w-[750px]">
        <button className="border px-6 py-3 mt-2">
          Sign Up / Sign In
        </button>

        <p className="text-center my-5">or</p>

        <button>Sign in with an existing passkey</button>
      </div>
    </div>
  );
};

export default HomePage;

To make everything work, we need to import some libraries. Add these imports at the top of your file.

import { useEffect, useState } from "react";
import axios from "axios";
import { useRouter } from "next/router";
import useAuthsignalClient from "@/hooks/useAuthsignalClient";

Then inside the HomePage function, we’re first going to initialize all of these hooks. Add the following lines right at the beginning of the HomePage function.

const router = useRouter();
const authSignal = useAuthsignalClient();

Here we’re initializing the Next.JS router, this will be later used in order to redirect the user to the dashboard page after a successful login and then we initialize the hook that we made earlier to communicate with Authsignal from the frontend.

Now let’s create the signUp function to allow users to sign up for our application. To do this include the following snippet of code below where you initialized the hooks.

const signUp = async () => {
  const { data } = await axios.get("/api/email");
  window.location.href = data.url;
};

Here what we basically do is redirect the user to the Authsignal hosted sign-up page in order to complete the signup process.

Before we can test this out, we have to take care of several other things.

Callback Function

First of all, we need to take care of the callback function. This is where the user comes after they get authenticated from authsignal. We have already specified our redirect URL as /api/callback. Create a new file, name it callback inside the api folder, and paste the following code.

import { serialize } from "cookie";
import jwtDecode from "jwt-decode";
import { NextApiHandler } from "next";
import { authsignal } from "../../lib/authsignal";

const handler: NextApiHandler = async (req, res) => {
  const token = req.query.token as string;

  const decodedToken = jwtDecode<any>(token);

  const { state } = await authsignal.validateChallenge({ token });

  if (state === "CHALLENGE_SUCCEEDED") {
    const cookie = serialize("auth-session", token, {
      expires: new Date(decodedToken.exp * 1000),
      secure: process.env.NODE_ENV === "production",
      path: "/",
    });

    res.setHeader("Set-Cookie", cookie);
  }

  res.redirect("/dashboard");
};

export default handler;

You can find this code snippet in the example repository of Authsignal. What this basically does is take the returning auth token from authsignal and validate if that token is properly authenticated and if that token is properly authenticated, set a cookie named auth-session with that auth token and redirect the user to /dashboard page.

Authsignal Rules

Now since we have configured both the email and passkey providers inside of Authsignal, when you click on the sign up button, both the providers will be displayed but we don’t want that. We specifically want only the email provider to be displayed.

To do this, go to your Authsignal dashboard, choose the right project if you haven’t already, and then click on the actions menu from the top bar. Click on the new action button and create a new action with the name signUp.

Then go to the rules menu in the sidebar and click on create rule. Then you can give any name to the rule, choose challenge from the outcome menu, untick passkey and then save the rule.

Now you should be good to go ahead and test it. Click on the Sign-Up button and after following the on-screen instructions of entering the email and clicking on the link that you receive to the email, you should be redirected to /dashboard. Because we haven’t yet created a dashboard page, you will be redirected to a 404 page if everything goes well.

Dashboard Page

Now that we successfully get redirected to the dashboard page, let’s code a simple UI to display our email and a logout button that looks something like this

First, create a dashboard.tsx page inside the pages folder and paste the following code, then let’s go over the code line by line.

import { GetServerSideProps } from "next";
import { useRouter } from "next/router";
import { authsignal } from "@/lib/authsignal";
import jwtDecode from "jwt-decode";
import { VerificationMethod } from "@authsignal/node";
import useAuthsignalClient from "@/hooks/useAuthsignalClient";

export const getServerSideProps: GetServerSideProps = async (context) => {
  const token = context.req.cookies["auth-session"];

  if (!token) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  const decodedToken = jwtDecode<any>(token);
  const userId = decodedToken.sub;

  if (!userId) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  const user = await authsignal.getUser({ userId });

  return {
    props: {
      token,
      email: user.email,
      hasEnrolledPasskey: user.enrolledVerificationMethods?.includes(
        "PASSKEY" as VerificationMethod
      )!!,
    },
  };
};

const Dashboard = ({
  email,
  hasEnrolledPasskey,
  token,
}: {
  email: string;
  hasEnrolledPasskey: boolean;
  token: string;
}) => {
  const router = useRouter();

  const logOut = () => {
    document.cookie = `auth-session=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT`;
    router.push("/");
  };

  const authSignal = useAuthsignalClient();

  return (
    <div className="p-5 font-inter flex flex-col justify-center items-center">
      <h2 className="text-center text-3xl font-bold">
        Next JS + AuthSignal Passkeys Demo
      </h2>

      <div className="border rounded-lg flex flex-col mt-16 w-fit p-16 text-center">
        <h3>You are logged in</h3>
        <p className="mt-2">Your email is {email}</p>

        {!hasEnrolledPasskey && (
          <span
            className="text-blue-600 cursor-pointer mt-5"
          >
            Save the passkey
          </span>
        )}

        <button className="border px-6 py-3 mt-10" onClick={logOut}>
          Sign Out
        </button>
      </div>
    </div>
  );
};

export default Dashboard;

We first have a getServerSideProps function on the top of the file. This function runs on the server before the page is rendered to the client. You can read more about this in the Next.JS documentation.

Inside the getServerSideProps function,

• First, we read the cookie that we set before from the callback function and take it to the constant token.

• If there is no token, we simply redirect the user to the home page.

• If there is a token, we decode the token and take the userId from it.

• If there is no userId which means the token is invalid, we redirect the user to the home page.

• If there is a userId we pass that to the getUser function in authsignal and get back the user information.

• Then we pass some of that information back to the client ( notice the hasEntrolledPasskey value, if this is true that means the user has already configured passkeys and if that is false that means the user has not configured passkeys. You will see how this is useful in the future parts of the tutorial)

Then inside the page, we simply render the information we got from the server side including a function called logOut that would clear the cookie and redirect the user back to the home page.

Also notice that if the user hasn’t enrolled passkeys, we render a text called Save the passkey. We will implement the functionality of this in the next section of the tutorial.

Set up Passkeys Authentication with Authsignal

If you followed until now, you should have correctly configured magic links as an authentication provider. Now let’s shift our focus to implementing passkeys.

First of all, you need to create a new API route. Create a new file, name it passkey.ts inside the api folder, and paste the following code.

import { authsignal } from "@/lib/authsignal";
import { NextApiHandler } from "next";

const handler: NextApiHandler = async (req, res) => {
  const { token } = await authsignal.track({
    action: "passkey",
    userId: "",
  });

  res.status(200).json({
    token,
  });
};

export default handler;

Nothing really new here, we just track a new action called passkey and send the token we get back to the front end.

Sign up for the passkey

Now, move on to the dashboard.tsx and inside the Dashboard function, create a new function as follows.

const passkeySignUp = async () => {
  try {
    await authSignal?.passkey.signUp({
      token,
      userName: email,
    });
    location.reload();
  } catch (error) {
    console.log(error);
  }
};

What this does is sign up that user with a passkey and reload the page if it is successful, or if it was unsuccessful, we just console.log the error.

In the markup, under the onClick handler of Save the passkey element, call this function like this.

{!hasEnrolledPasskey && (
  <span
    className="text-blue-600 cursor-pointer mt-5"
    onClick={passkeySignUp}
  >
    Save the passkey
  </span>
)}

Now, if you go to the /dashboard page and click on the Save the passkey button, your browser will prompt confirm your screen lock and the passkey will be saved. When the page refreshes, the Save the passkey should disappear.

Sign in with the passkey

To implement the login side of passkeys, go to index.tsx file, make sure axios is imported and add a new function like follows.

const passkeyLogin = async () => {
  const {
    data: { token },
  } = await axios.post("/api/passkey");

  const result = await authSignal?.passkey.signIn({
    token,
  });

  if (result) {
    window.location.href = `/api/callback?token=${result}`;
    router.push("/dashboard");
  }
};

Inside this function, we first get the token from the API function we created before and call the passkey sign-in function with that token.

Then if it returns a new token, we pass that token to our callback function to complete the login.

Now if you go to the homepage and click on the Sign in with an existing passkey button, you should be able to log in with the passkey you previously saved.

Importance of Passkeys and Why Authsignal

As Google has explained here, passkeys are a very novel method of authentication and a very big step towards the passwordless future.

But it would be a very daunting task to implement passkeys on your own. This is where authentication as a service services comes in clutch. As we discussed throughout this article, you can set up passkeys to your own application in a few lines of code using Authsignal.

If you followed right until the end, now you know how to use Authsignal and more specifically how to implement passkeys without going through much trouble.

If you have any problems or if you want to take a look at the final code, you can check the GitHub repository with the completed code.

To learn more about Authsignal, visit the Authsignal documentation

Hey folks, this article is dedicated to the project I built for the 1Password Hackathon. I have participated in many hackathons here at Hashnode. I believe this is the 5th hackathon I have participated in within the last 2 years, but the project I worked on this time is nothing like any other thing I have built.

Let me tell you exactly why I am saying so.

For a long time, I've been wanting to write a journal to document my life story but I never really got the motivation to kick-start it. Now I already hear you asking why. Well, one of the main reasons was where I was supposed to write my journal. In a paper book? No way. So I did what all of you would probably do. I went on Google and searched for the best platforms to write a journal. Well, yeah. There were plenty of platforms to write journals but in summary, they had quite several issues in common.

1. What if some human could read my journal entries (Oh no, that'll be so embarrassing)

2. What if that journaling service suddenly closes down their service without any notice (am I gonna lose everything I wrote about my life for the past decade ?)

3. Some features are paid (I ain't paying 10 bucks a month to write a journal)

So, those were some issues that I had with the current journaling software market. Simply, there were no viable services for me to journal with. You exactly guessed what I did. I did what every developer would do. I started to build my own 😂.

Well, let me give you a little spoiler before we start with the article. You have no idea how 1Password's Passage made my idea even more user-friendly, especially for an application like a journal.

Introduction 📕

And that was how GitJournal was born. GitJournal is a journaling software that is nothing like the competitors in the market right now. The truly unique thing is the way that we store your journal entries. For now, just keep the phrase "Your Life, Your Journal". I will explain how we store the journal entries as we progress through the article.

Why GitJournal 🤔

Behind every product, there should be the important question "Why ?". Why on earth would someone want to use GitJournal or even better, switch from another journaling platform to GitJournal?

Well, to answer that question most simply, it provides a solution to every issue that I have mentioned above.

1. No human could read your journal entries. (All of your entries are protected by AES-256 military-grade protection with a key THAT YOU HOLD YOURSELF)

2. No problem, you have the key and all your entries in your GitHub repository (unless GitHub closes down which is unlikely to ever happen)

3. It is completely free. You don't have to spend a penny.

How GitJournal Works 🧑🏻‍💻

Now that you know why you should potentially use GitJournal, let me tell you a bit about how GitJournal Works.

This flow chart depicts what would happen behind the scenes once you create your account on GitJournal.

Now let me go over each segment of this flow chart.

1. The first thing that you have to do is sign up for GitJournal via Passage. Passage utilizes amazing authentication powered by passkeys. You will see how this authentication system plays a huge role throughout the project.

2. Once you're logged in to the application, you will have to connect your GitHub account. Why? you may ask. Well, we store all of your journal entries in your own GitHub repo. (You might think because this uses GitHub, it is only for developers. Actually no, it is not. Yes, it uses GitHub but you don't need to know anything basically, you just need to have a GitHub account)

3. This is where it gets a little interesting. Now you have two options in front of you. You can either store the secret key yourself or let GitJournal store it. Both of these options have their pros and cons.

   eg: If you store the key in the database, your journal entries can be read by the administrators of the GitJournal site but you have no risk of losing your journal entries. On the other hand, if you store the keys yourself, you have no risk of your entries being read by the site administrators but you will have to keep the secret keys secure, if you lose them, then your journal entries are gone forever.

My Tech Stack ⚙️

Now let's go a little bit into the technical side of my project. So, for this project, I used,

• NextJS as my frontend framework

• Tailwind CSS for utility-based CSS Styling

• Passage by 1Password for authentication

• PostgreSQL as the database

• and I used a pretty cool library called "wired-elements" for those hand-drawn-looking elements

Demo 🪧

Now, let me walk you through the whole app step by step and help you understand what exactly is GitJournal.

First and foremost we have a simple yet beautiful home page designed in the hand-written journal style including some cheesy ChatGPT-made journal entries 😅

You can now click on the Create Your Journal button or the user icon on the top right-hand corner to go to the authentication page which looks something like this initially.

This authentication page is of course powered by Passage. Because of Passage's authentication based on passkeys, it is super easy for you to log in to the application.

First, you need to put your email and confirm the OTP you will receive in your mailbox. Then you can confirm your Windows Hello login method or the way you use to log in to your Mac. Now, on subsequent logins, instead of using an OTP or password, you can directly log in to GitJournal with your PC's main login method. (In this case, I use my windows password because I don't have a fingerprint sensor for my PC but if you do, you will have that option)

Now, the wild ride will start. The first thing that you will have to do is connect your GitHub account (make sure to give the repo access, so that GitJournal can read and write to your repos)

After connecting the repository, you will have to choose if you want to store the key in the cloud or locally. Here is a brief comparison between both of those options

According to your personal choice, you can choose either and continue. I am going to choose the local option because is the most secure one.

Immediately after your repository is created, you will be greeted with a notice like this. You must click on the Download Backup button and download the file because that is what you will need to unlock your journal entries if you log in again on a different browser.

For a little surprise, check your GitHub 😉. You will see a brand new repository with a single file being created. Make sure to not do anything with this repository.

Let's hop back into our app. Now you should see a very simple editor which is powered by TipTap with a calendar by side to write your journal.

Writing a Journal Entry ✍🏻

First, select the date on the calendar (today's date is automatically selected). Then write your secrets in the editor and format them as you please and finally click the Save button.

That's it, all your secrets are encrypted and stored in GitHub for you 🥳. Now if you check your repository, you will see a new file in a new folder like this.

Now, this file contains your whole journal entry's content. For example, in this example, this whole thing means "Hey there." How amazing that is. This is encrypted with AES-256 encryption.

Video Demo 📽️

Role of Passage 🔒

Passage's amazing passkey authentication method is how you log in to GitJournal.

Now let me tell you how that really shines. Imagine you wrote a journal entry for today and wanted to go away so obviously, you have to log out, otherwise, someone could access your secrets. Now when you come back, you don't have to remember any crazy password or open your email to find an OTP, all you have to do is just gently keep your finger on the fingerprint sensor 😅 and you're IN.

Overall, I am really happy with Passage and will definitely use it in my future projects.

Struggles 😩

• I had some problems getting the "wired-elements" library to get it working with NextJS but after some tinkering, I figure out a little hack to make that work.

• I also had a problem with displaying this little dialog box when the user hasn't saved the entry but tries to close the browser tab while fixing that, I learnt that it is good to use useCallback hook when adding even listeners.

  

Future Plans 🔮

• I want to create a GitHub action that would allow users to download their journal as a ZIP with all the entries decrypted.

• Making this an actual SaaS with a paid plan including many more features such as even more security features and releasing this as a competitor to the current online journal market

Important Links 🔗

• GitJournal

• GitHub Repository

Finally, my thanks to Hashnode and 1Password for giving me this awesome opportunity to build the project that I've been wanting to build for so long.

And thank you for reading all the way to the end. Let me know the good, bad and ugly about my project and I would be really happy to see you using this as your daily journal.

PS: I am starting to journal from today 😜

2021, one of the best years of my life just ended and I was all in for a brand new adventure. 2021 was more of a learning year, I learnt a lot of things including mobile development, web development and much more.

I've thought myself how to code all through self study. After a couple of udemy courses and a million different YouTube videos, I knew the very basics of full stack development and could actually do something myself.

The Beginning (January Month)

Starting out, January was actually a really special month for me. After winning a competition held by Sonny Sangha last Decemeber, I won one of the prizes and got in to his Zero To Full Stack Hero course for completely free. I was super excited about this one and also I wanted to join this course for a while, so I spend the full month going through different course lessons and coaching calls.

The Turning Point (February Month)

February was the most amazing month of year. I think I can even consider February as one turning point for my life. Hashnode started February with a bang. Hashnode was hosting a new hackathon partnering with Netlify. I couldn't be more excited, I saw the introduction post and thought to myself, I am going to build something and possibly win it as well.

I had just turned 15 last year and 2000$ was life changing money for me. So, that was how I built Wordable. I spent my entire month building, every night I did nothing else but coding. So after about 3 weeks I had completed the whole project. I wrote my first blog post and it was up. The article was even featured on Hashnode but inside my mind, I was always thinking if I will win or not.

The Big Win (March Month)

It was already March and I was busy refreshing the Hashnode townhall page like 100 times a day hoping that the winners would be announced at any time.

Well, that day finally came. On March 18th 2022 the results were up and I was a Winner. I seriously couldn't be more happier. That was one of the biggest wins and turning points in my life so far.

Also I built something for Hasura hackathon on March as well but I didn't have much hopes on it because I had exams that month and I had to do the project in a rush.

Another Turning Point ? (April Month)

This month was honestly a roller-coaster of events. Lot of amazing things happened this month. First of all I won the Hasura Hackathon. I couldn't believe my eyes, this was my second hackathon win in a row ! Meanwhile Astro announced their first ever hackathon which I was very excited about so I started building something. At the end of the month, I had built Astro Auth which was a complete auth solution for Astro.

At the end of the month, something interesting happened. Without me even knowing I had got in to freelancing.

The Other Big Win (May Month)

On May, I was continuing my freelance work participating some more hackathons and also I won the Astro Hackathon. This was another MASSIVE win for me.

Nothing really interesting happened in rest of the year, I participated to almost every Hashnode hackathon after that but I didn't unfortunately win any, but I kept doing more freelancing projects and I wrote some articles to Medusa.

What About 2023 ?

For me personally, I had an awesome 2022 and I am planning to keep that up in 2023 as well. Here are some of my plans for 2023.

• Launch a brand new SaaS product.

• Scale up my freelancing business through fiverr and other platforms.

• Participate in Hackathons.

• Write for more guest writing programs and write more articles in general.

Final Notes

Finally, I am thankful to everyone who supported me in any way and especially Hashnode since Hashnode is probably the reason I've came a long way this year.

But how do you write twitter threads? You can either write a Twitter thread inside of Twitter itself which I wouldn't call a good idea. Or you can use a service like typefully to write the tweet and tweet it from inside of typefully. This option is great and I myself use this option whenever I want to write a thread but is there a better option?

Introduction 🐦

When I did my research before building this project, I saw that many people are writing their threads inside of Notion (I assume you know what is Notion, if you don't know what notion is, it is a note-taking tool that is loved among many people) and then copy and paste them to twitter or typefully.

Well, you don't have to do that anymore.

Twotion (Twitter + Notion) will allow you to tweet threads / single tweets from inside of Notion. You only need to visit the Twotion website to set up that, after the initial setup, you don't have to leave notion to tweet threads 🤯.

But How 🤔

Well, you might be thinking how did I do that because there is no Notion SDK that allows me to add a plugin or something similar to Notion. This is where browser extensions come into play. I created a browser extension that supports all the chromium-based browsers (Chrome, Brave, Edge, Opera and many more). With this extension, you can post your threads without leaving Notion at all.

Tech Stack ⚙️

1. Next JS

2. Tailwind CSS

3. Planetscale Database

4. Prisma

5. Next Auth

6. Notion API

I used Next JS and Tailwind CSS as always as the UI framework and the CSS framework. I used Planetscale to store all the data and Notion API to work with the Notion Pages.

How Twotion Works & Walk-through 🔧

First, when a user visits the webpage, they will see a landing page that looks something like this. This actually turned out pretty well when I was building and I am pretty sure this is one of the best landing pages I've ever built. Here, I have included how to use Twotion and little bit of information about that.

When the user initially sign-up to the website with Twitter, the user will be prompted to connect their Notion.

When the user is connecting to Notion, the user should give Twotion access to a single Notion database to write their tweets and store them inside of Notion. (The user won't be able to tweet from pages outside of this database)

Now before proceeding further, you need to have the browser extension installed.

Installing Browser Extension

There are a few ways to install the browser extension.

1. Install Chrome Web Store - Work is in progress to publish the extension in webstore.

2. Install from source.

• Download the latest zip file from GitHub

• Extract Files

• Turn on developer mode in your chromium-based browser.

• Click on Load Unpacked and select the folder you got after extracting the zip file.

Writing A Tweet / Twitter Thread

Now we're coming to the fun part. All you have to do to tweet something is open up a new page in the notion database that you previously created and type out whatever you want😎.

As an example, see the following Notion page

Here every boxed thing is a single notion block. Every notion block counts as a single tweet. If you want to have multiple paragraphs in a single tweet, you have to include both of those paragraphs inside a single block.

If there is an image somewhere on the Notion page, the image will be automatically attached to the tweet that is right above it.

Also if you want to add hashtags or tag people, just type it out ⚡

One more thing, we all know that each tweet has a word limit of 280 characters, so if any of your tweets exceeds that character limit, they will be highlighted in red colour. (Done by the extension 🔥, You need be logged in to the website in order to use the extension)

Now, to tweet your thread, all you gotta do is, click on the Twotion extension on your extension bar while you're on the Notion page you want to be tweeted and click on the Tweet button.

and then once you've done it should be tweeted in a matter of seconds just like this. Here is the thread that we just tweeted.

The Dashboard

If you go to the dashboard of the website now by clicking on Go To Dashboard on the landing page, you will see all of the tweets you have posted so far like this.

From the two buttons in the far right corner of each of the thread cards, you can either open the tweet/thread on Twitter or preview it as an embed like this.

What I Learned From This Project 🤓

First of all, I learned some more advanced concepts of Prisma and relational databases while working with Planetscale. Then of course I learned a lot about how to build chrome extensions. I've built a couple of simple ones in the past but not an advanced one like this with TS.

Also, I learned a lot of things about Notion and Twitter APIs.

Role Of PlanetScale 🌎

This is my first time working with PlanetScale and I'd have to say that I really enjoyed it. I love how PlanetScale has branches to manage local stuff and production stuff. What I love the most about PlanetScale is the speed. I have used a couple of these database services in the past and they were not as fast as Planetscale, to be honest. And the other awesome thing about PlanetScale is the really generous free tier.

I have pretty much used PlanetScale for every aspect of this application. All the user data, Notion OAuth API keys and most importantly previous tweets are stored inside of PlanetScale.

Struggles 😫

There weren't as many struggles in this one but I had quite a few headaches. The first one is syncing the login state between the extension and the website. So I want the user to be able to log in to the website and use the extension without login into the extension again. I managed to fix it by accessing the cookies of the website from the extension and making calls to the backend with those cookies.

I also had a little issue with Prisma, it was actually a silly issue but I couldn't properly debug because I couldn't get much information about the error. However, after debugging for a couple of hours, I managed to fix it.

The next one was deployment, the issue was when a user is tweeting something, the backend call takes more than 10 seconds (if their thread is long) which is the limit of most serverless deployment solutions like Vercel and Netlify so I ended up deploying this in a VPS.

Linting & Code Quality 🧑🏻‍💻

I used ESLint and Prettier to maintain the code quality as always and dropped a nice little emoji in front of every commit to make them look a bit consistent and nice.

Future Plans 🔮

I have some cool ideas like scheduled tweets and more to implement. I would like to implement them in my free time in the future.

Also, the extension will be live on Chrome Webstore in the near future and till then please install the extension with the source. If you need any support installing the extension or something else, feel free to leave a comment or contact me directly, I will be more than happy to help you.

Finally, thank you to PlanetScale and Hashnode for making this project a reality by hosting this Hackathon.

Links 🔗

• GItHub Repository

• Chrome Extension (Manual Install)

Video Demo 📽️

Here is a video showing how to get started with Twotion in 3 minutes 😎

Thank you so much for reading this article. Hope you enjoyed it. Let me know your ideas by leaving a comment below.

Hey folks 👋🏻,

Here I am again with a project for the Linode X Hashnode hackathon. I got to know about this Hackathon immediately when it went live but I didn't have a solid idea at that time. I first looked at Linode API to see if I can do something cool with that but I didn't get an idea to do something with that. But after playing around for a little while I got the perfect idea. I thought to make a platform that people can utilize to launch their own NFT projects without using a single line of code. So, completely no code friendly.

Introducing NFT Dapper 🧑🏻‍💻

So, the main idea and concept behind NFT Dapper are allowing its users to create their own completely white-labelled NFT drop. So whoever is gonna mint an NFT from an NFT drop that is made with the use of NFT Dapper won't know that the NFT drop is made with a third-party tool. It is just like you made it yourself. And there are more exciting stuff, I will come to those in a bit.

Tech Stack ⚙️

1. Next JS
2. TailwindCSS
3. PostgresSQL with Prisma
4. Solidity

Next JS and TailwindCSS are pretty much my life defaults, so nothing more to talk about it. This time I tried to use PostgresSQL with Prisma instead of my usual MongoDB with Mongoose and it was pretty fine but I still think I kind of prefer MongoDB. And then of course Solidity for smart contract.

All of these are deployed on Linode 😉. (Psst... Linode was awesome, read why in the Role of Linode section).

Demo 🪧

Home Page

Now, I will take you through the whole application and show you how it really works.

First, when you go to NFT Dapper, you will see a simple, yet modern home page that looks like this.

Here, I have listed some facts about NFT Dapper with a huge headline and a login button. You can click on Login With Metamask and make sure to choose the correct wallet if you have multiple wallets in your Metamask because this wallet will be later used to deploy our Smart Contract.

Once you're in, you can create a new project by clicking on the plus button. Put a name, and description and choose the chain that you're willing to deploy your project on. If this is your first time, I suggest going with a test network to test everything out.

Once you click on the Create Project button, you will see a new project is being created and it'll appear on your project list. Just click on that and if the project's chain and the chain that is connected to metamask doesn't match, it'll show you a popup saying to switch the chain, just click on that and switch the chain to the correct chain.

Project Dashboard

Now, you'll see a little dashboard with some information and some Tabs like this. You need to go through these tabs one by one and set up your NFT collection.

The Smart Contract Tab

When you go inside the smart contract tab, on the left side you'll see a bunch of options to choose from and on the right side, you can see some inputs that it requires to generate your contract on demand.

Remember, unlike every competitor for this platform, this generates a smart contract on demand based on the features you choose. If you didn't choose a certain feature, then that'll not be in the code of the actual smart contract.

Now, I will give you a little explanation of what all these features are and how to use them,

1. Pausable Smart Contract - With this option enabled, you can pause the smart contract at any time by clicking on the pause button that will be displayed on the dashboard. Pausing smart contracts will stop users from minting NFTs from the contract.

2. Set A Public Sale Starting Time - When you enable this option, you'll see a new input field has appeared on the right-side panel called Public Sale Starting Time. You can choose any time that you want here and people won't be able to mint from your contract until that particular time.

3. Allow To Mint Multiple NFTs - When this option is enabled, one wallet can mint up to whatever number of tokens you specify in the right-side panel. By default, a wallet only can mint a single token per transaction and unlimited tokens with as much as transactions as they need.

4. Charge A Mint Fee From Users - This option will allow you to charge a fee from minters, they will have to pay this amount to mint a single NFT in the minting process.

Apart from all of these options you have some inputs that should be filled.

1. Collection Name - This will be the name of your collection and the name of the smart contract.

2. Collection Symbol - Ethereum needs a collection symbol in-order to have an NFT on the blockchain, so you have to put a symbol there (eg: BAYC)

3. Total Supply - You need to put how many NFTs you need that particular collection to have.

once you have filled in all the necessary information, click the Deploy Contract button, wait for a few seconds to generate the smart contract on demand and then confirm the transaction on Metamask and wait for the transaction to complete. Once everything is done as expected, you will see a new view to control your contract, there you can change different properties on the smart contract like the public sale starting time, pause the contract and most importantly withdraw funds from your contract, for example, the funds that are collected by the mint.

Once you have completed the deploy step, you will see the Images and Metadata tab is enabled for you.

Images and Metadata Tab

Here is the place where you will set your images and metadata. I am not gonna go too deep into how to set up metadata and what structure should they be in. But brief instructions on how to set up the images and metadata are shown on the page itself. Once you have uploaded your images and metadata to IPFS, you've gotta put to Metadata IPFS Hash to the input shown. You do need to enter the IPFS Hash of your images because the images are linked to the metadata files.

Once you put an IPFS Hash, the application will check if it is correct, if it is correct, it'll show a preview of the 1st image on the left side panel. If it shows an error, try checking the box called Add .json suffix to each of the metadata files. If it still errors out, then there is something wrong with your IPFS location or your metadata is not accessible.

Once everything is done, you can click on the Save Metadata URL. It will take some seconds and you will have to confirm two different transactions.

After doing this, you will see that the Minting Page tab is now available to click on.

Minting Page

Wait, wait, this is too interesting to be discussed now, I will explain this after explaining the other two tabs.

Code Tab

If you want to build a custom landing page for your NFT drop and have some experience with frontend, you can use the information given here to use the contract from your front. For example, here you can find the contract address and ABI for the contract and some information about the functions that you need to be aware of.

Settings Tab

Nothing fancy here, just a general settings tab to change the name, and description. You can change the chain if you still haven't deployed your contract.

Minting Page (The COOL Part) 🦄

I personally think this is the most interesting part of this application and where Linode really shines compares to services like Vercel or Netlify.

First, you could open up the Mint Page and it asks whether you want to use a subdomain of the nftdapper.xyz or a custom domain. Yes, you read that right, you could add a custom domain to this, just like hashnode does. Pretty amazing, right? I mean if you were to do this on Vercel, you have to use their pro plan and the same applies to Netlify. But with Linode, I can literally do that for 5$ a month (Well, I used the 30$ a month plan but you get the idea)

If you choose the subdomain, then you could put a name basically, for example just mycollection and then, you're minting page will appear in mycollection.nftdapper.xyz. You can check the sample page here

If you choose a custom domain, then you can put your custom domain there and add a CNAME record called @ if you're not deploying on a subdomain of yourself and the subdomain if you're deploying on a subdomain that is owned by you pointing to the cname.nftdapper.xyz.

Well, you will see the instructions in real-time down there.

Once you've properly done that, you can click on the Configure Minting Page button. It might take up to 48 hours for the domain to be actively serving your page because of the delays in DNS propagation but as per my experience, it takes no longer than a few seconds if you're managing your DNS with Cloudflare.

Have to mention that this is possible because of the awesomeness in Caddy and I didn't find clear information about doing this, so in my GitHub repo, you can see the caddy configuration that I used. If you want to build a multi-tenant application just like this, then there you go. Also while going through some caddy forums and stuff, I found out that Hashnode also used the same method before migrating to Vercel. 🤯

That's pretty much it for the functionality of the whole application.

Video Demo 📽️

Role of Linode 🙃

Basically, every component of the application is hosted on Linode, including the Next JS application, database and everything you could think of. What I've noticed is it is so damn fast. Like really fast. Also because of Linode's generous 100$ free tier, I got a dedicated VPS and everything is running smoothly.

Also if it wasn't for linode, configuring a multi-tenant (allowing users to use subdomains and custom domains) application will be a bit difficult.

Linting & Code Quality 🧑🏻‍💻

Nothing much to say that differs from my other previous projects. Just used ESLint, Prettier and used Emojis for every commit to keep the commit list looking clean.

Struggles 😶

There weren't many struggles building this but I found myself stumbling upon setting up a multi-tenant environment with Caddy but finally solved it. If you're struggling to build something similar my Caddyfile is in the Github repo.

Future Plans🔮

I'd really like to make this a real SaaS if users like this and let me know your thoughts on that in the comments as well. Also, I am planning to add much more features like Whitelists, Delayed Reveals etc.

Important Links 🔗

• NFT Dapper
• GitHub Repository
• Example Minting Page

Finally, as always thank you so much to Linode and Hashnode for hosting this hackathon, I indeed learnt a lot about Linux because this is my first time deploying an application on a cloud Linux server. Also, let me know if y'all have any suggestions or improvements that I could make.

UPDATE: Fixed the Metamask connect bug. COMMIT

UPDATE: Added more instructions on local development. COMMIT

What On The Earth Are NFTs?

If you haven't been living under a rock for the past year or so you should know what are NFTs at this point but if you don't know, NFTs are just digital assets that are most importantly stored in the blockchain. (Well, not exactly stored in the blockchain but kind of like that) NFTs are not just sitting in the blockchain doing nothing. They are bought and sold online, not for 5$ but for millions of dollars 🤑. You can go to opensea and scroll through a bunch of awesome NFTs that costs millions of dollars.

NFTs are unique, as the name suggests. (Non-Fungible Tokens) So they can't be replaced with something else. For example crypto is fungible, you can trade 1ETH for 1ETH which are exactly the same but in NFTs, you can't do that. If you traded an NFT for a different NFT you will have a completely different NFT.

Also, I must say that they are a TON of hate going on for NFTs. Read more about that. But I don't care because,

So without any further ado, let's jump into the REAL STUFF.

How We Can Create A NFT Collection?

Well, there are many methods for you to create NFT collections, you can create them with code, low code or even no code. But in this article, we focus on the method with code to mint our NFTs. But we'll just go over the other method briefly.

• No Code

So the easiest method of all of them is Open Sea Lazy Mint. You can just go to opensea and click that create button and enter the details manually and save the NFT. I'll actually be minted when someone bought your NFT. That's why they call it Lazy Minting.

• Low Code

You can use services like Thirdweb or NFT Port to mint your NFTs and you don't actually have to write a single line of solidity. It might be a good way as well if you think about it.

These are definitely not No Code. You will have to write some code in order to work with these. But you are free from writing blockchain specific languages like Solidity. So it might be a great fit for your choice. Especially Thirdweb, I find Thirdweb really interesting so make sure to give Thirdweb a go as well.

Let's start Building Our NFT Collection

Getting The Base Character And Layers Ready

Before writing any smart contract, DAPPs or anything like that, we need some digital thing to mint as NFTs, right? So far the most popular thing is little artworks. So let's build our project with some artwork as well.

But most of them are not just a piece of art. If you take a look at popular NFT collections like Bored Ape Yacht Club. You can see a similarity between all of those. It is basically like there is a base figure, in this case, an ape and on that ape, there are different things that are called traits. You have to design those base characters and traits separately, to learn how to properly do that, you can check out this amazing video by codestackr. I am not gonna explain it too much because I feel like it is out of the scope of this article.

You can generate all the layers you need and come back to this article to proceed further.

Generating The Actual NFT Arts

So this is where the interesting things start happening. Now you will need an Art Generator to merge all of your layers and create a single PNG file. There are many ways you could achieve that but in this case, I am gonna use something called HashLips. I have made a customized fork of the official HashLips art generator on my GitHub profile.

You will need to clone the premade repository by me to proceed with this tutorial. In that repository, you will be able to find starter codes for all of the things that we are gonna be doing. To clone the repository, use this command.

git clone -b starter https://github.com/osadavc/build-a-minting-dapp.git

once you have it cloned, cd into the art-generator directory. This is where all the magic happens. If you have generated your layers according to the video I suggested I have before, you should have a folder structure like this or something similar to this structure

images/
├── Background/
│   ├── GreenBackground.png
│   └── BlueBackground.png
├── Base/
│   └── MainBase.png
├── Eyes/
│   ├── SunGlasses.png
│   ├── Eyes.png
│   └── EyebrowRaised.png
└── Hair/
    ├── StraightHair.png
    └── CurlyHair.png

What you have to do is remove everything inside the art-generator/layers that you cloned earlier and copy all of the folders that you have generated and put them inside that art-generator/layers directory.

Then open the file called art-generator/src/config.js and look from lines 6 to 23. Which looks something like this.

const namePrefix = "Your Collection";
const description = "Remember to replace this description";
const baseUri = "ipfs://NewUriToReplace";

const layerConfigurations = [
  {
    growEditionSizeTo: 5,
    layersOrder: [
      { name: "Background" },
      { name: "Eyeball" },
      { name: "Eye color" },
      { name: "Iris" },
      { name: "Shine" },
      { name: "Bottom lid" },
      { name: "Top lid" },
    ],
  },
];

Here you have a number of things to change here. First, change the namePrefix variable to the name of your NFT Collection and make sure to add a little description to the description variable as well. We'll have to do some work before changing the base URL, so we'll look into that really soon. Then you have the most important part.

const layerConfigurations = [
  {
    growEditionSizeTo: 5,
    layersOrder: [
      { name: "Background" },
      { name: "Eyeball" },
      { name: "Eye color" },
      { name: "Iris" },
      { name: "Shine" },
      { name: "Bottom lid" },
      { name: "Top lid" },
    ],
  },
];

First, change the property called growEditionSizeTo to the maximum number of arts that you need and then you have the layer order, so you have to put all of your folder names in the order of the real layer order, so the topmost object in the array layersOrder should be the layer that sits behind all of the other layers in the actual artwork. Most probably this will be the background and you have to put all of your traits in this array for the art generator to work properly.

Then you've come to the satisfying part. Make sure you're in the art-generator directory in your terminal and run

yarn generate

or

npm run generate

Once you've done that you'll see a directory called build with all of your images and metadata, if you take a look at one of these images, you will see that the image is composed of all of the layers that you defined previously.

Uploading Images To IPFS

Now that you have all the images that you need, you have to upload them somewhere in order for the other people to see them. You can store them in many places but the most recommended way is to store them in IPFS (InterPlanetary File System). We can't store them in the blockchain itself because the images are too big to be stored in the blockchain. This is the reason why I said NFTs are not really stored in the blockchain. We only have a record of them in the blockchain.

To upload the images to IPFS, you'll need a service that'll allow you to store files in IPFS. We are gonna use Pinata. Go ahead and create an account in pinata.

Now, you can select your images folder and upload them to pinata like this,

Now, if you take a closer look at the newly created row, you will see something called CID, make sure to copy that and replace it like this in the config file in the art generator.

const namePrefix = "Beautiful Eyes";
const description = "A NFT Collection That Contains 50 Beautiful Eyes";
// Update The CID
const baseUri = "ipfs://QmPAgyCjcMQLag5HM2rJN71Zkt1TFtgLdyqcG8qzum73vh";

Now that you have updated the config file, you need to update the metadata files you previously generated as well. Obviously doing it manually will be a tedious task, so make sure you are at the root level of the art-generator and run the below command which will update the metadata.

yarn update_info

or

npm run update_info

Once it is successfully completed, you can check a metadata file and you'll see that the information is correctly updated. Now you have to follow the same steps that we did previously for images and upload these metadata files to Pinata as well.

Congratulations 🎊. Now you have your artwork generated and hosted in a decentralized manner.

Writing Solidity Smart Contract

Now that the artworks are hosted on IPFS, it is time to write the smart contract to allow users to mint NFTs. We are going to use the Hardhat toolchain to be able to compile and deploy Solidity code. You usually have to set up hardhat with their CLI tool but to save time I have created a starter for you. If you would like to learn how to set up Hardhat by yourself, read Hardhat documentation, they have explained how to set up a new project very clearly.

I am gonna show you how to build the smart contract but if you need to learn solidity from zero to hero, I highly suggest taking a look at Hashlips Solidity playlist.

The starter code for the smart contract is available in the smart-contract directory in the previously cloned repository.

There are a few folders in the smart-contracts folder. All of your smart contracts will go to contracts and all of the scripts that you define will go inside the scripts directory. We will later see to what we use these scripts.

Creating A Basic NFT Minting Contract

We are going to use the ERC721 industry standard which is suitable to build Non Fungible tokens to build our smart contract.

To make our lives a lot easier and writing smart contracts so easier and more secure, we are going to use a tool called OpenZeppelin. Before doing anything you need to install OpenZeppelin, in-order to do that run one of the following commands inside the smart-contract directory.

yarn add @openzeppelin/contracts

or

npm i @openzeppelin/contracts

and to get the boilerplate for our contract, we are going to use the OpenZeppelin tool, they have an awesome tool called OpenZeppelin Wizard. Open their wizard and select the following options.

1. First we are gonna choose ERC721 because that is the standard that we are planning to use.

2. Then, you need to choose a Name and Symbol for your NFT Contract.

3. From features, choose Mintable, Auto Increment Ids and URI Storage

4. Choose Ownable because the contract is owned by only one user.

Once the code is generated, click on the Copy To Clipboard button and paste the copied code to the contract you have created.

Next, we need to add a couple of functions to customize the behaviour of our smart contract.

• First, we are gonna add a new mint function to allow users to mint

function mint(address to) public payable {
   require(msg.value >= 0.005 ether, "Not Enough ETH");

   _tokenIdCounter.increment();
   uint256 newItemId = _tokenIdCounter.current();

   _mint(to, newItemId);
}

With this mint function, we are allowing users to mint an NFT by paying 0.005ETH, if they haven't paid the correct amount we are aborting the function.

• Base URI Method

function _baseURI() internal pure override returns (string memory) {
    return "ipfs://QmZ5WxKWrL7fMFnQpbHcDDGhSA42PPwQiMXL7guB4v6wJd/";
}

This is the URL where our METADATA is hosted, make sure to change it to your own IPFS content id and keep a slash after the id.

• Token URI Function

function tokenURI(uint256 _tokenId)
    public
    view
    override(ERC721, ERC721URIStorage)
    returns (string memory)
{
    string memory currentBaseURI = _baseURI();
    return
        bytes(currentBaseURI).length > 0
            ? string(
                abi.encodePacked(
                    currentBaseURI,
                    uintToString(_tokenId),
                    ".json"
                )
            )
            : "";
}

What we are basically doing here is when a marketplace requests for the metadata of the NFT, we get the token id and return the actual metadata URL. Notice here we are using a utility function called uintToString to convert a uint256 to string. That function is given below.

function uintToString(uint256 _i)
    internal
    pure
    returns (string memory str)
{
    if (_i == 0) {
        return "0";
    }
    uint256 j = _i;
    uint256 length;
    while (j != 0) {
        length++;
        j /= 10;
    }
    bytes memory bstr = new bytes(length);
    uint256 k = length;
    j = _i;
    while (j != 0) {
        bstr[--k] = bytes1(uint8(48 + (j % 10)));
        j /= 10;
    }
    str = string(bstr);
}

Once you have made all these changes your contract should look something like this,

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/utils/Counters.sol";

contract BeautifulEyesNFT is ERC721, ERC721URIStorage, Ownable {
    using Counters for Counters.Counter;

    Counters.Counter private _tokenIdCounter;

    constructor() ERC721("BeautifulEyesNFT", "BEN") {}

    function _baseURI() internal pure override returns (string memory) {
        return "ipfs://QmZ5WxKWrL7fMFnQpbHcDDGhSA42PPwQiMXL7guB4v6wJd/";
    }

    function mint(address to) public payable {
        require(msg.value >= 0.005 ether, "Not Enough ETH");

        _tokenIdCounter.increment();
        uint256 newItemId = _tokenIdCounter.current();

        _mint(to, newItemId);
    }

    function safeMint(address to, string memory uri) public onlyOwner {
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(to, tokenId);
        _setTokenURI(tokenId, uri);
    }

    function _burn(uint256 tokenId)
        internal
        override(ERC721, ERC721URIStorage)
    {
        super._burn(tokenId);
    }

    function tokenURI(uint256 _tokenId)
        public
        view
        override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        string memory currentBaseURI = _baseURI();
        return
            bytes(currentBaseURI).length > 0
                ? string(
                    abi.encodePacked(
                        currentBaseURI,
                        uintToString(_tokenId),
                        ".json"
                    )
                )
                : "";
    }

    // utils

    function uintToString(uint256 _i)
        internal
        pure
        returns (string memory str)
    {
        if (_i == 0) {
            return "0";
        }
        uint256 j = _i;
        uint256 length;
        while (j != 0) {
            length++;
            j /= 10;
        }
        bytes memory bstr = new bytes(length);
        uint256 k = length;
        j = _i;
        while (j != 0) {
            bstr[--k] = bytes1(uint8(48 + (j % 10)));
            j /= 10;
        }
        str = string(bstr);
    }
}

With that in place, the most basic NFT minting contract is done 🙌🏻. If you really want to test this Contract as it is now, go to the very bottom and read the Deployment section but for now, I am not gonna do it.

Adding A Sale Time

Right now a user can mint tokens at any time that they need, but you might need to restrict this to a specific time, let's just say the time that you launch your project. So let's stop users from minting at any time that they want.

First, go to your contract and create a new variable of the type uint256 to store the sale starting time like the following,

uint256 public saleTimeStamp;

Then in the constructor, get a new argument to change the saleTimeStamp when the contract is deployed like the following,

constructor(uint256 _saleTimeStamp) ERC721("BeautifulEyesNFT", "BEN") {
    saleTimeStamp = _saleTimeStamp;
}

You might need to change the sale time later, so you will also need a function to change the value stored in the save timestamp variable.

function setSaleTimeStamp(uint256 _saleTimeStamp) public onlyOwner {
    saleTimeStamp = _saleTimeStamp;
}

Now, when a user is trying to mint we need to check if the time stored in saleTimeStamp is lower than the time now meaning the sale is already going on. To do that add another require statement to the mint function.

function mint(address to) public payable {
    // Compare the time now and the saved timestamp
    require(saleTimeStamp < block.timestamp, "Sale has not started yet");
    require(msg.value >= 0.005 ether, "Not Enough ETH");

    _tokenIdCounter.increment();
    uint256 newItemId = _tokenIdCounter.current();

    _mint(to, newItemId);
}

after necessary changes are made, the contract should look like this

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/utils/Counters.sol";

contract BeautifulEyesNFT is ERC721, ERC721URIStorage, Ownable {
    using Counters for Counters.Counter;
    uint256 public saleTimeStamp;

    Counters.Counter private _tokenIdCounter;

    constructor(uint256 _saleTimeStamp) ERC721("BeautifulEyesNFT", "BEN") {
        saleTimeStamp = _saleTimeStamp;
    }

    function _baseURI() internal pure override returns (string memory) {
        return "ipfs://QmZ5WxKWrL7fMFnQpbHcDDGhSA42PPwQiMXL7guB4v6wJd/";
    }

    function mint(address to) public payable {
        require(saleTimeStamp < block.timestamp, "Sale has not started yet");
        require(msg.value >= 0.005 ether, "Not Enough ETH");

        _tokenIdCounter.increment();
        uint256 newItemId = _tokenIdCounter.current();

        _mint(to, newItemId);
    }

    function safeMint(address to, string memory uri) public onlyOwner {
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(to, tokenId);
        _setTokenURI(tokenId, uri);
    }

    function _burn(uint256 tokenId)
        internal
        override(ERC721, ERC721URIStorage)
    {
        super._burn(tokenId);
    }

    function tokenURI(uint256 _tokenId)
        public
        view
        override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        string memory currentBaseURI = _baseURI();
        return
            bytes(currentBaseURI).length > 0
                ? string(
                    abi.encodePacked(
                        currentBaseURI,
                        uintToString(_tokenId),
                        ".json"
                    )
                )
                : "";
    }

    // utils

    function uintToString(uint256 _i)
        internal
        pure
        returns (string memory str)
    {
        if (_i == 0) {
            return "0";
        }
        uint256 j = _i;
        uint256 length;
        while (j != 0) {
            length++;
            j /= 10;
        }
        bytes memory bstr = new bytes(length);
        uint256 k = length;
        j = _i;
        while (j != 0) {
            bstr[--k] = bytes1(uint8(48 + (j % 10)));
            j /= 10;
        }
        str = string(bstr);
    }

    // setters

    function setSaleTimeStamp(uint256 _saleTimeStamp) public onlyOwner {
        saleTimeStamp = _saleTimeStamp;
    }
}

Now, users should not be able to mint beyond the time limit that we've specified. Again, if you want to deploy this and check, you can do that.

Reveal NFT Metadata After Drop

Normally when someone mints your NFT, they will see the actual metadata at the particular moment. But to create hype around the collection what we can do is just show users a placeholder image and at a fixed date we can reveal the collection to display the real images, metadata etc.

In order to do this, you need to prepare the unrevealed metadata, I am gonna use this as unrevealed metadata.

{
  "name": "Beautiful Eyes Not Revealed",
  "description": "A NFT Collection That Contains 50 Beautiful Eyes",
  "image": "ipfs://QmPAgyCjcMQLag5HM2rJN71Zkt1TFtgLdyqcG8qzum73vh/20.png",
  "dna": "?",
  "edition": 0,
  "date": 1652033960576,
  "attributes": [
    {
      "trait_type": "Background",
      "value": "?"
    },
    {
      "trait_type": "Eyeball",
      "value": "?"
    },
    {
      "trait_type": "Eye color",
      "value": "?"
    },
    {
      "trait_type": "Iris",
      "value": "?"
    },
    {
      "trait_type": "Shine",
      "value": "?"
    },
    {
      "trait_type": "Bottom lid",
      "value": "?"
    },
    {
      "trait_type": "Top lid",
      "value": "?"
    }
  ]
}

As you can see I have used ? to represent the unrevealed metadata and a static image, so before revealing, every NFT will have the same image. You need to upload this to IPFS as well.

First, you need a couple of different variables to get this working, add the following. The notRevealedMetadata should contain the metadata URL for NFTs that are not revealed and the isReveal variable is what we toggle to reveal or unreveal NFTs.

string public notRevealedMetadata =
    "ipfs://QmWX1bxTYxMtgsnZQA1PwWkVZtM9ZYGfJMsLUBgzPsp1MK";
bool public isRevealed = false;

Then you need to add a function to toggle the isReveal variable accordingly,

function setIsRevealed(bool _isRevealed) public onlyOwner {
    isRevealed = _isRevealed;
}

Then what you need to do is modify the tokenURI function so that it'll return the hidden metadata URL if the metadata is not revealed.

function tokenURI(uint256 _tokenId)
    public
    view
    override(ERC721, ERC721URIStorage)
    returns (string memory)
{
   // Add if check here to check if the metadata is not revealed.
    if (isRevealed == false) {
        return notRevealedMetadata;
    }

    string memory currentBaseURI = _baseURI();
    return
        bytes(currentBaseURI).length > 0
            ? string(
                abi.encodePacked(
                    currentBaseURI,
                    uintToString(_tokenId),
                    ".json"
                )
            )
            : "";
}

Once you have made those changes, your contract should look like this,

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/utils/Counters.sol";

contract BeautifulEyesNFT is ERC721, ERC721URIStorage, Ownable {
    using Counters for Counters.Counter;
    uint256 public saleTimeStamp;

    string public notRevealedMetadata =
        "ipfs://QmWX1bxTYxMtgsnZQA1PwWkVZtM9ZYGfJMsLUBgzPsp1MK";
    bool public isRevealed = false;

    Counters.Counter private _tokenIdCounter;

    constructor(uint256 _saleTimeStamp) ERC721("BeautifulEyesNFT", "BEN") {
        saleTimeStamp = _saleTimeStamp;
    }

    function _baseURI() internal pure override returns (string memory) {
        return "ipfs://QmZ5WxKWrL7fMFnQpbHcDDGhSA42PPwQiMXL7guB4v6wJd/";
    }

    function mint(address to) public payable {
        require(saleTimeStamp < block.timestamp, "Sale has not started yet");
        require(msg.value >= 0.005 ether, "Not Enough ETH");

        _tokenIdCounter.increment();
        uint256 newItemId = _tokenIdCounter.current();

        _mint(to, newItemId);
    }

    function safeMint(address to, string memory uri) public onlyOwner {
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(to, tokenId);
        _setTokenURI(tokenId, uri);
    }

    function _burn(uint256 tokenId)
        internal
        override(ERC721, ERC721URIStorage)
    {
        super._burn(tokenId);
    }

    function tokenURI(uint256 _tokenId)
        public
        view
        override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        if (isRevealed == false) {
            return notRevealedMetadata;
        }

        string memory currentBaseURI = _baseURI();
        return
            bytes(currentBaseURI).length > 0
                ? string(
                    abi.encodePacked(
                        currentBaseURI,
                        uintToString(_tokenId),
                        ".json"
                    )
                )
                : "";
    }

    // utils

    function uintToString(uint256 _i)
        internal
        pure
        returns (string memory str)
    {
        if (_i == 0) {
            return "0";
        }
        uint256 j = _i;
        uint256 length;
        while (j != 0) {
            length++;
            j /= 10;
        }
        bytes memory bstr = new bytes(length);
        uint256 k = length;
        j = _i;
        while (j != 0) {
            bstr[--k] = bytes1(uint8(48 + (j % 10)));
            j /= 10;
        }
        str = string(bstr);
    }

    // setters

    function setSaleTimeStamp(uint256 _saleTimeStamp) public onlyOwner {
        saleTimeStamp = _saleTimeStamp;
    }

    function setIsRevealed(bool _isRevealed) public onlyOwner {
        isRevealed = _isRevealed;
    }
}

Deploying The Smart Contract

Now that the smart contract is done, we need to deploy it to actually use it, when you're moving your app to production you have to deploy your contract on Main Network but in Ethereum, deploying on Main Network costs huge gas fees, so for sake of this tutorial we are gonna deploy on a test net called Rinkeby.

We will need something called Ethereum node to deploy a smart contract, there are multiple node providers like Alchemy and Infura, for this tutorial we are going to use Alchemy. First, go ahead and create an account in Alchemy.

Then you can create an application like this,

Then create a new .env file in your smart-contract directory and add the following variables.

RINKEBY_URL=https://eth-rinkeby.alchemyapi.io/v2/XXX-XXXXXXXXXXXXXXXXXXXXXXXXX
PRIVATE_KEY=XXXXXXXXXX

You need to set the HTTP URL from Alchemy to the RINKEBY_URL and you need to get your wallet private key and set it to PRIVATE_KEY (You will need some Rinkeby in your wallet, use this faucet to get it if you don't have already).

Read this to learn how to export the private key from your wallet.

Now open the hardhat config file in your smart-contract directory and in the exporting object, add a new key called networks and modify it like this.

module.exports = {
  solidity: "0.8.4",
  networks: {
    rinkeby: {
      url: process.env.RINKEBY_URL || "",
      accounts:
        process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [],
    },
  },
};

Now let's move on to the scripts directory, you will see a file called deploy.js. Open that file, here is how we deploy the contract. The main thing you should pay attention to is this line.

const beautifulEyesNFT = await BeautifulEyesNFT.deploy(1652017663);

Here, as parameters, we need to pass everything that we expect from the contract's constructor. In this case the sale starting time. Once you have prepared that open your terminal and navigate to the smart-contract directory and run the following command.

npx hardhat run scripts/deploy.js --network rinkeby

If everything went okay you should see the contract address in the terminal like this.

Congratulations 🎊. Now you have deployed your smart contract to the Rinkeby test network.

Creating A DAPP To Mint NFTs

Now that the contract is deployed, all we have to do is build a frontend to allow the user to mint the NFTs.

As always the starter for the frontend is available inside the client folder in the Github repo. In the starter, I have implemented the design and installed the dependencies that we are gonna use.

For this tutorial, I am going to use a really interesting library that I found recently called wagmi. It is essentially a library to interact with the blockchain from a react application.

First, go ahead and open index.tsx in the pages directory, here we will have to do a bunch of imports from the wagmi library. You can add these lines to the very top of the file.

import {
  useAccount,
  useConnect,
  useNetwork,
  useContractWrite,
  chain,
} from "wagmi";

import { InjectedConnector } from "wagmi/connectors/injected";

// Make sure to import ethers as well
import { ethers } from "ethers";

You will also need the artifacts from the solidity contract. Once you have deployed your contract a folder called artifacts will be generated. Find the JSON file with the name of the contract and copy that and put that somewhere in the client folder. Then make sure to import it in the index.tsx like this.

import contractInterface from "../lib/BeautifulEyesNFT.json";

Then we'll initialize these hooks

// Used to change the button text dynamically
const [buttonMessage, setButtonMessage] = useState("Mint NFT");

// Used to connect to the wallet
const { connect } = useConnect({
  connector: new InjectedConnector(),
});

// Used to connect to the correct network
const { activeChain, switchNetworkAsync } = useNetwork();

// Used to get wallet information
const { data: account } = useAccount();

// Call the minting function in the contract with 0.005 ETH
const { writeAsync } = useContractWrite(
  {
   // Update your contract address and pass the `abi` object in the artifact to contract interface.
    addressOrName: "0x40ac75b32e02bcb48e24c7a2061b399446157f14",
    contractInterface: contractInterface.abi,
  },
  "mint",
  {
    args: [account?.address],
    overrides: {
      gasLimit: 3000000,
      value: ethers.utils.parseEther("0.005"),
    },
  }
);

Then we'll need some lifecycle hooks to keep the wallet connected to the network we need.

useEffect(() => {
  switchNetworks();
}, [account]);

useEffect(() => {
  switchNetworks();
}, [activeChain?.id]);

const switchNetworks = async () => {
  if (account && activeChain?.id != chain.rinkeby.id && switchNetworkAsync) {
    setButtonMessage("Switching Network...");
    await switchNetworkAsync(chain.rinkeby.id);
    setButtonMessage("Mint NFT");
  }
};

What we are essentially doing here, is checking what is the network and switching according to every time the user manually changes the network or when they connect to metamask.

Then we'll render the button conditionally according to the minting status/wallet connected status

{!account ? (
  <button
    className="w-full bg-[#a04edf] rounded-md mt-5 text-white py-3"
    onClick={() => {
      connect();
    }}
  >
    Connect Wallet
  </button>
) : (
  <button
    className="w-full bg-[#a04edf] rounded-md mt-5 text-white py-3 animate-pulse disabled:bg-[#a04edf]/30 disabled:animate-none disabled:cursor-none"
    disabled={buttonMessage != "Mint NFT"}
    onClick={async () => {
      setButtonMessage("Minting...");
      await writeAsync();
      setButtonMessage("Check Your NFT On Opensea 🎉");
    }}
  >
    {buttonMessage}
  </button>
)}

Make sure to add your contract address and the ABI in the correct places as mentioned above.

If you put a past time when deploying, you should be able to mint now.

Change Variables In The Smart Contract

If you want to change the information in the smart contract like saleTimeStamp or isRevealed there are a few ways you can do that, for now, we're gonna use Remix IDE to do that.

1. Open the remix IDE and create a new contract.
2. Copy and paste all your smart contract code to remix.
3. Compile the contract.
4. Selected Injected Web3 as the provider and connect Metamask.
5. Paste your smart contract address and interact with the contract.

Here is how you do it in detail,

Revealing the NFTs

Once it is time for NFT reveal, you can follow the steps mentioned above and call the function called setIsRevealed with true as an argument. Once you do that opensea won't automatically pick up the new metadata, you either have to update them manually from opensea or you can use a service such as https://www.nftrefreshmetadata.com/ (only work on mainnet) to refresh all the metadata and show the real image.

So, that is pretty much for the article and I hope you enjoyed it. The completed code is available here at the final branch - https://github.com/osadavc/build-a-minting-dapp

Let me know what you think in the comments 🙌🏻.

Hey folks 👋🏻,

Here I am once again with my submission for Hasura X Hashnode. Even though I got to know about the hackathon on the first day of the month, due to an exam I couldn't even touch it for the first two weeks. Anyways I started to build something at the end of the second week. Also, this was very challenging for me because I haven't ever used many technologies that I used to build this. I had to completely learn GraphQL, Hasura, Solidity from the very beginning and it was actually awesome!

Introducing NFT Pen 🖊️

So the idea behind NFT Pen is to allow people to mint interactive NFTs with ease instead of the boring image NFTs. The first inspiration for this was from this NFT game called Punks Vs Apes. If you take a look at one of their NFTs, you will see that there are interactive, that is not just an image. It is a fully functional but simple web page.

What NFT Pen Does 🤔

First, you have to feed NFT Pen a codepen link. Then NFT Pen will scrape that, get all the information and mint a proper interactive NFT. You will see more about this process in the demo section.

Tech Stack ⚙️

Talking of the tech stack that I used, I used all my day to day stuff and some additions

1. Next JS
2. Tailwind CSS
3. Hasura
4. Solidity

For authentication, I used NextAuth.js as always and for deployment, I had to use Heroku, to know more about why I used Heroku see the struggles section.

Demo 🪧

Now I will walk you through the whole application, show you how it works and give you an idea about how NFT Pen really works.

First, we have a modern home page like this. This time I followed a proper workflow. Instead of jumping straight into the code. I first designed it roughly and start to code it. I think it really improved the final output.

Here is what I designed with Figma.

You can click on the Login With Google button to authenticate NFT Pen with your google account. I decided to use Google OAuth even I don't need to access any Google APIs because it is kind of a hassle to log in by typing emails and passwords.

Once you properly logged in you will see a popup to authenticate with metamask. This will be beneficial when you are gonna mint your own NFTs. After going through all that, you will see a screen like this.

Minting The NFT 🦄

Before you start minting the NFT, you need to prepare the code that you are gonna mint. For that, you need to create a codepen. You can create your own codepen or you can use a public codepen that is available. For this example, I am gonna use this codepen. And don't forget, Javascript is also working inside the NFT if you have JavaScript 🤯. Also, this will be really cool if you are gonna mint CSS arts.

But there are few constraints with the codepen. Make sure to pay attention to them as well.

• Make sure it is responsive for the size 500px by 500px otherwise your NFT will not look so good.
• Make your codepen public
• If you are minting a CSS art it is better if you can avoid scrollbars at 500px by 500px size.

Awesome, now we have our codepen ready to go. Now what you have to ultimately do is go to NFT Pen and paste your codepen link in the input box. and click on the Fetch button. Make sure to keep your URL exactly in this format https://codepen.io/osadavc/pen/MWrvbrw. Otherwise, it'll not be able to mint the NFT properly. Once you clicked on the fetch button you will see the preview of your codepen like this. And you can see the JavaScript is working exactly as it should work 🚀.

Now just click on the Mint NFT button and give a name for your NFT, then you can click on the Mint NFT button on the popup.

And you can see it goes through a series of stuff and finally metamask popup will be opened. You can click on Confirm button to start the mint (Make sure you have a bit of test matic in your wallet of the Mumbai Polygon network, I added a little minting fee just for fun, it won't be an issue since this is in a test network)

In a few seconds, your transaction will be completed. After that, you will see that the popup says the mint is completed.

Now just click on that View The NFT Button and Voila, here is your freshly minted interactive NFT.

If in any case, opensea says that the NFT is not loaded or something just click the refresh button in opensea and wait for a few minutes.

If you go to the opensea page, you will see the NFT with the JavaScript working 🎉.

And one more thing, you can see all of your previously minted NFTs, if you click the Minted Pens button.

Role of Hasura 🙃

I am managing all user data and minted NFT data with Hasura and must say as someone who has never used GraphQL before, Hasura and GraphQL are awesome. Especially because of the DX. Automatic type generation is probably one of the best things and with the eco-system around it, the DX is even better. With Apollo client, I could get an experience that I could never get with REST Apis.

Linting & Code Quality 🧑🏻‍💻

This time I thought about it a bit more, in addition to ESLint and Prettier, I tried to keep my commits consistent with emojis. And I think that actually looks cool! I will probably do that in every new project of mine.

Struggles 😶

There were not many struggles that I had to go through while building this but I faced a major issue with the deployment. With vercel and netlify I couldn't deploy it because they have a timeout in their free plans. It took a while to upload all those stuff to IPFS and take a screenshot with puppeteer. So I had to use Heroku, it is fine but the problem is with Heroku putting the app to sleep every 30 minutes. Really sorry if you are experiencing a little high load times.

Future Plans🔮

If people start loving this app and the idea, I am planning to add an in-app NFT builder to easily mint interactive NFTs 🙌🏻.

Important Links 🔗

• Deployed App
• GitHub Repository
• NFT Collection

Finally, Thank You Hasura and Hashnode for hosting the hackathon. Learnt a load of new tech and enjoyed them very much. Looking forward to seeing your comments about NFT Pen.

There is a handful of ways you can achieve something like that but today we are gonna take a look at my favourite which is the Agenda library.

Introduction 🎉

Agenda is a lightweight job scheduling library for Node.js as they say on their ReadMe. By using agenda you can create, manage cron jobs. It also allows you to use a MongoDB database to store your jobs so that your cron jobs will be persisted even if you restart the server.

Getting Started ✨

First, initialize a node project with npm init -y or yarn init -y. Then you will need to install a couple of dependencies. We will need Express, Agenda and DayJS. I will explain what each of them is for later. For now, just install them with npm install express agenda dayjs or yarn add express agenda dayjs.

I am gonna use import syntax for the rest of the tutorial. If you also need to use important statements make sure to add "type": "module" to your package.json file

In the index.js file, you can import all of your modules and initialize an express app like follows.

import express from "express";
import Agenda from "agenda";
import dayjs from "dayjs";

const app = express();

Make sure to listen to a specific port at the bottom of your file. In this case, I am gonna listen on port 3000.

app.listen(3000);

Then you can initialize an Agenda instance and pass the database connection URL and the collection name. I am gonna pass my local MongoDB database URL and the collection name is agendaJobs. You can choose whatever name you want.

const agenda = new Agenda({
  db: {
    address: "mongodb://localhost:27017/agenda-test",
    collection: "agendaJobs",
  },
});

Then you need to start the Agenda instance. To do that update your express listen statement like this.

app.listen(3000, () => {
  agenda.start();
});

It will start the agenda instance once express initialized and it is listening on the specified port. Now express and agenda are fully configured and ready to go.

Scheduling Jobs ⚒️

Before scheduling a job, you need to define a job. This definition includes what the job does when it is called. You can define a job as follows.

agenda.define("doSomething", (job) => {}

You can give any name to your job. This name will be important when you want to schedule it. For now, I am gonna console log something when the job runs.

agenda.define("doSomething", (job) => {
  console.log("Job Ran");
});

Now you need a way to test this out. For this, I am gonna create an express endpoint.

app.get("/", async (req, res) => {
  const data = await agenda.schedule(
    dayjs().add(5, "seconds").format(),
    "doSomething"
  );

  res.json(data);
});

What we're doing here is scheduling a job to run in 5 seconds. We are using dayjs to add 5 seconds to the current time. You can see that the job is scheduled and the job details are returned.

Time To Test 🧪

If everything went fine, we should see,

1. Job Details in the response.
2. A brand new record in the database.
3. Terminal output in 5 seconds.

First, run your app with nodemon command. Then you can make a get request to http://localhost:3000/ with any method you want. In this case, I am gonna use Hoppscotch.

Once you have sent the request, if everything is successful, you will receive a response with the job details like this.

{
  "name": "doSomething",
  "data": {},
  "priority": 0,
  "type": "normal",
  "nextRunAt": "2022-03-26T07:38:21.009+00:00",
  "_id": "623ec2e8fdced2c3bd29695b"
}

And if you check your database you will see the created job's record like this

After exactly 5 seconds, you should see the following output in the terminal.

Most importantly the job will persist even if you restart the server. So that is it for the basic Agenda tutorial. I hope you learnt something and I am also planning to do a more in-depth tutorial on how to use Agenda. Let me know what do you think.

Links 🔗

• Agenda Package
• Source Code

Hey folks 👋🏻,

I heard about the Netlify X Hashnode hackathon a few weeks ago and thought this is the best way to spend my February holiday. So here is what I built during that time.

Introducing Wordable - The Better Wordle 😉

You might be like, "wait what? what do you mean by better wordle", don't worry, I will explain it from the beginning of this story. So as you all know wordle is trending on the internet right now, especially on Twitter. I don't think there is anybody who doesn't know how to cheat in the wordle game. So if you didn't know, it is as simple as this single line of code. Also, you can find all the words for the next few years if you take a look at the source code of wordle 😅. I'll leave that to you.

The Need For A Better Wordle 🤔

After getting to know the problems with wordle. I told to myself that I need to fix this. So here I am with a web3 friendly better wordle called wordable 🟩🟨⬛. If you are thinking about what is the relation between web3 and wordable, I will come to that shortly. With wordable, I tried to solve all the problems I have with the current wordle.

What Wordable Really Can Do More Than Wordle ❓

Well, there are a few things that wordable can do but wordle can't, let's see what are those.

1. Modern user interface.
2. Share your game's grid with Twitter with a single click.
3. Mint a unique NFT containing your game's grid 🤯
4. Last but not least you can't cheat or find the word list of the next few years 😶‍🌫️

My Tech Stack ⚙️

Speaking of the tech stack, I tried to prioritize Netlify and choose others accordingly. Below are pretty much all the stuff I used to build Wordable

1. Next JS
2. Tailwind CSS
3. Netlify Serverless
4. MongoDB
5. Thirdweb

For authentication, I used NextAuth JS and for the NFT minting process, I used express.

Demo 🪧

Now I will walk you through the whole application and give you a little idea about what is Wordable.

First and foremost we have a modern homepage like this. The cool thing is the screenshot in the middle of the page changes according to the theme of the website and whether you are on a mobile device or a desktop. ☀️🌙

Currently, we only have a Twitter login and you will see why this is important in a bit. When you click on login with Twitter, you can authorize your Twitter account and go inside the app. Then you will see something like this.

In the left side panel, you can see the normal game board and in the right-side panel, there are all the games that you have already played.

You can play the game as if you were playing the classic wordle but notice that we are sending a request to the backend with the guess you made every time you submit the guess, this way we are able to validate the word without actually sending the word to the frontend.

The Best Part - Sharing Your Result With The World Using Twitter 😎

Once you won the game, you will have a popup like this.

Now this is where the interesting part and all of my struggles began (will explain what were those in a later part of the article)

If you click on Tweet your win button, you will see a little loading indicator and hopefully a success message, then if you check your Twitter account 😎, voila

Also optionally if you want to customize your tweet you can click on Copy Result to copy the game grid to the clipboard.

The Best Of The Best Part - Minting A Unique NFT 🦄

Personally, I think this is the thing that is at the next level 🚀. If you click on the Generate an Exclusive NFT button. You will be first prompted to authenticate with Metamask. Please note that we only support the Rinkeby network right now so if you are in a different network the popup will show a button for you to click in order to change the network.

Once you have done all of that, you will see that your NFT is minting in progress and check your open-sea profile to see more info about that. (Unfortunately, I am not able to keep the HTTP connection till the NFT is minted)

Also if you check your right-side panel, you will see how the information is updated.

All of the NFTs that are minted by users will appear at this collection in opensea.

Video Demo 📽️

You can watch a video demo right here. Please note that the time to mint the NFT may vary, wait around 5 minutes and if the "See Your NFT On Opensea" button is displayed, you are good to go.

What If I lose The Game ☹️

Well, you will still be able to share your game grid to Twitter and copy it but you wouldn't be able to mint it as an NFT

So that is the whole functionality of this app.😌

Role of Netlify 🙂

Netlify is used in many parts of this application. Mainly the whole app is hosted on Netlify. Even though I could easily use Next JS API routes, I opt-in for vanilla Netlify serverless functions, because I wanted to try out Netlify functions for a long time and the experience, was absolutely amazing 🔥.

Linting & Code Quality 🧑🏻‍💻

I primarily used ESLint for linting and to keep the code consistent and formatted across the project I used prettier.

Struggles 😩

In this whole process, I had to deal with 5 major struggles.

• Firstly I had to face issues with CSS. I spent countless hours trying to get the gameboard to a state where it looks good on mobile 📱.

• Then I struggled a little bit to get the tweeting the game grid to work. Because I used Twitter OAuth 2, it didn't have many resources outside of the documentation. However, I finally got it to work.

• The other problem came was when I was minting the NFT, the first problem was converting SVG to PNG, I tried with sharp at first, it worked but the fonts didn't work. So tried running a puppeteer instance and getting a screenshot, fonts worked but it didn't work on Netlify. I am not sure if I did something wrong but every example project on GitHub didn't work too. So I had to run it on a server environment (Heroku) for it to work.

• Things got even weirder when I started minting the NFT because even though Heroku didn't have a 10 or 15-second timeout, we needed to send 1st byte within 30 seconds 😐. (That's the reason I can't keep the connection as I mentioned above)

• Finally, I was having problems with netlify.app domain because Next Auth needed the app URL ahead of time. I fixed that by adding a little snippet of code that redirects netlify.app domain to my custom domain.

Somehow I managed to fix all those issues and finish the whole project! Checkout wordable, contributions are highly appreciated and if there are any problems regarding the app, let me know.

Future Plans 🔮

• Post the first winner of the day to the official Twitter account.
• Move from the test network to the main network.
• Give users the ability to play custom and real-time games.

Useful Links 🔗

• Deployed App
• GitHub Repository
• Opensea NFT Collection
• Official Twitter Account

Finally thank you to Netlify and Hashnode for hosting this amazing opportunity and that's it about Wordable, let me know what do you think about Wordable down below in the comments. 🟩🟨⬛

UPDATE: Please try again if you couldn't mint the NFT before, Drastically improved the UX with minting the NFT🚀.

UPDATE: Unfortunately, the live link will no longer work because I had to delete the twitter developer project to create another one. (Twitter allows only one project)