Forem: Marc Seitz

Building a AI Assistant to chat with your documents using Next.js and OpenAI

Marc Seitz — Tue, 30 Jan 2024 10:15:04 +0000

What you will find in this article?

AI is becoming a part of every aspect of our lives, especially at work. Understanding documents better, finding the right information faster, and collaborating more effectively are all things that AI can help us with.

In this article, we will build a powerful AI assistant that lets you chat, ask questions, and get answers from your documents. We will use Next.js, vercel/ai and OpenAI to build this application.

Papermark - the open-source DocSend alternative.

Before we kick it off, let me share Papermark with you. It's an open-source alternative to DocSend that helps you securely share documents and get real-time page-by-page analytics from viewers. Of course, there's a AI document assistant included. And it's all open-source!

I would be grateful if you could give us a star! Don't forget to share your thoughts in the comments section ❤️
https://github.com/mfts/papermark

Setup the project

Let's set up our project environment. We will be setting up a Next.js app, installing Vercel's AI package and configuring the OpenAI.

Set up Next.js with TypeScript and Tailwindcss

We will use create-next-app to generate a new Next.js project. We will also be using TypeScript and Tailwind CSS, so make sure to select those options when prompted.

npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias

Install Vercel's AI package

Next, we will install Vercel's AI package. This package provides convenient type-safe abstractions to access the OpenAI (and other LLM) API. It also provides a convenient way to use the API in a serverless environment, including streaming chat responses.

npm install ai

I have to admit, ai is a pretty epic package name! 🎉

Setup OpenAI

If you haven't done so, create an account on OpenAI. Once you have created an account, you will need to create an API key on platform.openai.com. You can find your API key on the dashboard. We'll need that for later.

Building the application

Now that we have our setup in place, we are ready to start building our application. The main features we'll cover are:

Configure the OpenAI Assistant API
Creating a chat interface

#1 Configure the OpenAI Assistant API

Let's start by configuring the OpenAI Assistant API on the OpenAI platform.

Create a new assistant from the dashboard

Give it a name, an instruction prompt, a model (currently it has to be gpt-4-1106-preview), and make sure you enable Retrieval.

Finally, add a file to the assistant. This file will be the initial document to chat with. Let's upload a PDF file.

Get the Assistant ID

When saving the assistant, you will find the assistant ID in the dashboard or below the name of the assistant. We will need this ID to configure the API.

#2 Creating a chat interface for your document

Now that we have our assistant configured, let's create a chat interface to interact with the assistant. We will be using the useAssistant hoo (currently in beta) from the ai package to interact with the API.

Let's create the chat interface in app/page.tsx:

// app/page.tsx
"use client";

import { Message, experimental_useAssistant as useAssistant } from "ai/react";
import { useEffect, useRef } from "react";

const roleToColorMap: Record<Message["role"], string> = {
  system: "red",
  user: "black",
  assistant: "green",
};

export default function Chat() {
  const { status, messages, input, submitMessage, handleInputChange, error } =
    useAssistant({
      api: "/api/assistant",
    });

  // When status changes to accepting messages, focus the input:
  const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (status === "awaiting_message") {
      inputRef.current?.focus();
    }
  }, [status]);

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {error != null && (
        <div className="relative bg-red-500 text-white px-6 py-4 rounded-md">
          <span className="block sm:inline">
            Error: {(error as any).toString()}
          </span>
        </div>
      )}

      {messages.map((m: Message) => (
        <div
          key={m.id}
          className="whitespace-pre-wrap"
          style={{ color: roleToColorMap[m.role] }}>
          <strong>{`${m.role}: `}</strong>
          {m.role !== "data" && m.content}
          {m.role === "data" && (
            <>
              {(m.data as any).description}
              <br />
              <pre className={"bg-gray-200"}>
                {JSON.stringify(m.data, null, 2)}
              </pre>
            </>
          )}
          <br />
          <br />
        </div>
      ))}

      {status === "in_progress" && (
        <div className="h-8 w-full max-w-md p-2 mb-8 bg-gray-300 dark:bg-gray-600 rounded-lg animate-pulse" />
      )}

      <form onSubmit={submitMessage}>
        <input
          ref={inputRef}
          disabled={status !== "awaiting_message"}
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="What is the temperature in the living room?"
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}

And the corresponding API route in app/api/assistant/route.ts:

// app/api/assistant/route.ts
import { experimental_AssistantResponse } from "ai";
import OpenAI from "openai";
import { MessageContentText } from "openai/resources/beta/threads/messages/messages";

// Create an OpenAI API client (that's edge friendly!)
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY || "",
});

// IMPORTANT! Set the runtime to edge
export const runtime = "edge";

export async function POST(req: Request) {
  // Parse the request body
  const input: {
    threadId: string | null;
    message: string;
  } = await req.json();

  // Create a thread if needed
  const threadId = input.threadId ?? (await openai.beta.threads.create({})).id;

  // Add a message to the thread
  const createdMessage = await openai.beta.threads.messages.create(threadId, {
    role: "user",
    content: input.message,
  });

  return experimental_AssistantResponse(
    { threadId, messageId: createdMessage.id },
    async ({ threadId, sendMessage }) => {
      // Run the assistant on the thread
      const run = await openai.beta.threads.runs.create(threadId, {
        assistant_id:
          process.env.ASSISTANT_ID ??
          (() => {
            throw new Error("ASSISTANT_ID is not set");
          })(),
      });

      async function waitForRun(run: Run) {
        // Poll for status change
        while (run.status === "queued" || run.status === "in_progress") {
          // delay for 500ms:
          await new Promise((resolve) => setTimeout(resolve, 500));

          run = await openai.beta.threads.runs.retrieve(threadId!, run.id);
        }

        // Check the run status
        if (
          run.status === "cancelled" ||
          run.status === "cancelling" ||
          run.status === "failed" ||
          run.status === "expired"
        ) {
          throw new Error(run.status);
        }
      }

      await waitForRun(run);

      // Get new thread messages (after our message)
      const responseMessages = (
        await openai.beta.threads.messages.list(threadId, {
          after: createdMessage.id,
          order: "asc",
        })
      ).data;

      // Send the messages
      for (const message of responseMessages) {
        sendMessage({
          id: message.id,
          role: "assistant",
          content: message.content.filter(
            (content) => content.type === "text"
          ) as Array<MessageContentText>,
        });
      }
    }
  );
}

And finally, add the OPENAI_API_KEY and ASSISTANT_ID from earlier to your environemnt variables:

# .env
OPENAI_API_KEY=<your-openai-api-key>
ASSISTANT_ID=<your-assistant-id>

Bonus: Add a new document to the assistant

If you want to add new documents to the assistant, then you need to upload them to the files endpoint of the OpenAI API.

It's important that you state the purpose of the file as assistants so that it can be used by the assistant.

Add the following backend code somewhere where you have access to uploaded files:

// ...
// Upload the file to OpenAI
const fileId = (
  await openai.files.create({
    file: await fetch(url_to_file), // the `file` variable accepts a File, Buffer or ReadableStream
    purpose: "assistants",
  })
).id;
// ...

Then, you need to give your assistant access to the file you have uploaded. You can do that by adding the file to the assistant:

// ...
// Add the file to the assistant
await openai.beta.assistants.files.create(assistantId, {
  file: fileId,
});
// ...

And that's it! You can now upload new documents to your assistant.

Conclusion

Congratulations! You have built a powerful AI assistant that lets you chat with your document.

Thank you for reading. I am Marc, an open-source advocate. I am building papermark.com - the open-source alternative to DocSend.

Have fun building!

Help me out!

If you found this article helpful and got to understand OpenAI's Assistant API, vercel/ai package, and Next.js, I would be grateful if you could give us a star! And don't forget to share your thoughts in the comments ❤️

https://github.com/mfts/papermark

Deploy a WebAssembly-powered Next.js app on Vercel serverless functions

Marc Seitz — Thu, 25 Jan 2024 12:53:31 +0000

What you will find in this article?

Javascript is great but sometimes you need to run some code that is not directly available in Javascript. In this article, we will see how to run WebAssembly in serverless Node.js functions using Next.js and Vercel.

Papermark - the open-source DocSend alternative.

Before we begin, let me introduce you to Papermark. It's an open-source alternative to DocSend that helps you manage secure document sharing, including real-time analytics, custom domains and more. It's all open-source!

I would be absolutely thrilled if you could give us a star! Don't forget to share your thoughts in the comments section ❤️
https://github.com/mfts/papermark

Setup the project

Let's go ahead and set up our project environment for our page number counting application. We'll be creating a Next.js app, and set up to run a WebAssembly package in a serverless function.

Setting up Next.js with TypeScript and Tailwindcss

We'll use create-next-app to generate a new Next.js project. We'll also be using TypeScript and Tailwind CSS, so make sure to select those options when prompted.

npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias

Install vercel/blob

Vercel Storage released a new package called @vercel/blob that lets you upload files to Vercel's file storage. We'll use this package to store our PDF files.

npm install @vercel/blob

Install mupdf

MuPDF is a lightweight PDF, XPS, and E-book viewer, but it comes with a wasm package that lets you manipulate and annotate PDFs. We'll use this package to count the number of pages in a PDF.

npm install mupdf

Building the application

Now that we have our setup in place, we are ready to start building our application. The main features we'll cover are:

Upload a file
Count total number of pages with WASM package
Make WASM run on Vercel's serverless functions

#1 Upload a file

Let's create a serverless function that uploads a file to Vercel's file storage. Send a POST request to /api/upload with a file key in FormData object in the request body.

// pages/api/upload.ts
import { put } from "@vercel/blob";
import { NextResponse, NextRequest } from "next/server";

export const config = {
  runtime: "edge",
};

export default async function upload(request: NextRequest) {
  const form = await request.formData();
  const file = form.get("file") as File;

  if (!file) {
    return NextResponse.json(
      { error: "File name or file not submitted" },
      { status: 400 }
    );
  }

  const blob = await put(file.name, file, { access: "public" });

  return NextResponse.json(blob);
}

blob contains the data about our file including url which we'll use to access the file later.

Caveat: this serverless implementation only works with files smaller than 4MB. If you need to upload larger files, you'll want to use a client-side upload (see more on GitHub).

#2 Count total number of pages with WASM package

Now that we have our file uploaded, we can use the mupdf package to count the total number of pages in the PDF. We'll create a serverless function that takes the url from blob object of the file and returns the total number of pages.

Find the full documentation of the mupdf package on their website.

// pages/api/count-pages.ts
import { NextApiRequest, NextApiResponse } from "next";
// @ts-ignore
import mupdf from "mupdf";

export default async (req: NextApiRequest, res: NextApiResponse) => {
  // check if it's a POST method
  if (req.method !== "POST") {
    res.status(405).json({ error: "Method Not Allowed" });
    return;
  }

  try {
    const { url } = req.body as { url: string };
    // Fetch the PDF data
    const response = await fetch(url);
    // Convert the response to an ArrayBuffer
    const pdfData = await response.arrayBuffer();
    // Create a MuPDF instance
    var doc = mupdf.Document.openDocument(pdfData, "application/pdf");
    // Get the number of pages
    var n = doc.countPages();

    // Send the images as a response
    res.status(200).json({ numPages: n });
  } catch (error) {
    console.error("Error:", error);
    res.status(500).json({ error: "Internal Server Error" });
  }
};

This function will work fine locally, however, it will fail when deployed to Vercel. This is because the wasm file from mupdf node_modules package is not included in the deployment bundle. We'll fix this in the next step.

#3 Make WASM run on Vercel's serverless functions

To make the wasm file available to Vercel's serverless functions, we'll need to include the wasm file from the package's node_modules folder in our deployment. We can do this by adding the following to our next.config.js file.

In this case we are using the experimental.outputFileTracingIncludes option to include the wasm file from mupdf package in our deployment to the API route /api/count-pages.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    outputFileTracingIncludes: {
      "/api/count-pages": ["./node_modules/mupdf/lib/*.wasm"],
    },
  },
};

module.exports = nextConfig;

That's it. Now we can deploy our application to Vercel and it will work as expected.

Conclusion

And there you have it! We've built a simple app for counting numbers of pages in a PDF document using Next.js, WebAssembly and Vercel serverless functions. While the example here is simple, the same concepts can be applied to handle any other WebAssembly package that expands the capabilities of your app.

Thank you for reading. I am Marc, an open-source advocate. I am building papermark.com - the open-source alternative to DocSend.

Keep experimenting and pushing the boundaries of what's possible with these technologies. Happy coding!

Help me out!

If you found this article helpful and got to understand WebAssembly on Vercel serverless functions a bit better, I would be super grateful if you could give us a star! And don't forget to share your thoughts in the comments ❤️

https://github.com/mfts/papermark

How to add the OSS Friends page to your Next.js website

Marc Seitz — Thu, 18 Jan 2024 10:24:28 +0000

What you will find in this article?

In the open-source community, collaboration and connections are key. An OSS (Open Source Software) Friends page on your website can showcase the community that contributes to and supports your projects. In this article, we'll guide you through creating an OSS Friends page using an API to fetch and display the latest OSS projects.

Let's help open source projects grow toghether by adding an OSS Friends page to your website!

Papermark - the open-source DocSend alternative.

Before we kick it off, let me share Papermark with you. It's an open-source alternative to DocSend that helps you securely share documents from PDFs to Notion pages and get real-time page-by-page analytics from viewers. It's all open-source!

I would be grateful if you could give us a star! Don't forget to share your thoughts in the comments section ❤️
https://github.com/mfts/papermark

Building the `oss-friends` page

Now that we have our setup in place, we are ready to start building our application.

We'll be using the Formbricks API to fetch the latest OSS friends. Using the Next.js App router we'll create a new page /oss-friends and fetch the data from the API. We'll then render the data on the page.

// app/oss-friends/page.tsx
import { Button } from "@/components/ui/button";
import Image from "next/image";

type OSSFriend = {
  href: string;
  name: string;
  description: string;
};

export default function Friends() {
  const friends: OSSFriend[] = await fetch(
    "https://formbricks.com/api/oss-friends",
    {
      next: {
        revalidate: 3600,
      },
    }
  )
    .then(async (res) => res.json())
    .then(({ data }) => data)
    .catch(() => []);

  return (
    <div className="bg-white px-6 py-24 sm:py-32 lg:px-8 ">
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
          Open Source Friends
        </h2>
        <p className="mt-4 text-lg leading-8 text-gray-600">
          Meet our friends who also building and contributing to Open Source.
        </p>
      </div>
      <ul
        role="list"
        className=" mt-12 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
        {friends.map((friend) => (
          <li
            key={friend.name}
            className="overflow-hidden rounded-xl border border-gray-200 flex flex-col justify-between">
            <div>
              <div className="text-xl font-medium leading-6 text-gray-900 pb-1 px-6">
                {friend.name}
              </div>
              <p className="px-6 mt-2 text-gray-600 text-sm ">
                {friend.description}
              </p>
            </div>
            <div className="text-left px-6">
              <a
                href={friend.href}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-block w-full">
                <Button
                  type="button"
                  className="mt-4 mb-6 rounded-md bg-black text-sm font-semibold text-white shadow-sm">
                  Learn more
                </Button>
              </a>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

Submit your OSS project to OSS Friends

Now that we have our OSS Friends page ready, let's submit our OSS project to the API. We'll be using a submission form to submit our project.

The criteria to be accepted as an OSS Friend is straightforward:

The project must be open-source.
The project must have more than 100 stars on GitHub.
The project must be actively maintained.
You have already added a /oss-friends page to your website.

If you meet the criteria, you can submit your project to the API using the form.

Conclusion

Welcome to the friend-zone :) Now, please share your open source project in the comments section below. I would love to check it out!

Thank you for reading. I am Marc, an open-source advocate. I am building papermark.com - the open-source alternative to DocSend.

Have fun building!

Help me out!

If you found this article helpful and support other open source friends, I would be super grateful if you could give us a star! And don't forget to share your thoughts in the comments ❤️

https://github.com/mfts/papermark

Building background email notifications with Next.js, Resend and Trigger.dev

Marc Seitz — Thu, 11 Jan 2024 09:58:50 +0000

What you will find in this article?

Email notifications are the most common way to keep your users informed about actions taking on your application. Typical notifications include: someone follow you, someone likes your post, someone viewed your content. In this post, we are going to explore how we can create a simple asynchronous email notification system using Next.js, Resend and Trigger.dev.

We will use Next.js as the framework to build our application. We will use Resend to send emails and Trigger.dev to offload and send the emails asynchronously.

Papermark - the open-source DocSend alternative.

I would be super happy if you could give us a star! Don't forget to share your thoughts in the comments section ❤️
https://github.com/mfts/papermark

Setup the project

Let's go ahead and set up our project environment for our email background notification system. We'll be creating a Next.js app, and set up to Resend, and most importantly, Trigger to handle the asynchronous email notifications.

Setting up Next.js with TypeScript and Tailwindcss

We'll use create-next-app to generate a new Next.js project. We'll also be using TypeScript and Tailwind CSS, so make sure to select those options when prompted.

npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias

Install Resend and React-Email

Resend is a developer-first transactional email service. We'll use it to send emails to our users. react-email is a React component library that makes it easy to create beautiful emails.

npm install resend react-email

Install Trigger

Trigger is a background job framework for TypeScript. It allows you to offload long-running tasks from your main application and run them asynchronously. We'll use it to send emails asynchronously.

The Trigger CLI is the easiest way to set up Trigger in your new or existing Next.js project. For more info, check out their docs.

npx @trigger.dev/cli@latest init

Building the application

Now that we have our setup in place, we are ready to start building our application. The main features we'll cover are:

Setup Resend email
Write a API route to send email
Add a Trigger job to make the email sending asynchronous

#1 Setup Resend email

First, we'll need to set up Resend to send emails. We'll create a new file resend-notification.ts in our project and add the following code.

// lib/emails/resend-notification.ts
import { Resend } from "resend";
import { NotificationEmail } from "@/components/emails/notification";

const resend = new Resend(process.env.RESEND_API_KEY!);

export async function sendNotificationEmail({
  name,
  email,
}: {
  name: string | null | undefined;
  email: string | null | undefined;
}) {
  const emailTemplate = NotificationEmail({ name });
  try {
    // Send the email using the Resend API
    await resend.emails.send({
      from: "Marc from Papermark <marc@example.org>",
      to: email as string,
      subject: "You have a new view on your document!",
      react: emailTemplate,
    });
  } catch (error) {
    // Log any errors and re-throw the error
    console.log({ error });
    throw error;
  }
}

And the notification email template using react-email will look like this:

// components/emails/notification.tsx
import React from "react";
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
  Tailwind,
} from "@react-email/components";

export default function ViewedDocument({
  name,
}: {
  name: string | null | undefined;
}) {
  return (
    <Html>
      <Head />
      <Preview>See who visited your document</Preview>
      <Tailwind>
        <Body className="bg-white my-auto mx-auto font-sans">
          <Container className="my-10 mx-auto p-5 w-[465px]">
            <Heading className="text-2xl font-normal text-center p-0 mt-4 mb-8 mx-0">
              <span className="font-bold tracking-tighter">Papermark</span>
            </Heading>
            <Heading className="mx-0 my-7 p-0 text-center text-xl font-semibold text-black">
              New Document Visitor
            </Heading>
            <Text className="text-sm leading-6 text-black">
              Your document was just viewed by someone.
            </Text>
            <Text className="text-sm leading-6 text-black">
              You can get the detailed engagement insights like time-spent per
              page and total duration for this document on Papermark.
            </Text>
            <Section className="my-8 text-center">
              <Button
                className="bg-black rounded text-white text-xs font-semibold no-underline text-center"
                href={`${process.env.NEXT_PUBLIC_BASE_URL}/documents`}
                style={{ padding: "12px 20px" }}>
                See my document insights
              </Button>
            </Section>
            <Text className="text-sm">
              Cheers,
              <br />
              The Papermark Team
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
}

#2 Write a API route to send email

Now, we have our email template ready. We can use it to send emails to our users. We'll create a serverless function that takes the name and email of the user and sends them an email using the sendNotificationEmail function we created earlier.

// pages/api/send-notification.ts
import { NextApiRequest, NextApiResponse } from "next";
import prisma from "@/lib/prisma";
import { sendViewedDocumentEmail } from "@/lib/emails/resend-notification";

export const config = {
  maxDuration: 60,
};

export default async function handle(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // We only allow POST requests
  if (req.method !== "POST") {
    res.status(405).json({ message: "Method Not Allowed" });
    return;
  }

  // POST /api/send-notification
  try {
    const { viewId } = req.body as {
      viewId: string;
    };

    // Fetch the link to verify the settings
    const view = await prisma.view.findUnique({
      where: {
        id: viewId,
      },
      select: {
        document: {
          select: {
            owner: {
              select: {
                email: true,
                name: true,
              },
            },
          },
        },
      },
    });

    if (!view) {
      res.status(404).json({ message: "View / Document not found." });
      return;
    }

    // send email to document owner that document
    await sendViewedDocumentEmail({
      email: view.document.owner.email as string,
      name: view.document.owner.name as string,
    });

    res.status(200).json({ message: "Successfully sent notification", viewId });
    return;
  } catch (error) {
    console.log("Error:", error);
    return res.status(500).json({ message: (error as Error).message });
  }
}

#3 Add a Trigger job to make the email sending asynchronous

Our email sending function is ready, but we don't want to send emails synchronously and therefore wait until the email is send before the application responds to the user. We want to offload the email sending to a background job. We'll use Trigger to do that.

In the setup, Trigger CLI created a jobs directory in our project. We'll create a new file notification-job.ts in that directory and add the following code.

// jobs/notification-job.ts
import { client } from "@/trigger";
import { eventTrigger, retry } from "@trigger.dev/sdk";
import { z } from "zod";

client.defineJob({
  id: "send-notification",
  name: "Send Notification",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "link.viewed",
    schema: z.object({
      viewId: z.string(),
    }),
  }),
  run: async (payload, io, ctx) => {
    const { viewId } = payload;

    // get file url from document version
    const notification = await io.runTask(
      "send-notification",
      async () => {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_BASE_URL}/api/send-notification`,
          {
            method: "POST",
            body: JSON.stringify({ viewId }),
            headers: {
              "Content-Type": "application/json",
            },
          }
        );

        if (!response.ok) {
          await io.logger.error("Failed to send notification", { payload });
          return;
        }

        const { message } = (await response.json()) as {
          message: string;
        };

        await io.logger.info("Notification sent", { message, payload });
        return { message };
      },
      { retry: retry.standardBackoff }
    );

    return {
      success: true,
      message: "Successfully sent notification",
    };
  },
});

Add an export to the jobs index file, otherwise Trigger won't know about the job. Small detail but even I have forgotten about this and searched for the error for a good hour.

// jobs/index.ts
export * from "./notification-job";

Bonus: Prevent rogue access to the API route

We have our API route ready, but we don't want to allow anyone to access it. We want to make sure that only our application can access it. We'll use a simple header authentication key to do that.

In the Trigger job, we'll add the header to the request:

// jobs/notification-job.ts
..
...
const response = await fetch(
  `${process.env.NEXT_PUBLIC_BASE_URL}/api/jobs/send-notification`,
  {
    method: "POST",
    body: JSON.stringify({ viewId }),
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.INTERNAL_API_KEY}`, // <- add the authenication header with a local env variable
    },
  },
);
...
..

In the API route, we'll check if the API key matches just before the try {} catch {} block:

// pages/api/send-notification.ts
..
...
// Extract the API Key from the Authorization header
const authHeader = req.headers.authorization;
const token = authHeader?.split(" ")[1]; // Assuming the format is "Bearer [token]"

// Check if the API Key matches
if (token !== process.env.INTERNAL_API_KEY) {
  res.status(401).json({ message: "Unauthorized" });
  return;
}
...
..

Make sure you add the INTERNAL_API_KEY to your .env file.

# .env
INTERNAL_API_KEY="YOUR_API_KEY"

Conclusion

Voila! We have our asynchronous email notification system ready. We can now send emails to our users asynchronously without impacting user wait time. We can also use Trigger to offload many other tasks from our main application that we don't want the user to wait for.

Thank you for reading. I am Marc, an open-source advocate. I am building papermark.com - the open-source alternative to DocSend.

Keep on coding!

Help me out!

If you found this article helpful and got to understand Trigger and background tasks a bit better, I would be very happy if you could give us a star! And don't forget to share your thoughts in the comments ❤️

https://github.com/mfts/papermark

Building an Email-Protected Notion Page Using Next.js and React-Notion-X

Marc Seitz — Wed, 03 Jan 2024 12:17:59 +0000

What you will find in this article?

In the era of information sharing, protecting sensitive content is crucial. Notion has become a popular tool for content management, but what if you need to restrict access?

Email protection is a straightforward yet effective way to control who accesses your content. By requiring visitors to enter their email, you not only restrict access but also gather potential leads or feedback.

In this tutorial, we'll walk through building an email-protected Notion page using Next.js and react-notion-x.

Papermark - the open-source DocSend alternative.

I would be grateful if you could give us a star! Don't forget to share your thoughts in the comments section ❤️
https://github.com/mfts/papermark

Setup the project

Let's go ahead and set up our project environment for our Notion Lead Generator application. We'll be creating a Next.js app, react-notion-x and Tailwind CSS.

Setting up Next.js with TypeScript and Tailwindcss

We'll use create-next-app to generate a new Next.js project. We'll also be using TypeScript and Tailwind CSS, so make sure to select those options when prompted.

npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias

Setting up react-notion-x

Next, we'll install react-notion-x to fetch our Notion page data. notion-client, notion-utils, and notion-types are peer dependencies and contain helper methods for react-notion-x, so we'll install those as well.

npm install react-notion-x notion-client notion-utils notion-types

Building the application

Now that we have our setup in place, we are ready to start building our application. The main features we'll cover are:

Render Notion page content in React
Add email capture form to the page

#1 Render Notion page content in React

Let's create a component that contains the Notion page content. We'll create a new component components/notion-page.tsx and add the following code to it.

// components/notion-page.tsx
import { ExtendedRecordMap } from "notion-types";
import { NotionRenderer } from "react-notion-x";
// core styles shared by all of react-notion-x (required)
import "react-notion-x/src/styles.css";

export const NotionPage = ({ recordMap }: { recordMap: ExtendedRecordMap }) => {
  if (!recordMap) {
    return null;
  }

  return (
    <div className="bg-white">
      <NotionRenderer
        recordMap={recordMap}
        fullPage={true}
        darkMode={false}
        disableHeader={true}
      />
    </div>
  );
};

// pages/index.tsx
import { NotionAPI } from "notion-client";
import { type ExtendedRecordMap } from "notion-types";
import { parsePageId } from "notion-utils";
import { type GetStaticPropsContext } from "next";

const notion = new NotionAPI();

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const notionUrl = "https://www.notion.so/..."; // enter your Notion page URL here

  let pageId = null;
  let recordMap = null;

  const notionPageId = parsePageId(file, { uuid: false });
  if (!notionPageId) {
    return {
      notFound: true,
    };
  }

  pageId = notionPageId;
  recordMap = await notion.getPage(pageId);

  return {
    props: {
      notionData: {
        recordMap,
      },
    },
  };
};

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true,
  };
}

export default function Page({
  notionData,
}: {
  notionData: {
    recordMap: ExtendedRecordMap | null;
  };
}) {
  return <NotionPage notionData={notionData} />;
}

#2 Add email capture form to the page

Now that we have our Notion page content, we can add an email capture form to the page. We'll create a new component components/email-capture.tsx and add the following code to it.

// components/email-capture.tsx
import { useEffect } from "react";
import { Button } from "@/components/ui/button";

export default function EmailCapture({
  email,
  setEmail,
  onSubmitHandler,
  isLoading,
}: {
  email: string;
  setEmail: React.Dispatch<React.SetStateAction<string>>;
  onSubmitHandler: React.FormEventHandler<HTMLFormElement>;
  isLoading: boolean;
}) {
  return (
    <>
      <div className="flex h-screen flex-1 flex-col  px-6 py-12 lg:px-8 bg-black">
        <div className="sm:mx-auto sm:w-full sm:max-w-md">
          <h2 className="mt-10 text-2xl font-bold leading-9 tracking-tight text-white">
            Your action is requested to continue
          </h2>
        </div>

        <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-md">
          <form className="space-y-4" onSubmit={onSubmitHandler}>
            <div className="pb-5">
              <div className="relative rounded-md shadow-sm space-y-2">
                <label
                  htmlFor="email"
                  className="block text-sm font-medium leading-6 text-white">
                  Email address
                </label>
                <input
                  name="email"
                  id="email"
                  type="email"
                  autoComplete="email"
                  className="flex w-full rounded-md border-0 py-1.5 text-white bg-black shadow-sm ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-300 sm:text-sm sm:leading-6"
                  placeholder="Enter email"
                  onChange={(e) => {
                    setEmail(e.target.value);
                  }}
                  aria-invalid="true"
                />
                <p className="text-sm text-gray-600">
                  This data will be shared with the owner of this Notion page.
                </p>
              </div>
            </div>

            <div className="flex justify-center">
              <Button type="submit" className="w-1/3" loading={isLoading}>
                Continue
              </Button>
            </div>
          </form>
        </div>
      </div>
    </>
  );
}

// pages/index.tsx
// ...

export default function Page({
  notionData,
}: {
  notionData: {
    recordMap: ExtendedRecordMap | null;
  };
}) {
  const [email, setEmail] = useState<string>("");
  const [submitted, setSubmitted] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsLoading(true);
    const res = await fetch(`< API_ENDPOINT >`, {
      method: "POST",
      body: JSON.stringify({ email }),
    });
    setSubmitted(true);
    setIsLoading(false);
  };

  // If email is not submitted, show the access form
  if (!submitted) {
    return (
      <EmailCapture
        email={email}
        setEmail={setEmail}
        onSubmitHandler={handleSubmit}
        isLoading={isLoading}
      />
    );
  }

  return (
    <div className="bg-gray-950">
      {submitted && notionData?.recordMap ? (
        <NotionPage recordMap={notionData.recordMap} />
      ) : null}
    </div>
  );
}

Caveat: react-notion-x works only with publicly accessible Notion pages. However, don't fret because the Notion page content is SSR'd on the server, so it's not publicly accessible and there's no place where the public Notion id is exposed in the client.

Conclusion

Amazing! You can now create an email-protected Notion page using Next.js and react-notion-x. Start sharing your content with the world and collect leads and feedback from real people!

Thank you for reading. I am Marc, an open-source advocate. I am building papermark.com - the open-source alternative to DocSend.

Have fun building!

Help me out!

If you found this article helpful and got to understand react-notion-x, Next.js and SSR, I would be extremely glad if you could give us a star! And don't forget to share your thoughts in the comments ❤️

https://github.com/mfts/papermark

Open Source Document Sharing platform built developer-friendly: launches, updates, stats

Marc Seitz — Mon, 23 Oct 2023 16:46:41 +0000

What you will find in this article?

Intro
Hacker News launch
How Papermark was built?
Stats and progress for last months
What is the future?

Intro

Couple months ago I started building Papermark as an Open Source Alternative to DocSend.

For the last 2 months we got users and customers and a lot of feedback.

We noticed a huge pull from founders and investors, who sending Pitch Decks.

Today we try to discover Papermark to become developer-friendly.

Papermark on Hacker News

So I launched on Hacker News to better understand how to make it more developer friendly.

https://news.ycombinator.com/show

I would be absolutely thrilled if you could support us our launch today! Don't forget to share your thoughts in the comments section ❤️

Why I started read the story here on Hacker news
https://news.ycombinator.com/show

How it started and was built?

It started as a tweet. And I got pretty excited about it and with enormous support of Open Source community I just continued building.

Building the product
I spent the next couple of weekends to build more features and polish the UI.

And I took the time to document how I built it open-source out in the public!

Post #1
👉 Building an Open Source DocSend alternative with Next.js, Vercel Blob and Postgres

Post #2
👉 Building a Beautiful Product Onboarding 👋 with Next.JS , Framer Motion, and Tailwind CSS

Post #3
👉 How to send a warm welcome email with Resend, Next-Auth and React-Email

Post #4
👉 Building a Real-Time Analytics Dashboard with Next.js, Tinybird, and Tremor: A Comprehensive Guide

Post #5
👉 Building a Document Viewer with react-pdf

Post #6
👉 Build an Expandable / Collapsible Data Table with 2 shadcn/ui Components

Project stats at the moment

1000+ stars
2000+ users
10+ contributors
15000 monthly views

What is in the future?

A developer-friendly document sharing platform doesn’t exist yet! We believe that document analytics should be available to anyone that is creating and sharing documents.

Rich observability: Don’t get left in the dark when sharing a document. Papermark will provide full transparency by exposing all document-related events through webhooks.
Fast performance: We are built on top of Vercel to serve your documents fast wherever your recipients are located and watching the engagement data arrive in real-time with Clickhouse under the hood.
Developer-friendly: We will be expanding the platform with a clean REST API, so you can create, share, connect and expand documents that you are sending both externally and internally.

Check our story on Hacker News and leave your thoughts on how to make it more user friendly
https://news.ycombinator.com/show

From Tweet to Launch 🚀 – My Open Source Journey

Marc Seitz — Mon, 04 Sep 2023 20:11:28 +0000

What you will find in this article?

Are you intrigued about taking your idea from a mere tweet to launching it as an open-source project? In this article, you will walk through my journey of building Papermark, where I'll share the importance of community engagement, lessons learned, and the tools and technologies I used to bring this project to life.

Papermark - the open-source DocSend alternative

Before we begin, let me introduce you to Papermark. It's the open-source DocSend alternative that helps you manage secure document sharing, including real-time analytics and custom domains. It's all open-source!

I would be absolutely thrilled if you could support us our launch today! Don't forget to share your thoughts in the comments section ❤️
https://www.producthunt.com/posts/papermark-3

The Tweet

On May 23, 2023, I bet my wife that a tweet would get 50 likes so I can work on an open-source project idea.

The tweet received 265 likes.

The MVP

I knew it was possible to build out the MVP in a weekend because of the incredibly powerful tech stack:

framework: Next.js
styling: Tailwind CSS
database: Vercel Postgres
file storage: Vercel Blob
database ORM: Prisma
authentication: Next-Auth

And right on time it was done! The launch tweet received 450 likes and over 95,000 views. I was onto something!

Building the product

I spent the next couple of weekends to build more features and polish the UI.

And I took the time to document how I built it open-source out in the public!

Finally, after the product felt "ready", I launched it on Product Hunt.

The Launch

On September 4, 2023, we launched on Product Hunt.

Conclusion

From a tweet to a launch, building Papermark has been a rewarding journey. Along the way, I learned the importance of community engagement and the role of choosing the right tools and technologies in building a successful open-source project.

I am Marc, an open-source advocate and the created the open-source project behind papermark.com - the open-source DocSend alternative. Remember, the journey of coding is a continuous process of learning and discovery. So, keep coding, my friends!

Help me out!

If you found this article interesting and maybe inspired you to build your own open-source project, I would be extremely glad if you could show your support on Product Hunt! And don't forget to share your thoughts in the comments ❤️

https://www.producthunt.com/posts/papermark-3

Build an Expandable / Collapsible Data Table with 2 shadcn/ui Components

Marc Seitz — Wed, 16 Aug 2023 12:54:04 +0000

What you will find in this article?

In the modern digital age, the way we present data to users significantly impacts their experience. A responsive, well-designed table not only provides clarity but also enhances user engagement. This article will guide you on building a data table that expands and reveals more data rows and is an essential component for swift data viewing.

Of course, there is Tanstack table, but it's overkill for most of the simpler usecases. Therefore, we are using shadcn/ui (only two components).

We will use Next.js and Tailwindcss ensuring our table looks stylish and performs optimally.

Papermark - Your open-source DocSend alternative.

Before we begin, allow me to introduce Papermark. It's an open-source project for securely sharing documents with built-in real-time, page-by-page analytics.

If you're loving the concept, I'd greatly appreciate a star! And, as always, your thoughts and feedback in the comments section are highly valued ❤️

https://github.com/mfts/papermark

Setup the project

It's time to set up our project environment. We'll start with a Next.js app and then layer in our responsive table components.

Set up tea

It's a good idea to have a package manager handy, like tea. It'll handle your development environment and simplify your (programming) life!

sh <(curl https://tea.xyz)

# --- OR ---
# using brew
brew install teaxyz/pkgs/tea-cli

tea frees you to focus on your code, as it takes care of installing node, npm, vercel and any other packages you may need. The best part is, tea installs all packages in a dedicated directory (default: ~/.tea), keeping your system files neat and tidy.

Set up Next.js with TypeScript and Tailwindcss

We will use create-next-app to generate a new Next.js project. We will also be using TypeScript and Tailwind CSS, so make sure to select those options when prompted.

npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias

Building the Expandable Table

Having set up the environment, we can now focus on crafting our responsive, expandable table.

In this section, we will utilize the components from shadcn/ui to create a responsive and expandable table. shadcn/ui provides us with modular and highly customizable components, making it easier to develop user-friendly interfaces.

#1 Table Structure and Styling

Using the Table component from shadcn/ui, we'll design a table that's both responsive and visually appealing.

Head over to ui.shadcn.com and grab the <Table /> component.

# run this command in your Next.js project
npx shadcn-ui@latest add table

// components/links-table.tsx
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/ui/table";

export default function LinksTable() {
  const links = [...] // these are link objects, we'll get there later

  return (
    <div className="w-full sm:p-4">
      <h2 className="p-4">All links</h2>
      <div className="rounded-md sm:border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="font-medium">Name</TableHead>
              <TableHead className="font-medium">Link</TableHead>
              <TableHead className="font-medium">Views</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {links ? (
              links.map((link) => (
                <TableRow key={link.id}>
                  <TableCell>{link.name}</TableCell>
                  <TableCell>{link.id}</TableCell>
                  <TableCell>{link.viewCount}</TableCell>
                </TableRow>
              ))
            ) : null}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

#2 Table Interactivity

The logic behind the table's expandability is crucial. We need to ensure smooth transitions and ease of access to data.

For this, we are using the second shadcn/ui component: <Collapsible />.

Head over to ui.shadcn.com and grab the Collapsible component.

# run this command in your Next.js project
npx shadcn-ui@latest add collapsible

We are creating a new component that will contain our expanded data of visitors for each link

// components/links-visitors.tsx
import { TableCell, TableRow } from "@/components/ui/table";
import { Gauge } from "@/components/ui/gauge";

export default function LinksVisitors({linkId}: {linkId: string) {
  const visitors = [...] // these are the visitor objects based on the linkId

  return (
    <>
      {visitors ? ( 
        visitors.map((visitor) => (
          <TableRow key={visitor.id}>
            <TableCell>{visitor.name}</TableCell>
            <TableCell>{visitor.totalDuration}</TableCell>
            <TableCell>
              <Gauge value={view.completionRate} />
            </TableCell>
          </TableRow>
        ))
      ) : null}
    </>
  );
}

Small excursion ✨

Now, you might ask yourself, what is this <Gauge /> component?

It's a beautiful Vercel UI component that indicates a status from 0 to 100. I recreated it with Tailwindcss and made it open-source 🎉

More detail and source code in this tweet: https://twitter.com/mfts0/status/1691110169319559169

Ok back to our expanding table. Let's add the <Collapsible /> component to our first component, the links-table

// components/links-table.tsx
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from "@/components/ui/table";

import {
  Collapsible, CollapsibleContent, CollapsibleTrigger,
} from "@/components/ui/collapsible";

import LinksVisitors from "@/components/links-visitors.tsx"

export default function LinksTable() {
  const links = [...] // these are link objects, we'll get there later

  return (
    <div className="w-full sm:p-4">
      <h2 className="p-4">All links</h2>
      <div className="rounded-md sm:border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="font-medium">Name</TableHead>
              <TableHead className="font-medium">Link</TableHead>
              <TableHead className="font-medium">Views</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {links ? (
              links.map((link) => (
                <Collapsible key={link.id} asChild>
                  <>
                    <TableRow>
                      <TableCell>{link.name}</TableCell>
                      <TableCell>{link.id}</TableCell>
                      <TableCell>{link.viewCount}
                        <CollapsibleTrigger asChild>
                          <div>{link.viewCount}</div>
                        </CollapsibleTrigger>
                      </TableCell>
                    </TableRow>
                    <CollapsibleContent asChild>
                      <LinksVisitors linkId={link.id} />
                    </CollapsibleContent>
                  </>
                </Collapsible>
              ))
            ) : null}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

It's important to note that we have to wrap the TableRow in a fragment (<></>) and use the property asChild on the <Collapsible /> component in order for everything to function properly.

And there you have it, an impeccably designed, responsive expandable (or collapsible) table, all set to elevate your data presentation!

Collapsed table view

Expanded table view

Conclusion

You've successfully built a responsive, expandable/collapsible table for quick data viewing using Next.js and Tailwindcss. While this article provides a foundational guide, you can further enhance the table, adding sorting functionalities, filters, and more!

Thank you for joining me on this journey. I'm Marc, an advocate for open-source software. I'm passionately working on papermark.com - your go-to open-source alternative to DocSend.

Help me out!

If you found this guide enlightening and have a clearer vision for building simple data tables, please give us a star! Your feedback in the comments propels us forward ❤️

https://github.com/mfts/papermark

Building a Document Viewer with react-pdf

Marc Seitz — Wed, 26 Jul 2023 17:51:16 +0000

What you will find in this article?

PDF viewers have become essential components in many web applications. For instance, they are widely used in educational platforms, online libraries, and any other applications that involve document viewing. In this post, we will explore how we can create a beautiful page-by-page PDF viewer using react-pdf.

Papermark - the open-source DocSend alternative.

Before we kick off, let me introduce you to Papermark. It's an open-source project for securely sharing documents that features a beautiful full-screen viewer for PDF documents.

I would be absolutely thrilled if you could give us a star! Don't forget to share your thoughts in the comments section ❤️

https://github.com/mfts/papermark

Setup the project

Let's set up our project environment. We will be setting up a Next.js app and installing the required libraries.

Set up tea

It's a good idea to have a package manager handy, like tea. It'll handle your development environment and simplify your (programming) life!

sh <(curl https://tea.xyz)

# --- OR ---
# using brew
brew install teaxyz/pkgs/tea-cli

Set up Next.js with TypeScript and Tailwindcss

We will use create-next-app to generate a new Next.js project. We will also be using TypeScript and Tailwind CSS, so make sure to select those options when prompted.

npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias

Install react-pdf

There are actually two npm packages called "react-pdf": one is for displaying PDFs and one is for generating PDFs. Today we are focusing on the one to generate PDFs: https://github.com/wojtekmaj/react-pdf.

# Navigate to your Next.js repo
cd my-app

# Install react-pdf
npm install react-pdf

Building the application

Now that we have our setup in place, we are ready to start building our application.

Set up the PDF Viewer

The ability to programmatically configure pipes and datasources for Tinybird offers a significant advantage. This flexibility enables us to treat our data infrastructure as code, meaning that the entire configuration can be committed into a version control system. For an open-source project like Papermark, this capability is highly beneficial. It fosters transparency and collaboration, as contributors can readily understand the data structure without any ambiguity.

We set up Tinybird pipes and datasource as follows:

// components/pdfviewer.tsx
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
import { useEffect, useRef, useState } from "react";
import { Document, Page, pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

export default function PDFViewer(props: any) {
  const [numPages, setNumPages] = useState<number>(0);
  const [pageNumber, setPageNumber] = useState<number>(1); // start on first page
  const [loading, setLoading] = useState(true);
  const [pageWidth, setPageWidth] = useState(0);

  function onDocumentLoadSuccess({
    numPages: nextNumPages,
  }: {
    numPages: number;
  }) {
    setNumPages(nextNumPages);
  }

  function onPageLoadSuccess() {
    setPageWidth(window.innerWidth);
    setLoading(false);
  }

  const options = {
    cMapUrl: "cmaps/",
    cMapPacked: true,
    standardFontDataUrl: "standard_fonts/",
  };

  // Go to next page
  function goToNextPage() {
    setPageNumber((prevPageNumber) => prevPageNumber + 1);
  }

  function goToPreviousPage() {
    setPageNumber((prevPageNumber) => prevPageNumber - 1);
  }


  return (
    <>
      <Nav pageNumber={pageNumber} numPages={numPages} />
      <div
        hidden={loading}
        style={{ height: "calc(100vh - 64px)" }}
        className="flex items-center"
      >
        <div
          className={`flex items-center justify-between w-full absolute z-10 px-2`}
        >
          <button
            onClick={goToPreviousPage}
            disabled={pageNumber <= 1}
            className="relative h-[calc(100vh - 64px)] px-2 py-24 text-gray-400 hover:text-gray-50 focus:z-20"
          >
            <span className="sr-only">Previous</span>
            <ChevronLeftIcon className="h-10 w-10" aria-hidden="true" />
          </button>
          <button
            onClick={goToNextPage}
            disabled={pageNumber >= numPages!}
            className="relative h-[calc(100vh - 64px)] px-2 py-24 text-gray-400 hover:text-gray-50 focus:z-20"
          >
            <span className="sr-only">Next</span>
            <ChevronRightIcon className="h-10 w-10" aria-hidden="true" />
          </button>
        </div>

        <div className="h-full flex justify-center mx-auto">
          <Document
            file={props.file}
            onLoadSuccess={onDocumentLoadSuccess}
            options={options}
            renderMode="canvas"
            className=""
          >
            <Page
              className=""
              key={pageNumber}
              pageNumber={pageNumber}
              renderAnnotationLayer={false}
              renderTextLayer={false}
              onLoadSuccess={onPageLoadSuccess}
              onRenderError={() => setLoading(false)}
              width={Math.max(pageWidth * 0.8, 390)}
            />
          </Document>
        </div>
      </div>
    </>
  );
}


function Nav({pageNumber, numPages}: {pageNumber: number, numPages: number}) {
  return (
    <nav className="bg-black">
      <div className="mx-auto px-2 sm:px-6 lg:px-8">
        <div className="relative flex h-16 items-center justify-between">
          <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
            <div className="flex flex-shrink-0 items-center">
              <p className="text-2xl font-bold tracking-tighter text-white">
                Papermark
              </p>
            </div>
          </div>
          <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
            <div className="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium">
              <span>{pageNumber}</span>
              <span className="text-gray-400"> / {numPages}</span>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

Let's break it down what's happening here:

From react-pdf, we are using Document and Page component. In addition, we are loading the pre-packaged version of pdfjs to initialize a worker in the browser.

import { Document, Page, pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

Next, we are writing two function that 1) count the total number of pages (once) and 2) adjust the page width as needed (per page)

// ...
export default function PDFViewer(props: any) {
  // useState variables

  function onDocumentLoadSuccess({
    numPages: nextNumPages,
  }: {
    numPages: number;
  }) {
    setNumPages(nextNumPages);
  }

  function onPageLoadSuccess() {
    setPageWidth(window.innerWidth);
    setLoading(false);
  }

  // ...
}

Next, we use the Document and Page components. This is the core of the PDF viewer. Important to note that Document takes a file prop, that can be a URL, base64 content, Uint8Array, and more. In my case, I'm loading a URL to a file.

// ...
export default function PDFViewer(props: any) {
  // ...
  return (
    <div className="h-full flex justify-center mx-auto">
      <Document
        file={props.file}
        onLoadSuccess={onDocumentLoadSuccess}
        options={options}
        renderMode="canvas"
        className=""
      >
        <Page
          className=""
          key={pageNumber}
          pageNumber={pageNumber}
          renderAnnotationLayer={false}
          renderTextLayer={false}
          onLoadSuccess={onPageLoadSuccess}
          onRenderError={() => setLoading(false)}
          width={Math.max(pageWidth * 0.8, 390)}
        />
      </Document>
    </div>
  )
}

We also added a navigation bar with showing the current page number and buttons for navigating to the next / previous page of the document.

You can use the PDF Viewer component anywhere in your application to visualize PDFs beautifully.

Tada 🎉 The PDF Viewer component is ready!

Conclusion

That's it! We've built a beautiful PDF Viewer component for displaying PDF documents using react-pdf, and Next.js.

Thank you for reading. I'm Marc, an open-source advocate. I am building papermark.com - the open-source alternative to DocSend with millisecond-accurate page analytics.

Help me out!

If you found this article helpful and got to understand react-pdf better, I would be eternally grateful if you could give us a star! And don't forget to share your thoughts in the comments ❤️

https://github.com/mfts/papermark

Building any open-source projects this weekend?

Marc Seitz — Fri, 21 Jul 2023 15:38:37 +0000

Weekends are my sacred time ... where I build my open-source projects.

Papermark - the open-source DocSend alternative.

This weekend, I'll be building on Papermark. It's an open-source project for securely sharing documents with built-in real-time, page-by-page analytics.

I would be absolutely thrilled if you could give us a star! Don't forget to share your projects and thoughts in the comments section ❤️

https://github.com/mfts/papermark

Live Updates 🔴

I will share periodic updates as I'm building :)

I'm interested in what you are working on (this weekend)? Any open-source projects?

Building a Real-Time Analytics Dashboard with Next.js, Tinybird, and Tremor: A Comprehensive Guide

Marc Seitz — Thu, 06 Jul 2023 20:08:05 +0000

What you will find in this article?

Real-time analytics have become a vital part of today's applications, especially when it comes to understanding user behavior and improving your platform based on data-driven insights. Even more so, if your users rely on your product to deliver them with insights.

In this post, we are going to explore how we can create a real-time analytics dashboard for page views using Tinybird, Tremor.so, and Next.js.

We will be using Tinybird for data ingestion and real-time data analysis, Tremor for data visualization, and Next.js for server-side rendering.

Papermark - the open-source DocSend alternative.

Before we kick off, let me introduce you to Papermark. It's an open-source project for securely sharing documents with built-in real-time, page-by-page analytics, powered by Tinybird and visualized by Tremor.

I would be absolutely thrilled if you could give us a star! Don't forget to share your thoughts in the comments section ❤️

https://github.com/mfts/papermark

Setup the project

Let's set up our project environment. We will be setting up a Next.js app, installing Tinybird CLI and configuring the needed services and tools.

Set up tea

It's a good idea to have a package manager handy, like tea. It'll handle your development environment and simplify your (programming) life!

sh <(curl https://tea.xyz)

# --- OR ---
# using brew
brew install teaxyz/pkgs/tea-cli

tea frees you to focus on your code, as it takes care of installing python and pipenv (which I'm using to run tinybird-cli), node, npm and any other packages you may need. The best part is, tea installs all packages in a dedicated directory (default: ~/.tea), keeping your system files neat and tidy.

Set up Next.js with TypeScript and Tailwindcss

We will use create-next-app to generate a new Next.js project. We will also be using TypeScript and Tailwind CSS, so make sure to select those options when prompted.

npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias

Install Tinybird

Tinybird's command line interface (CLI) helps us to manage data sources and pipes. I'm installing tinybird-cli using pipenv, which manages a virtual environment for my pip packages, in our local environment.

# Navigate to your Next.js repo
cd my-app

# Create a new virtual environment and install Tinybird CLI
# if you install `tea` in the previous step, then tea will take care of installing pipenv and its dependencies
pipenv install tinybird-cli

# Activate the virtual environment
pipenv shell

Configuring Tinybird

Head over to tinybird.co and create a free account. You need to have a Tinybird account and an associated token. You can get the token from your Tinybird's dashboard.

# Authenticate with tinybird-cli using your auth token when prompted
tb auth

A .tinyb file will be added to your repo's root. No need to modify it. However add it it to your .gitignore file to avoid exposing your token.

echo ".tinyb" >> .gitignore

Building the application

Now that we have our setup in place, we are ready to start building our application. The main features we'll cover are:

Tinybird Pipes and Datasources
Page View Recording
Tremor Bar Chart

#1 Tinybird Pipes and Datasource

We set up Tinybird pipes and datasource as follows:

mkdir -p lib/tinybird/{datasources,endpoints}

1. Datasources

This is basically a versioned schema for page_views. This the only datasource we need for ingesting, storing and reading analytics about page views. Feel free to add/remove fields.

# lib/tinybird/datasources/page_views.datasource
VERSION 1

DESCRIPTION >
  Page views are events when a user views a document

SCHEMA >
  `id` String `json:$.id`,
  `linkId` String `json:$.linkId`,
  `documentId` String `json:$.documentId`,
  `viewId` String `json:$.viewId`,
  # Unix timestamp
  `time` Int64 `json:$.time`,
  `duration` UInt32 `json:$.duration`,
  # The page number
  `pageNumber` LowCardinality(String) `json:$.pageNumber`,
  `country` String `json:$.country`,
  `city` String `json:$.city`,
  `region` String `json:$.region`,
  `latitude` String `json:$.latitude`,
  `longitude` String `json:$.longitude`,
  `ua` String `json:$.ua`,
  `browser` String `json:$.browser`,
  `browser_version` String `json:$.browser_version`,
  `engine` String `json:$.engine`,
  `engine_version` String `json:$.engine_version`,
  `os` String `json:$.os`,
  `os_version` String `json:$.os_version`,
  `device` String `json:$.device`,
  `device_vendor` String `json:$.device_vendor`,
  `device_model` String `json:$.device_model`,
  `cpu_architecture` String `json:$.cpu_architecture`,
  `bot` UInt8 `json:$.bot`,
  `referer` String `json:$.referer`,
  `referer_url` String `json:$.referer_url`


ENGINE "MergeTree"
ENGINE_SORTING_KEY "linkId,documentId,viewId,pageNumber,time,id"

2. Pipes

In Tinybird, a pipe is a series of transformations that are applied to your data. These transformations could include anything from simple data cleaning operations to complex aggregations and analytics.

We have one versioned pipe (also sometimes called endpoint) to retrieve page_view data. This Tinybird pipe, named endpoint, calculates the average duration users spend on each page of a specific document within a defined timeframe, and presents the results in ascending order by page number.

# lib/endpoints/get_average_page_duration.pipe
VERSION 1

NODE endpoint
SQL >
    %
    SELECT
        pageNumber,
        AVG(duration) AS avg_duration
    FROM
        page_views__v1
    WHERE
        documentId = {{ String(documentId, required=True) }}
        AND time >= {{ Int64(since, required=True) }}
    GROUP BY
        pageNumber
    ORDER BY
        pageNumber ASC

Now that we have Tinybird datasources and pipes set up, you need to push them to your Tinybird's account using the CLI.

# Navigate to the directory containing your datasource and pipe files
cd lib/tinybird

# Push your files to Tinybird
tb push datasources/*.datasource pipes/*.pipe

3. Typescript functions

Let's set up the appropriate typescript functions to actually send and retrieve data from Tinybird. We are using zod and chronark's zod-bird library

This function is for retrieving data from Tinybird:

// lib/tinybird/pipes.ts
import { z } from "zod";
import { Tinybird } from "@chronark/zod-bird";

const tb = new Tinybird({ token: process.env.TINYBIRD_TOKEN! });

export const getTotalAvgPageDuration = tb.buildPipe({
  pipe: "get_total_average_page_duration__v1",
  parameters: z.object({
    documentId: z.string(),
    since: z.number(),
  }),
  data: z.object({
    pageNumber: z.string(),
    avg_duration: z.number(),
  }),
});

This function is for sending data to Tinybird:

// lib/tinybird/publish.ts
import { z } from "zod";
import { Tinybird } from "@chronark/zod-bird";

const tb = new Tinybird({ token: process.env.TINYBIRD_TOKEN! });

export const publishPageView = tb.buildIngestEndpoint({
  datasource: "page_views__v1",
  event: z.object({
    id: z.string(),
    linkId: z.string(),
    documentId: z.string(),
    viewId: z.string(),
    time: z.number().int(),
    duration: z.number().int(),
    pageNumber: z.string(),
    country: z.string().optional().default("Unknown"),
    city: z.string().optional().default("Unknown"),
    region: z.string().optional().default("Unknown"),
    latitude: z.string().optional().default("Unknown"),
    longitude: z.string().optional().default("Unknown"),
    ua: z.string().optional().default("Unknown"),
    browser: z.string().optional().default("Unknown"),
    browser_version: z.string().optional().default("Unknown"),
    engine: z.string().optional().default("Unknown"),
    engine_version: z.string().optional().default("Unknown"),
    os: z.string().optional().default("Unknown"),
    os_version: z.string().optional().default("Unknown"),
    device: z.string().optional().default("Desktop"),
    device_vendor: z.string().optional().default("Unknown"),
    device_model: z.string().optional().default("Unknown"),
    cpu_architecture: z.string().optional().default("Unknown"),
    bot: z.boolean().optional(),
    referer: z.string().optional().default("(direct)"),
    referer_url: z.string().optional().default("(direct)"),
  }),
});

4. Configure Auth Token for production

Don't forget to add TINYBIRD_TOKEN to your .env file. It's advised that you create a token that has the minimum scope for your operations:

Read from specific pipe
Append to specific datasource

Congrats! 🎉 You successfully configured Tinybird and ready to move to the next

#2 Page View Recording

We will capture the page view event in our PDFviewer component and publish it to our Tinybird's datasource.

Let's build an API function to send data to Tinybird every time a page is viewed:

// pages/api/record_view.ts
import { NextApiRequest, NextApiResponse } from "next";
import { publishPageView } from "@/lib/tinybird";
import { z } from "zod";
import { v4 as uuidv4 } from 'uuid';

// Define the validation schema
const bodyValidation = z.object({
  id: z.string(),
  linkId: z.string(),
  documentId: z.string(),
  viewId: z.string(),
  time: z.number().int(),
  duration: z.number().int(),
  pageNumber: z.string(),
  ...
});

export default async function handle(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // We only allow POST requests
  if (req.method !== "POST") {
    res.status(405).json({ message: "Method Not Allowed" });
    return;
  }

  const { linkId, documentId, viewId, duration, pageNumber } = req.body;
  const time = Date.now(); // in milliseconds
  const pageViewId = uuidv4();

  const pageViewObject = {
    id: pageViewId,
    linkId,
    documentId,
    viewId,
    time,
    duration,
    pageNumber: pageNumber.toString(),
    ...
  };

  const result = bodyValidation.safeParse(pageViewObject);
  if (!result.success) {
    return res.status(400).json(
      { error: `Invalid body: ${result.error.message}` }
    );
  }

  try {
    await publishPageView(result.data);
    res.status(200).json({ message: "View recorded" });
  } catch (error) {
    res.status(500).json({ message: (error as Error).message });
  }
}

And finally the PDFViewer component that sends the request:

// components/PDFViewer.tsx
import { useState, useEffect } from 'react';

const PDFViewer = () => {
  const [pageNumber, setPageNumber] = useState<number>(1)

  useEffect(() => {
    startTime = Date.now(); // update the start time for the new page

    // when component unmounts, calculate duration and track page view
    return () => {
      const endTime = Date.now();
      const duration = Math.round(endTime - startTime);
      trackPageView(duration);
    };
  }, [pageNumber]); // monitor pageNumber for changes

  async function trackPageView(duration: number = 0) {
    await fetch("/api/record_view", {
      method: "POST",
      body: JSON.stringify({
        linkId: props.linkId,
        documentId: props.documentId,
        viewId: props.viewId,
        duration: duration,
        pageNumber: pageNumber,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    });
  }

  return (
    // Your PDF Viewer implementation
  );
}

export default PDFViewer;

#3 Tremor Bar Chart

Let's now create a bar chart to display the page views for each document. We are using tremor.so to build our beautiful dashboard.

# Install tremor with their CLI 
npx @tremor/cli@latest init

// components/bar-chart.tsx
import { BarChart } from "@tremor/react";

const timeFormatter = (number) => {
  const totalSeconds = Math.floor(number / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = Math.round(totalSeconds % 60);

  // Adding zero padding if seconds less than 10
  const secondsFormatted = seconds < 10 ? `0${seconds}` : `${seconds}`;

  return `${minutes}:${secondsFormatted}`;
};

export default function BarChartComponent({data}) {
  return (
    <BarChart
      className="mt-6 rounded-tremor-small"
      data={data}
      index="pageNumber"
      categories={["Time spent per page"]}
      colors={["gray"]}
      valueFormatter={timeFormatter}
      yAxisWidth={50}
      showGridLines={false}
    />
  );
}

// lib/swr/use-stats.ts
import { useRouter } from "next/router";
import useSWR from "swr";
import { getTotalAvgPageDuration } from "@/lib/tinybird/pipes";

export function useStats() {
  const router = useRouter();
  const { id } = router.query as { id: string };

  const { data, error } = useSWR(
    id,
    () => getTotalAvgPageDuration({ documentId: id, since: 0 
}),
    {
      dedupingInterval: 10000,
    }
  );

  return {
    durationData: data,
    isLoading: !error && !data,
    error,
  };
}

// pages/document/[id].tsx
import { useDocument } from "@/lib/swr/use-document";
import { useStats } from "@/lib/swr/use-stats";
import BarChartComponent from "@/components/bar-chart";

export default function DocumentPage() {
  const { document, error: documentError } = useDocument();
  const { stats, error: statsError } = useStats();

  if (documentError) {
    // handle document error
  }

  if (statsError) {
    // handle stats error
  }

  return (
    <>
      <main>
        {document && (
          <header>
            <h1>{document.name}</h1>
            {stats && <BarChartComponent data={stats.durationData} />}
          </header>
        )}
      </main>
    </>
  );
}

Voila 🎉 The Bar Chart with accurate page-by-page time!

Conclusion

That's it! We've built a real-time analytics dashboard for page views using Tinybird, Tremor, and Next.js. While the example here is simple, the same concepts can be expanded to handle any kind of analytics your app might need to perform.

Thank you for reading. I'm Marc, an open-source advocate. I am building papermark.com - the open-source alternative to DocSend with millisecond-accurate page analytics.

Help me out!

If you found this article helpful and got to understand Tinybird and dashboarding with Tremor better, I would be eternally grateful if you could give us a star! And don't forget to share your thoughts in the comments ❤️

https://github.com/mfts/papermark

How to write a perfect README for your GitHub project

Marc Seitz — Mon, 26 Jun 2023 19:54:58 +0000

What you will find in this article?

You've probably stumbled upon many GitHub repositories, each with their own unique README page. Have you ever wondered what makes a good README? The kind that stands out, draws you in, and most importantly, helps you understand the project?

In this article, we'll show you how to craft the perfect GitHub README page.

TL;DR: You can just copy my README here

Papermark - the open-source alternative to DocSend.

Before we begin, let me introduce you to Papermark. It's an open-source alternative to DocSend that helps you manage secure document sharing, including real-time analytics. It's all open-source!

I would be absolutely thrilled if you could give us a star! Don't forget to share your thoughts in the comments section ❤️
https://github.com/mfts/papermark

Laying the groundwork

Alright, now let's get our hands dirty. We're going to guide you through the key components of a perfect README and how to craft each section.

Set up your markdown environment

First off, you need to set up an environment to write your README. All GitHub READMEs are written in Markdown, a lightweight and easy-to-use syntax for styling your writing. If you're not familiar with Markdown, don't worry. It's as easy as pie to pick up.

I usually write my README alongside the project code, but you can also create a separate README file. It's up to you. Just make sure you have a README.md file in your project root directory.

I use Visual Studio Code as my code editor and there's a handy extension called Markdown All in One that lets you preview your Markdown as you type. It's a great way to see how your README will look on GitHub.

Starting with a bang: The project title and description

Every README should start with a clear, compelling title followed by a brief project description. This is the first thing people see when they land on your repo, so make sure it's engaging and descriptive.

Here's an example:



# Papermark

Papermark is an open-source document sharing alternative to DocSend with built-in analytics.

The all-important 'how-to': Installation and usage

This is the meat and potatoes of your README. You need to guide your users on how to install and use your project. Be clear, precise, and if necessary, provide examples.

Here's an example:



## Installation

First, clone this repository:

<!-- start:code block -->
# Clone this repository
git clone https://github.com/mfts/papermark.git
cd papermark

# Install dependencies
npm install

# Copy the example .env file
cp .env.example .env

# Initialize the database
npx prisma generate
npx prisma db push

# Run the app
npm run dev

# Open http://localhost:3000 in your browser
open http://localhost:3000
<!-- end:code block -->

Demo: Show, don't just tell

A picture is worth a thousand words, and a GIF is worth even more. Use screenshots or GIFs to show off your project's features. This makes it easier for users to understand what your project does.

Contribute: Encourage collaboration

Open-source is all about community. Don't forget to include a section encouraging others to contribute. Outline the steps to contribute, and link to your project's CONTRIBUTING.md file if it has one.

Here's a simple example:



## Contributing

Papermark is an open-source project and we welcome contributions from the community.

If you'd like to contribute, please fork the repository and make changes as you'd like. Pull requests are warmly welcome.

Bonus: Show Off Badges and Contributors

Badges are a great way to show off your project's stats. You can add badges for things like the number of stars, forks, and contributors. You can also add badges for CI/CD, code coverage, and more. You can find all badges on shields.io.



<div align="center">
  <a href="https://github.com/mfts/papermark/stargazers"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/mfts/papermark"></a>
  <a href="https://twitter.com/mfts0"><img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/mfts0"></a>
  <a href="https://github.com/mfts/papermark/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/badge/license-AGPLv3-purple"></a>
</div>

You can also add a list of contributors to your README. This is a great way to show your appreciation for the people who have contributed to your project. Head over to contrib.rocks to generate a list of contributors for your project.



### Our Contributors ✨

<a href="https://github.com/mfts/papermark/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=mfts/papermark" />
</a>

Conclusion

There you have it! Crafting the perfect README is a mix of clear communication, good organization, and a sprinkle of pizzazz. It's an art form in itself, and with a little practice, you'll be creating READMEs that are not only informative but also engaging.

I'm Marc, an open-source enthusiast and the proud maintainer of Papermark. Happy README crafting!

Help me out!

If you found this article helpful and got to understand README a bit better, I would be extremely glad if you could give us a star! And don't forget to share your thoughts in the comments ❤️

https://github.com/mfts/papermark

Forem: Marc Seitz

Building a AI Assistant to chat with your documents using Next.js and OpenAI

What you will find in this article?

Papermark - the open-source DocSend alternative.

Setup the project

Set up Next.js with TypeScript and Tailwindcss

Install Vercel's AI package

Setup OpenAI

Building the application

#1 Configure the OpenAI Assistant API

Create a new assistant from the dashboard

Get the Assistant ID

#2 Creating a chat interface for your document

Bonus: Add a new document to the assistant

Conclusion

Help me out!

Deploy a WebAssembly-powered Next.js app on Vercel serverless functions

What you will find in this article?

Papermark - the open-source DocSend alternative.

Setup the project

Setting up Next.js with TypeScript and Tailwindcss

Install vercel/blob

Install mupdf

Building the application

#1 Upload a file

#2 Count total number of pages with WASM package

#3 Make WASM run on Vercel's serverless functions

Conclusion

Help me out!

How to add the OSS Friends page to your Next.js website

What you will find in this article?

Papermark - the open-source DocSend alternative.

Building the oss-friends page

Submit your OSS project to OSS Friends

Conclusion

Help me out!

Building background email notifications with Next.js, Resend and Trigger.dev

What you will find in this article?

Papermark - the open-source DocSend alternative.

Setup the project

Setting up Next.js with TypeScript and Tailwindcss

Install Resend and React-Email

Install Trigger

Building the application

#1 Setup Resend email

#2 Write a API route to send email

#3 Add a Trigger job to make the email sending asynchronous

Bonus: Prevent rogue access to the API route

Conclusion

Help me out!

Building an Email-Protected Notion Page Using Next.js and React-Notion-X

What you will find in this article?

Papermark - the open-source DocSend alternative.

Setup the project

Setting up Next.js with TypeScript and Tailwindcss

Setting up react-notion-x

Building the application

#1 Render Notion page content in React

#2 Add email capture form to the page

Conclusion

Help me out!

Open Source Document Sharing platform built developer-friendly: launches, updates, stats

What you will find in this article?

Intro

Papermark on Hacker News

How it started and was built?

Project stats at the moment

What is in the future?

From Tweet to Launch 🚀 – My Open Source Journey

What you will find in this article?

Papermark - the open-source DocSend alternative

The Tweet

The MVP

Building the product

Post #1

Post #2

Post #3

Post #4

Post #5

Post #6

Building the `oss-friends` page