DEV Community: Eric Allam

We ditched worktrees for Claude Code. Here's what we use instead

Eric Allam — Thu, 16 Apr 2026 11:29:00 +0000

Everyone's running multiple Claude Code agents in parallel now. The standard advice is "use git worktrees." Each agent gets its own copy of the codebase, its own branch, no conflicts.

We covered worktrees in our 10 Claude Code tips you didn't know: tip 6 covers the --worktree flag and how it works under the hood.

Works well. Until you actually try it on a real project.

We run a large TypeScript monorepo at Trigger.dev. PostgreSQL, Redis, ClickHouse, a Remix web app, multiple internal packages. When we tried worktrees for parallel Claude Code sessions, we spent more time on setup than shipping code.

So we stopped using worktrees. Here's what we do instead.

What worktrees get right

Claude Code has built-in worktree support. claude --worktree feature-auth gives you an isolated copy, a fresh branch, a scoped session. Spin up a second with claude --worktree bugfix-123 and both agents work independently.

For a library or a CLI tool, this works great.

But most real applications aren't just source code.

The local dev problem

Here's what actually happens when you create a worktree for a web application:

Port conflicts. Your dev server runs on port 3030. Your second worktree also tries port 3030. Now you need different ports per worktree, different environment variables, a setup script for each one.

Database isolation. Both worktrees point at the same PostgreSQL database. Agent A runs a migration. Agent B's schema is now out of sync. Or worse: both agents are seeding test data and trampling each other's state. The "fix" is a separate database per worktree, each on a different port, each needing its own migrations.

Shared services multiply. Redis, ClickHouse, Elasticsearch, S3-compatible storage. Every service your app depends on becomes another thing to duplicate or isolate. For our monorepo, a single worktree would need its own PostgreSQL, Redis, ClickHouse, and Electric instance just to run the dev server.

Disk space adds up fast. One user on the Cursor forums reported that automatic worktree creation burned through 9.82 GB across two worktrees with a ~2GB codebase. Each worktree gets its own node_modules, its own build artifacts, its own everything.

Dependency installation. Every new worktree needs npm install or pnpm install. In a large monorepo, that's not instant. Native dependencies and build steps make it worse.

Merge conflicts with yourself. Two agents refactor the same utility function in different directions. Now you're resolving conflicts in code you didn't write.

The result: you spend your time building worktree management scripts instead of shipping features. There's an entire cottage industry of blog posts explaining port allocation schemes, per-worktree Docker Compose files, and cleanup scripts.

What if you just didn't need any of that?

GitButler: multiple branches, one working directory

GitButler takes a fundamentally different approach to branching. Instead of one branch at a time (with worktrees giving you one branch per directory), GitButler lets you have multiple branches applied to the same working directory simultaneously.

They call these "virtual branches." The key insight: instead of isolating branches by giving each one its own copy of the files, GitButler assigns changes to branches. You make changes to your files, then tell GitButler which changes belong to which branch. When you commit, each branch gets only its assigned changes.

Behind the scenes, GitButler maintains a special gitbutler/workspace branch, a merge commit representing the union of all your applied branches. Standard git tools see a single coherent state. Your dev server, your database, your tests: everything just works, because there's only one working directory.

Teaching Claude Code to use GitButler

GitButler offers Claude Code hooks that automatically assign each session's changes to a single branch. Scott Chacon wrote about this approach when it launched. For simple cases (one session, one branch, one task) this works well.

But real development isn't that clean. A single Claude Code session often produces changes that should land on multiple branches. You're adding a feature to the webapp and Claude also updates the docs. You want those in separate PRs. The hooks model can't do that because it hardwires one session to one branch.

Our approach is different: we teach Claude Code how to use the but CLI directly, via a skill. The GitButler skill tells Claude:

Never use git commit, git add, git push, or any git write command. Use but instead.
Always run but status --json before mutations to get current CLI IDs.
Use but commit <branch-id> --changes <file-id1>,<file-id2> to commit specific files to specific branches.
Use but stage, but absorb, but squash, but undo for everything else.

The critical part is --changes. Claude can look at the files it modified, decide which branch each belongs to, and commit them separately in one session. Docs changes go to a docs branch. Feature code goes to a feature branch. Test updates go wherever the tests belong.

Here's what that looks like in practice:

# Claude runs but status --json, sees:
#   Branch: feat/usage-api (fe)
#   Branch: docs/usage-api (do)
#   Unassigned changes:
#     g0: apps/webapp/app/routes/api.v1.usage.ts
#     h0: apps/webapp/app/routes/api.v1.usage.test.ts
#     i0: docs/sdk/runs-usage.mdx

# Claude commits code to the feature branch:
but commit fe -m "Add /api/v1/usage endpoint" --changes g0,h0 --json --status-after

# And docs to the docs branch:
but commit do -m "Document usage API endpoint" --changes i0 --json --status-after

One session. Two branches. Two clean PRs. No hooks, no magic. Claude just knows how to use the tool.

The skill in detail

The full skill is about 150 lines of markdown. Here are the parts that matter most:

The non-negotiable rules

1. Use `but` for all write operations. Never run `git add`, `git commit`,
   `git push`, `git checkout`, `git merge`, `git rebase`, `git stash`,
   or `git cherry-pick`.
2. Always add `--json --status-after` to mutation commands.
3. Use CLI IDs from `but status --json`; never hardcode IDs.
4. Start with `but status --json` before mutations so IDs are current.

--json gives Claude structured output. --status-after returns the updated workspace state after each mutation, so it can chain operations without re-running but status.

The CLI IDs

GitButler assigns short 2-3 character IDs to everything: branches (fe, do), commits (1b, 8f), files (g0, h0), hunks (j0, k1). Claude reads them from but status --json and uses them as arguments:

but commit fe -m "message" --changes g0,h0  # commit files g0, h0 to branch fe
but stage g0 fe                              # stage file g0 to branch fe
but amend h0 1b                              # amend file h0 into commit 1b
but squash 1b 8f                             # squash commits 1b and 8f

The absorb trick

When Claude makes a small fix to code that was committed 3 commits ago, it doesn't need to create a new "fix typo" commit. It runs:

but absorb g0 --json --status-after

GitButler figures out which commit the change belongs to (by analyzing the diff context) and amends it in automatically. The commit history stays clean without Claude needing to reason about which commit to target.

The workflow

Here's what a typical session looks like.

1. Set up GitButler (once)

curl -fsSL https://gitbutler.com/install.sh | sh
cd your-project
but setup

2. Add the skill to your project

Create .claude/skills/gitbutler/SKILL.md with the rules above (or grab the one from GitHub). Add a line to your CLAUDE.md:

Use GitButler CLI (`but`) for all git operations instead of raw git commands.

3. Work normally

Start a Claude Code session and give it a task. Claude edits files, runs but status --json, creates branches if needed, and commits changes to the right places.

claude -n "usage-api"
> Add a /api/v1/usage endpoint with docs and tests.
  Code on feat/usage-api, docs on docs/usage-api.

Claude creates both branches, makes the changes, and commits code to one and docs to the other. Your dev server hot-reloads the whole time.

4. Review and push

but status        # see all branches and their changes
but push fe       # push the feature branch
but push do       # push the docs branch
but pr new fe     # create PRs
but pr new do

If the commits are messy, clean them up first:

but squash fe                    # squash all commits on the feature branch
but reword 1b -m "better msg"   # fix a commit message
but absorb g0                   # fold a fix into the right commit

Every operation is undoable. but undo reverts the last thing you did, whatever it was.

Why not hooks?

GitButler does offer Claude Code hooks that automatically route changes per session. For the "3 independent agents, 3 independent tasks" scenario, they work. Each session gets its own branch, changes auto-assign, commits happen on stop.

I don't use them because my work doesn't split that cleanly. A single session building a feature will touch the webapp, the SDK types, and the docs. I want those in separate PRs. The hooks assume 1 session = 1 branch, which means you'd need to artificially split your work into separate sessions just to get separate branches.

Teaching Claude the but CLI gives me more control. Claude can look at its own changes, decide which branch each file belongs to, and commit accordingly. It's more flexible, and honestly, it's simpler. No hooks configuration, no session ID routing. Just a skill file and a CLI.

The `but` CLI

The but CLI is a drop-in replacement for most git workflows:

but status            # like git status, but shows all virtual branches
but commit fe -m "add usage endpoint"  # commit to a specific branch
but stage g0 fe       # stage a specific file to a specific branch
but push              # push all branches
but undo              # undo the last operation (any operation)

Every command supports --json output, which makes it agent-friendly. GitButler maintains an operations log: every action is recorded, and but undo can revert anything. Committed to the wrong branch? but undo. Squashed when you shouldn't have? but undo. It's a genuine safety net (not the kind that catches you 50% of the time).

The full CLI reference covers branching, stacking, conflict resolution, and more.

When worktrees still make sense

I should be honest about where this approach breaks down:

Same-file conflicts. If Claude (or multiple agents) modify the same file for different branches, things get messy. Virtual branches share the physical working directory. GitButler's maintainers have confirmed that "overlapping areas can definitely lead to problems related to races and interference." If your tasks touch overlapping files, worktrees or sequential work is safer.

Build system isolation. If each task requires its own build with different configuration flags or environment variables, a single working directory won't cut it.

Heavy test suites with side effects. If running tests mutates shared state (like a database) in ways that conflict between tasks, you need real isolation.

But most work naturally involves different files. "Add a new API endpoint" and "update the docs for that endpoint" touch different parts of the codebase. GitButler just removes the infrastructure tax of keeping them on separate branches.

How I use this at Trigger.dev

Our monorepo has a Remix web app, a supervisor service, a CLI, an SDK, and a dozen internal packages. One PostgreSQL database, one Redis, one ClickHouse. Setting up a second copy of all that for a worktree would be a half-day project.

Instead, we run a single Claude Code session with the GitButler skill loaded. Claude makes changes across packages, then splits them across branches at commit time. Feature code on one branch, docs updates on another, SDK type changes on a third. We review each branch independently, squash if needed, push, and create PRs.

The but CLI has become our default for all git operations, not just agent workflows. The multiple staging areas, the undo system, the JSON output for scripting. It's a meaningful upgrade over raw git even without the AI angle.

Getting started

Install GitButler: curl -fsSL https://gitbutler.com/install.sh | sh (or see installation docs)
Set up your repo: cd your-project && but setup
Add the skill: Create .claude/skills/gitbutler/SKILL.md teaching Claude to use but instead of git (or use GitButler's published skill)
Update CLAUDE.md: Add "Use GitButler CLI (but) for all git operations instead of raw git commands"
Start working: Claude will use but status, but commit --changes, and but push automatically

The bigger picture

The tooling advice for parallel AI development has been stuck in a "just use worktrees" rut that doesn't account for how real applications work. Your codebase doesn't exist in isolation. It's connected to databases, caches, queues, and services that don't clone as easily as source files.

GitButler's virtual branches solve the right problem: keeping multiple streams of work organized without duplicating your entire development environment. And teaching your AI agent how to use the CLI directly (instead of relying on automatic hooks) gives you the flexibility to split work across branches however you want.

If your monorepo has outgrown worktrees, this is worth an afternoon to set up.

How we tamed Node.js event loop lag: a deepdive

Eric Allam — Fri, 28 Jun 2024 13:30:00 +0000

The following is a tale of how we discovered and fixed a variety of reliability and performance issues in our Node.js application that were caused by Node.js event loop lag.

We are Trigger.dev, a background job platform with no timeouts for TypeScript developers. Check us out on GitHub and give us a ⭐

The discovery

At around 11pm local time (10pm UTC) on Thursday June 20, we were alerted to some issues in our production services powering the Trigger.dev cloud, as some of our dashboard/API instances started crashing.

We hopped on to our AWS production dashboard and saw that the CPU usage of our instances were really high and growing.

Combing through the logs on the crashed instances, we came across various errors, such as Prisma transaction timeouts:

Error: Invalid `prisma.taskAttempt.create()` invocation:Transaction API error: Transaction already closed: A query cannot be executed on an expired transaction. The timeout for this transaction was 5000 ms, however 6385 ms passed since the start of the transaction.

Followed by a message from Prisma stating they were unable to find the schema.prisma file and an uncaught exception, leading to the process exiting:

Error: Prisma Client is unable to find the Prisma schema file for this project. Please make sure the file exists at /app/prisma/schema.prisma.

We were puzzled by these errors, as the load on our primary database was consistently under 10% and the number of connections was healthy. We were also seeing other errors causing crashing, such as sending WebSocket messages to an already closed connection (which yes, throws an exception)

At the same time, we noticed that our network traffic was spiking, which was odd as we weren't seeing a corresponding increase in requests to our API:

Just past 1am local time, we deployed a couple things we had hoped would fix the issue (spoler: they did not). While waiting for the deploy to complete, I hit our metrics endpoint and was hoping to find some clues. I indeed did find something:

The deploy finished and the CPU usage dropped and the crashes stopped, so we were hopeful we had fixed the issue and went to bed.

The issue returns

The next morning, we woke up to the same issue. The CPU usage was high again, the database was steady, and the network traffic was high. We were back to square one.

We had a hunch that if we could get a better idea behind the spikes in network traffic, we could find the root cause of the issue. We had access to AWS Application Load Balancer logs, so we setup the ability to query them in Athena and started by looking at the IPs with the most usage:

SELECT
    client_ip,
    COUNT(*) as request_count,
    sum(received_bytes) / 1024 / 1024 as rx_total_mb,
    sum(sent_bytes) / 1024 / 1024 as tx_total_mb
FROM
    alb_logs
WHERE
    day = '2024/06/20'
GROUP BY
    client_ip
ORDER BY
    tx_total_mb desc;

Which showed a pretty clear winner:

That's 21GB of data used by a single IP address in a single day. We wrote another query to see what paths this IP was hitting and causing the high network traffic:

SELECT
    client_ip,
    COUNT(*) as request_count,
    min(time) as first_request,
    max(time) as last_request,
    sum(received_bytes) / 1024 / 1024 as rx_total_mb,
    sum(sent_bytes) / 1024 / 1024 as tx_total_mb,
    request_verb,
    request_url
FROM
    alb_logs
WHERE
    day = '2024/06/20'
    and client_ip = '93.xxx.xx.155'
GROUP BY
    client_ip,
    request_verb,
    request_url
ORDER BY
    tx_total_mb desc
limit 1000;

Most of the traffic was coming from just a few different paths, but they were all pointing to our v3 run trace view (just an example):

But the query above showed just a few paths, with thousands of requests each. We dug into the database and saw that these runs had 20k+ logs each, and our trace view lacked pagination. We also "live reload" the trace view as new logs come in, at most once per second.

So someone was triggering a v3 run, and viewing the trace view, as 20k+ logs came in, refreshing the entire page every second. This was causing the high network traffic, but doesn't explain the high CPU usage.

The next step to uncovering the root cause was to instrument the underlying code with some additional telemetry. Luckily we already have OpenTelemetry setup in our application, which sends traces to Baselime.io. After adding additional spans to the code we started seeing traces like this:

As you can see in that trace above, a large amount of time was being spent inside the createSpans span. After about 30 seconds of digging, it was pretty clear what the issue was:

// This isn't the actual code, but a simplified version
for (const log of logs) {
  // remember, 20k+ logs
  const parentSpan = logs.find((l) => log.parentId === l.id);
}

Yup, that's a nested loop. We were iterating over 20k+ logs, and for each log, we were iterating over all the logs again to find the parent log (20k * 20k = 400m). In Big O notation, this is O(n^2), which is not great (it's really bad).

We fixed the issue by creating a map of logs by ID, and then iterating over the logs once to create the spans. We quickly deployed the fix (along with limiting live-reloading the trace view when there are less than 1000 logs) and the CPU usage dropped, the network traffic dropped, and the crashes stopped (for now).

With this one issue fixed, we returned our attention to the event loop lag we had discovered the night before. We had squashed one instance of it, but we had a feeling this wasn't the only place it was causing issues.

Before we dive into how we discovered and fixed the rest of our event loop lag issues, let's take a step back and explain what event loop lag is.

Event loop lag: a primer

Node.js only has a small amount of threads of operation, with the event-loop belonging to the main thread. That means that for every request that comes in, it's processed in the main thread.

This allows Node.js services to run with much more limited memory and resource consumption, as long as the work being done on the main thread by each client is small.

In this way Node.js is a bit like your local coffee shop, with a single barista. As long as no-one orders a Double Venti Soy Quad Shot with Foam, the coffee shop can serve everyone quickly. But one person can slow the whole process down and cause a lot of unhappy customers in line.

So how can this possibly scale? Well, Node.js actually will offload some work to other threads:

Reading and writing files (libuv) happens on a worker thread
DNS lookups
IO operations (like database queries) are done on worker threads
Crypto and zlib, while CPU heavy, are also offloaded to worker threads

The beauty of this setup is you don't have to do anything to take advantage of this. Node.js will automatically offload work to worker threads when it can.

The one thing Node.js asks of you, the application developer, is to fairly distribute main-thread work between clients. If you don't, you can run into event loop lag, leading to a long queue of angry clients waiting for their coffee.

Luckily, the Node.js team has published a pretty comprehensive guide on how to avoid event loop lag, which you can find here.

Monitoring event loop lag

After deploying the fix for the nested loop issue, we wanted to get a better idea of how often we were running into event loop lag. We added an event loop monitor to our application that would produce a span in OpenTelemetry if the event loop was blocked for more than 100ms:

import { createHook } from "node:async_hooks";
import { tracer } from "/blog/event-loop-lag/v3/tracer.server";

const THRESHOLD_NS = 1e8; // 100ms

const cache = new Map<number, { type: string; start?: [number, number] }>();

function init(
  asyncId: number,
  type: string,
  triggerAsyncId: number,
  resource: any
) {
  cache.set(asyncId, {
    type,
  });
}

function destroy(asyncId: number) {
  cache.delete(asyncId);
}

function before(asyncId: number) {
  const cached = cache.get(asyncId);

  if (!cached) {
    return;
  }

  cache.set(asyncId, {
    ...cached,
    start: process.hrtime(),
  });
}

function after(asyncId: number) {
  const cached = cache.get(asyncId);

  if (!cached) {
    return;
  }

  cache.delete(asyncId);

  if (!cached.start) {
    return;
  }

  const diff = process.hrtime(cached.start);
  const diffNs = diff[0] * 1e9 + diff[1];
  if (diffNs > THRESHOLD_NS) {
    const time = diffNs / 1e6; // in ms

    const newSpan = tracer.startSpan("event-loop-blocked", {
      startTime: new Date(new Date().getTime() - time),
      attributes: {
        asyncType: cached.type,
        label: "EventLoopMonitor",
      },
    });

    newSpan.end();
  }
}

export const eventLoopMonitor = singleton("eventLoopMonitor", () => {
  const hook = createHook({ init, before, after, destroy });

  return {
    enable: () => {
      console.log("🥸  Initializing event loop monitor");

      hook.enable();
    },
    disable: () => {
      console.log("🥸  Disabling event loop monitor");

      hook.disable();
    },
  };
});

The code above makes use of node:async_hooks to capture and measure the time spent between the before and after hooks. If the duration between the two is greater than 100ms, we create a span in OpenTelemetry, making sure to set the startTime to the time the before hook executed.

We deployed the monitor on Friday afternoon and waited for the results. Around 10pm local time, we started seeing spans being created with pretty large durations:

Event loop lag whack-a-mole

Starting the morning of Monday the 24th, we started on a PR to fix as many of the event loop lag issues as we could. We submitted and deployed the PR around 10am UTC on Thursday the 27th with the following fixes:

Added a limit of 25k logs to the trace view (after discovering a run with 222k logs). Added a "download all logs" button to allow users to download all logs if they needed them.
Added pagination to our v2 schedule trigger list after we saw a 15s lag when a user had 8k+ schedules.
Added a hard limit of 3MB on the input to a v2 task (after realizing we didn't have a limit at all), which matches the output limit on v2 tasks.
Importantly, we changed how we calculated the size of the input and output of a v2 task. Previously, we were using Buffer.byteLength after having parsed the JSON of the request body. This was causing the event loop to block while calculating the size of the input and output. We now calculate the size of the input and output before parsing the JSON, using the Content-Length header of the request.
We use Zod to parse incoming JSON request bodies, and removing the keys for the input and output of v2 tasks and handling them separately.

After deploying these fixes, we saw a significant drop in the number of spans being created by the event loop monitor:

We now have alerts setup to notify us if any event loop lag over 1s is detected, so we're able to catch and fix any new issues that arise.

Next steps and takeaways

While most of the event-loop lag issues have been fixed, we still have more work to do in this area, especially around payload and output sizes of tasks in v3. We already support much larger payloads and outputs in v3 as we don't store payloads/outputs larger than 512KB in the database, but instead we store them in an object store (Cloudflare R2).

But v3 payloads are still parsed in our main thread, but in an upcoming update we're going to be doing 2 things to help with this:

For tasks triggered inside other tasks, we're going to upload large payloads to the object store and pass a reference to the payload when triggering the task. This will allow us to avoid parsing the payload in the main thread in our service.
For tasks triggered from client servers, and full payloads are being sent in the request body, we're going to stream the payload to the object store using stream-json (we have already built a prototype of this working).

More importantly, we now have a much better understanding of what it takes to run a reliable Node.js service in production that can handle a large number of clients. Going forward, we're going to be more careful in designing our code to avoid event loop lag.

Addendum: serverless and event loop lag

Trigger.dev is implemented as a long-lived Node.js process, which as you can see above, takes some additional work to ensure that a single client can't block the event loop for everyone else. This is a common issue with long-lived Node.js processes, and is one of the reasons why serverless is so popular.

But serverless isn't a silver bullet. While serverless functions are short-lived, they still run on a single thread, and can still run into event loop lag. This is especially true if you're using a serverless function to handle a large number of clients, or if you're doing a lot of synchronous work in your function.

To keep request latency low, function instances are kept warm for a period of time after they're booted (known as a cold-boot). This means that while this event loop lag issue is mitigated somewhat by having many more instances running, it's still something you need to be aware of when building serverless Node.js applications. You can read more about this issue here.

Background jobs

If you are running a long-lived Node.js service, requests aren't the only source of event loop lag that you need to be aware of. Offloading long-running or queued tasks inside the same Node.js process can also cause event loop lag, which will slow down requests and cause issues like the ones we experienced.

This is one reason why the pattern of using serverless for background jobs is so popular. By running background jobs in a separate process, you can avoid event loop lag issues in your main service and scale up and down to handle changing workloads. And serverless can be a great fit, but still requires careful design to avoid event loop lag and timeouts.

Trigger.dev v3 is now in Developer Preview and takes an approach that combines the best of both worlds. We deploy and run your background task code in a separate process, completely isolated from your main service and from each other, without worrying about timeouts. If you'd like to try it out, please sign up for the waitlist.

🧙‍♂️ Generate blogs with ChatGPT assistant 🪄 ✨

Eric Allam — Wed, 06 Dec 2023 15:02:29 +0000

TL;DR

We have all seen what ChatGPT can do (it’s not new to anybody).

So many articles are being written over and over using ChatGPT.

Actually, half of the articles on DEV are written with ChatGPT.

You can use some AI content detector to see.

The thing is that ChatGPT will never produce some extraordinary content except for the one it already has (trained/fine-tuned) inside.

But there is a way to go beyond the currently trained content using RAG (OpenAI assistants).

In the last article, we talked about “training” ChatGPT on your documentation; today, let’s see how we can make a lot of content from it. We will:

Create a new blogging system with the use of Docusaurus.
Question ChatGPT to write us a blog post connected to the documentation.

Your background job platform 🔌

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more!

Please help us with a star 🥹.
It would help us to create more articles like this 💖

Star the Trigger.dev repository ⭐️

Recap from the last time ⏰

We have created a job to take a documentation XML and extract all the URLs.
We scraped each website URL and extracted the titles and content.
We saved everything into a file and sent it to the ChatGPT assistant.
We created a ChatBot screen to question ChatGPT about the documentation.

You can find the complete source code of the previous tutorial here.

A slight modification ⚙️

Last time, we created an assistant for documentation. We wrote:

You are a documentation assistant, loaded with documentation from ' + payload.url + ', return everything in an MD format.

Let’s change it to a blog writer, head over to jobs/process.documentation.ts line 92, and replace it with the following content:

You are a content writer assistant. You have been loaded with documentation from ${payload.url}, you write blog posts based on the documentation and return everything in the following MD format:
---
slug: [post-slug]
title: [post-title]
---

[post-content]

It’s essential to use the slug and the title because that’s the format Docusaurus - our blogging system can accept (of course, we also send all the output in an MD format)

Docusaurus 🦖

You can use many types of blogging systems!

For our use case, we will use Docusaurus, which can read MD-based formatting (the output we requested from ChatGPT). We can install Docusaurus by running:

npx create-docusaurus@latest blog classic --typescript

Next, we can go into the created directory and run the following:

npm run start

That will start Docusaurus. You can pay attention. There is an additional directory called blog with all the blog posts; that’s where we will save ChatGPT-generated blog posts.

Generating blogs 📨

We need to create a job that

Get the blog title
Generate an entire blog post using ChatGPT
Save it to an MD file on our blog

We can easily use ChatGPT for that!

Go to the jobs folder and add a new file called process.blog.ts. Add the following code:

import { eventTrigger } from "@trigger.dev/sdk";
import { client } from "@openai-assistant/trigger";
import {object, string} from "zod";
import {openai} from "@openai-assistant/helper/open.ai";
import {writeFileSync} from "fs";
import slugify from "slugify";

client.defineJob({
  // This is the unique identifier for your Job, it must be unique across all Jobs in your project.
  id: "process-blog",
  name: "Process Blog",
  version: "0.0.1",
  // This is triggered by an event using eventTrigger. You can also trigger Jobs with webhooks, on schedules, and more: https://trigger.dev/docs/documentation/concepts/triggers/introduction
  trigger: eventTrigger({
    name: "process.blog.event",
    schema: object({
      title: string(),
      aId: string(),
    })
  }),
  integrations: {
    openai
  },
  run: async (payload, io, ctx) => {
      const {title, aId} = payload;
      const thread = await io.openai.beta.threads.create('create-thread');

      await io.openai.beta.threads.messages.create('create-message', thread.id, {
          content: `
           title: ${title}
          `,
          role: 'user',
      });

      const run = await io.openai.beta.threads.runs.createAndWaitForCompletion('run-thread', thread.id, {
          model: 'gpt-4-1106-preview',
          assistant_id: payload.aId,
      });

      if (run.status !== "completed") {
          console.log('not completed');
          throw new Error(`Run finished with status ${run.status}: ${JSON.stringify(run.last_error)}`);
      }

      const messages = await io.openai.beta.threads.messages.list("list-messages", run.thread_id, {
          query: {
              limit: "1"
          }
      });

      return io.runTask('save-blog', async () => {
          const content = messages[0].content[0];
          if (content.type === 'text') {
              const fileName = slugify(title, {lower: true, strict: true, trim: true});
              writeFileSync(`./blog/blog/${fileName}.md`, content.text.value)
              return {fileName};
          }
      });
  },
});

We added some required variables:
- title the blog post title
- aId the assistant ID added in the previous article.
We created a new thread for the assistant(io.openai.beta.threads.create)- we can’t question it without any thread. Unlike the previous tutorial, here, we make a new thread on every request. We don’t want the context of the last messages in the conversation.
We then add a new message to the thread(io.openai.beta.threads.messages.create) with the blog's title. We don’t need to provide additional instructions - we have done that part in the first section 😀
We run the io.openai.beta.threads.runs.createAndWaitForCompletion to start the process - usually, you would need some kind of recursion that runs every minute to check if the job is completed, but Trigger.dev already added a way to run the process and wait for it at the same time 🥳
We run the io.openai.beta.threads.messages.list with a limit: 1 in the query body to get the first message from the conversation (in the ChatGPT result, the first message is the last message).
Then, we save the newly created blog with the value we got from ChatGPT using writeFileSync - make sure you have the right path to the blog.

Go to jobs/index.ts and add the following line:

export * from "./process.blog";

Now, let’s create a new route to trigger the job.

Go to app/api, create a new folder called blog, and within a new file called route.tsx

add the following code:

import {client} from "@openai-assistant/trigger";

export async function POST(request: Request) {
    const payload = await request.json();
    if (!payload.title || !payload.aId) {
        return new Response(JSON.stringify({error: 'Missing parameters'}), {status: 400});
    }

    // We send an event to the trigger to process the documentation
    const {id: eventId} = await client.sendEvent({
        name: "process.blog.event",
        payload
    });

    return new Response(JSON.stringify({eventId}), {status: 200});
}

We check that the title and assistant ID exist.
We trigger an event in Trigger.dev and send the information.
We send the event ID back to the client so we can track the progress of the job.

The frontend 🎩

There’s not much to be done!

Inside our components directory, let’s create a new file called blog.component.tsx and the following code:

"use client";

import {FC, useCallback, useEffect, useState} from "react";
import {ExtendedAssistant} from "@openai-assistant/components/main";
import {SubmitHandler, useForm} from "react-hook-form";
import {useEventRunDetails} from "@trigger.dev/react";

interface Blog {
    title: string,
    aId: string;
}

export const BlogComponent: FC<{list: ExtendedAssistant[]}> = (props) => {
    const {list} = props;
    const {register, formState, handleSubmit} = useForm<Blog>();
    const [event, setEvent] = useState<string | undefined>(undefined);

    const addBlog: SubmitHandler<Blog> = useCallback(async (param) => {
        const {eventId} = await (await fetch('/api/blog', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(param)
        })).json();

        setEvent(eventId);
    }, []);

    return (
        <>
        <form className="flex flex-col gap-3 mt-5" onSubmit={handleSubmit(addBlog)}>
            <div className="flex flex-col gap-1">
                <div className="font-bold">Assistant</div>
                <select className="border border-gray-200 rounded-xl py-2 px-3" {...register('aId', {required: true})}>
                    {list.map(val => (
                        <option key={val.id} value={val.aId}>{val.url}</option>
                    ))}
                </select>
            </div>
            <div className="flex flex-col gap-1">
                <div className="font-bold">Title</div>
                <input className="border border-gray-200 rounded-xl py-2 px-3" placeholder="Blog title" {...register('title', {required: true})} />
            </div>
            <button className="border border-gray-200 rounded-xl py-2 px-3 bg-gray-100 hover:bg-gray-200" disabled={formState.isSubmitting}>Create blog</button>
        </form>
        {!!event && (
            <Blog eventId={event} />
        )}
        </>
    )
}

export const Blog: FC<{eventId: string}> = (props) => {
    const {eventId} = props;
    const { data, error } = useEventRunDetails(eventId);

    if (data?.status !== 'SUCCESS') {
        return <div className="pointer bg-yellow-300 border-yellow-500 p-1 px-3 text-yellow-950 border rounded-2xl">Loading</div>
    }
    return (
        <div>
            <a href={`http://localhost:3000/blog/${data.output.fileName}`}>Check blog post</a>
        </div>
    )
};

We use react-hook-form to control our inputs easily.
We let users choose the assistant they want to use.
We create a new input containing the title of the article.
We send everything to our previously created route and get back the eventId of the job.
We create a new <Blog /> component that shows loading until the event is finished and add a link to our blog with the newly created tutorial.

Add the component to our components/main.tsx file:

{assistantState.filter(f => !f.pending).length > 0 && <BlogComponent list={assistantState} />}

And we are done!

Now, let’s add the blog title and click generate.

Let's connect! 🔌

As an open-source developer, you can join our community to contribute and engage with maintainers. Don't hesitate to visit our GitHub repository to contribute and create issues related to Trigger.dev.

The source for this tutorial is available here:

https://github.com/triggerdotdev/blog/tree/main/openai-blog-writer

Thank you for reading!

✨ Train ChatGPT on your Documentation 🪄 ✨

Eric Allam — Tue, 28 Nov 2023 14:45:01 +0000

TL;DR

ChatGPT is trained until 2022.

But what if you want it to give you information specifically about your website? Most likely, it’s not possible, but not anymore!

OpenAI introduced their new feature - assistants.

You can now easily index your website and then ask ChatGPT questions about it. In this tutorial, we will build a system that indexes your website and lets you query it. We will:

Scrape the documentation sitemap.
Extract the information from all the pages on the website.
Create a new assistant with the new information.
Build a simple ChatGPT frontend interface and query the assistant.

Your background job platform 🔌

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more!

Please help us with a star 🥹.
It would help us to create more articles like this 💖

Star the Trigger.dev repository ⭐️

Let’s get started 🔥

Let’s set up a new NextJS project.

 npx create-next-app@latest

💡 We use NextJS new app router. Please make sure you have a node version 18+ before installing the project

Let's create a new database to save the assistant and the scraped pages.
For our example, we will use Prisma with SQLite.

It is super easy to install, just run:

npm install prisma @prisma/client --save

And then add a schema and a database with

npx prisma init --datasource-provider sqlite

Go to prisma/schema.prisma and replace it with the following schema:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Docs {
  id         Int      @id @default(autoincrement())
  content    String
  url        String @unique
  identifier String
  @@index([identifier])
}

model Assistant {
  id         Int      @id @default(autoincrement())
  aId        String
  url        String   @unique
}

And then run

npx prisma db push

That will create a new SQLite database (local file) with two main tables: Docs and Assistant

The Docs contains all the scraped pages
The Assistant contains the URL of the docs and the internal ChatGPT assistant ID.

Let’s add our Prisma client.

Create a new folder called helper and add a new file called prisma.ts and the following code inside:

import {PrismaClient} from '@prisma/client';

export const prisma = new PrismaClient();

We can later use that prisma variable to question our database.

Scrape & Index

Create a Trigger.dev account

Scraping and indexing the pages is a long-running task. We need to:

Scrape the main website meta URL for the sitemap.
Extract all the pages inside the sitemap.
Go to each page and extract the content.
Save everything to the ChatGPT assistant.

For that, let’s use Trigger.dev!

Once registered, create an organization and choose a project name for your job.

Select Next.js as your framework and follow the process for adding Trigger.dev to an existing Next.js project.

Otherwise, click Environments & API Keys on the sidebar menu of your project dashboard.

Copy your DEV server API key and run the code snippet below to install Trigger.dev.

Follow the instructions carefully.

npx @trigger.dev/cli@latest init

Run the following code snippet in another terminal to establish a tunnel between Trigger.dev and your Next.js project.

npx @trigger.dev/cli@latest dev

Install ChatGPT (OpenAI)

We will use OpenAI assistant, so we must install it on our Project.

Create a new OpenAI account and generate an API Key.

Click View API key from the dropdown to create an API Key.

Next, install the OpenAI package by running the code snippet below.

npm install @trigger.dev/openai

Add your OpenAI API key to the .env.local file.

OPENAI_API_KEY=<your_api_key>

Create a new directory, helper and add a new file, open.ai.tsx with the following content:

import {OpenAI} from "@trigger.dev/openai";

export const openai = new OpenAI({
    id: "openai",
    apiKey: process.env.OPENAI_API_KEY!,
});

That’s our OpenAI client wrapped by Trigger.dev integration.

Building the background jobs

Let’s go ahead and create a new background job!

Go to jobs and create a new file called process.documentation.ts. Add the following code:

import { eventTrigger } from "@trigger.dev/sdk";
import { client } from "@openai-assistant/trigger";
import {object, string} from "zod";
import {JSDOM} from "jsdom";
import {openai} from "@openai-assistant/helper/open.ai";

client.defineJob({
  // This is the unique identifier for your Job; it must be unique across all Jobs in your project.
  id: "process-documentation",
  name: "Process Documentation",
  version: "0.0.1",
  // This is triggered by an event using eventTrigger. You can also trigger Jobs with webhooks, on schedules, and more: https://trigger.dev/docs/documentation/concepts/triggers/introduction
  trigger: eventTrigger({
    name: "process.documentation.event",
    schema: object({
      url: string(),
    })
  }),
  integrations: {
    openai
  },
  run: async (payload, io, ctx) => {
  }
});

We have defined a new job called process.documentation.event, and we added a required parameter called URL - that’s our documentation URL to be sent later.

As you can see, the job is empty, so let’s add the first task to it.

We need to grab the website sitemap and return it.
Scraping the website will return an HTML that we need to parse.
To do it, let’s install JSDOM.

npm install jsdom --save

And import it at the top of our file:

import {JSDOM} from "jsdom";

Now, we can add our first task.

It’s important to wrap our code with runTask, which lets Trigger.dev separate it from the other tasks. Trigger special architecture splits the tasks into different processes so Vercel serverless timeout does not affect them. Here is the code for the first task:

const getSiteMap = await io.runTask("grab-sitemap", async () => {
  const data = await (await fetch(payload.url)).text();
  const dom = new JSDOM(data);
  const sitemap = dom.window.document.querySelector('[rel="sitemap"]')?.getAttribute('href');
  return new URL(sitemap!, payload.url).toString();
});

We grab the entire HTML from the URL with an HTTP request.
We convert it into a JS object.
We find the sitemap URL.
We parse it and return it.

Going forward, we need to scrape the sitemap, extract all the URLs and return them.
Let’s install Lodash - special functions for array structures.

npm install lodash @types/lodash --save

Here is the code of the task:

export const makeId = (length: number) => {
    let text = '';
    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for (let i = 0; i < length; i += 1) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
};

const {identifier, list} = await io.runTask("load-and-parse-sitemap", async () => {
    const urls = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/g;
    const identifier = makeId(5);
    const data = await (await fetch(getSiteMap)).text();
    // @ts-ignore
    return {identifier, list: chunk(([...new Set(data.match(urls))] as string[]).filter(f => f.includes(payload.url)).map(p => ({identifier, url: p})), 25)};
});

We create a new function called makeId to generate a random identifier for all our pages.
We create a new task and add a Regex to extract every possible URL
We send an HTTP request to load the sitemap and extract all its URLs.
We chunk the URL into arrays of 25 elements (if we have 100 elements, we will have four arrays of 25 elements)

Next, let’s create a new job to process each URL.

Here is the complete code:

function getElementsBetween(startElement: Element, endElement: Element) {
    let currentElement = startElement;
    const elements = [];

    // Traverse the DOM until the endElement is reached
    while (currentElement && currentElement !== endElement) {
        currentElement = currentElement.nextElementSibling!;

        // If there's no next sibling, go up a level and continue
        if (!currentElement) {
            // @ts-ignore
            currentElement = startElement.parentNode!;
            startElement = currentElement;
            if (currentElement === endElement) break;
            continue;
        }

        // Add the current element to the list
        if (currentElement && currentElement !== endElement) {
            elements.push(currentElement);
        }
    }

    return elements;
}

const processContent = client.defineJob({
  // This is the unique identifier for your Job; it must be unique across all Jobs in your project.
  id: "process-content",
  name: "Process Content",
  version: "0.0.1",
  // This is triggered by an event using eventTrigger. You can also trigger Jobs with webhooks, on schedules, and more: https://trigger.dev/docs/documentation/concepts/triggers/introduction
  trigger: eventTrigger({
    name: "process.content.event",
    schema: object({
      url: string(),
      identifier: string(),
    })
  }),
  run: async (payload, io, ctx) => {
    return io.runTask('grab-content', async () => {
        // We first grab a raw html of the content from the website
        const data = await (await fetch(payload.url)).text();

        // We load it with JSDOM so we can manipulate it
        const dom = new JSDOM(data);

        // We remove all the scripts and styles from the page
        dom.window.document.querySelectorAll('script, style').forEach((el) => el.remove());

        // We grab all the titles from the page
        const content = Array.from(dom.window.document.querySelectorAll('h1, h2, h3, h4, h5, h6'));

        // We grab the last element so we can get the content between the last element and the next element
        const lastElement = content[content.length - 1]?.parentElement?.nextElementSibling!;
        const elements = [];

        // We loop through all the elements and grab the content between each title
        for (let i = 0; i < content.length; i++) {
            const element = content[i];
            const nextElement = content?.[i + 1] || lastElement;
            const elementsBetween = getElementsBetween(element, nextElement);
            elements.push({
                title: element.textContent, content: elementsBetween.map((el) => el.textContent).join('\n')
            });
        }

        // We create a raw text format of all the content
        const page = `
        ----------------------------------
        url: ${payload.url}\n
        ${elements.map((el) => `${el.title}\n${el.content}`).join('\n')}

        ----------------------------------
        `;

        // We save it to our database
        await prisma.docs.upsert({
            where: {
                url: payload.url
            }, update: {
                content: page, identifier: payload.identifier
            }, create: {
                url: payload.url, content: page, identifier: payload.identifier
            }
        });
    });
  },
});

We grab the content from the URL (previously extracted from the sitemap)
We parse it with JSDOM
We remove every possible <script>or <style> that exists on the page.
We grab all the titles on the page (h1, h2, h3, h4, h5, h6)
We iterate over the titles and take the content between them. We don’t want to take the entire page content because it might contain irrelevant content.
We create our version of the raw text of the page and save it to our database.

Now, let’s run this task for every sitemap URL.
Trigger introduces something called batchInvokeAndWaitForCompletion.
It allows us to send batches of 25 items to process, and it will simultaneously process all of them. Here are the next lines of codes:

let i = 0;
for (const item of list) {
    await processContent.batchInvokeAndWaitForCompletion(
        'process-list-' + i,
        item.map(
            payload => ({
            payload,
        }),
        86_400),
    );
    i++;
}

We manually trigger the previously created job in a batch of 25.

Once that’s completed, let’s take all the content we have saved to our database and connect it:

const data = await io.runTask("get-extracted-data", async () => {
    return (await prisma.docs.findMany({
        where: {
            identifier
        },
        select: {
            content: true
        }
    })).map((d) => d.content).join('\n\n');
});

We use the identifier we have specified before.

Now, let’s create a new file in ChatGPT with the new data:

const file = await io.openai.files.createAndWaitForProcessing("upload-file", {
  purpose: "assistants",
  file: data
});

createAndWaitForProcessing is a task created by Trigger.dev to upload files to the assistant. If you manually use openai without the integration, you must stream the files.

Now let’s create or update our assistant:

const assistant = await io.openai.runTask("create-or-update-assistant", async (openai) => {
    const currentAssistant = await prisma.assistant.findFirst({
        where: {
            url: payload.url
        }
    });
    if (currentAssistant) {
        return openai.beta.assistants.update(currentAssistant.aId, {
            file_ids: [file.id]
        });
    }
    return openai.beta.assistants.create({
        name: identifier,
        description: 'Documentation',
        instructions: 'You are a documentation assistant, you have been loaded with documentation from ' + payload.url + ', return everything in an MD format.',
        model: 'gpt-4-1106-preview',
        tools: [{ type: "code_interpreter" }, {type: 'retrieval'}],
        file_ids: [file.id],
    });
});

We first check if we have an assistant for that specific URL.
If we have one, let’s update the assistant with the new file.
If not, let’s create a new assistant.
We pass the instruction of “you are a documentation assistant.”, it’s essential to notice that we want the final output to be in MD format so we can display it nicer later.

For the final piece of the Puzzle, let’s save the new assistant into our database.

Here is the code:

await io.runTask("save-assistant", async () => {
    await prisma.assistant.upsert({
        where: {
            url: payload.url
        },
        update: {
            aId: assistant.id,
        },
        create: {
            aId: assistant.id,
            url: payload.url,
        }
    });
});

If the URL already exists, we can try to update it with the new assistant ID.

Here is the full code of the page:

import { eventTrigger } from "@trigger.dev/sdk";
import { client } from "@openai-assistant/trigger";
import {object, string} from "zod";
import {JSDOM} from "jsdom";
import {chunk} from "lodash";
import {prisma} from "@openai-assistant/helper/prisma.client";
import {openai} from "@openai-assistant/helper/open.ai";

const makeId = (length: number) => {
    let text = '';
    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for (let i = 0; i < length; i += 1) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
};

client.defineJob({
  // This is the unique identifier for your Job; it must be unique across all Jobs in your project.
  id: "process-documentation",
  name: "Process Documentation",
  version: "0.0.1",
  // This is triggered by an event using eventTrigger. You can also trigger Jobs with webhooks, on schedules, and more: https://trigger.dev/docs/documentation/concepts/triggers/introduction
  trigger: eventTrigger({
    name: "process.documentation.event",
    schema: object({
      url: string(),
    })
  }),
  integrations: {
    openai
  },
  run: async (payload, io, ctx) => {

    // The first task to get the sitemap URL from the website
    const getSiteMap = await io.runTask("grab-sitemap", async () => {
      const data = await (await fetch(payload.url)).text();
      const dom = new JSDOM(data);
      const sitemap = dom.window.document.querySelector('[rel="sitemap"]')?.getAttribute('href');
      return new URL(sitemap!, payload.url).toString();
    });

    // We parse the sitemap; instead of using some XML parser, we just use regex to get the URLs and we return it in chunks of 25
    const {identifier, list} = await io.runTask("load-and-parse-sitemap", async () => {
        const urls = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/g;
        const identifier = makeId(5);
        const data = await (await fetch(getSiteMap)).text();
        // @ts-ignore
        return {identifier, list: chunk(([...new Set(data.match(urls))] as string[]).filter(f => f.includes(payload.url)).map(p => ({identifier, url: p})), 25)};
    });

    // We go into each page and grab the content; we do this in batches of 25 and save it to the DB
    let i = 0;
    for (const item of list) {
        await processContent.batchInvokeAndWaitForCompletion(
            'process-list-' + i,
            item.map(
                payload => ({
                payload,
            }),
            86_400),
        );
        i++;
    }

    // We get the data that we saved in batches from the DB
    const data = await io.runTask("get-extracted-data", async () => {
        return (await prisma.docs.findMany({
            where: {
                identifier
            },
            select: {
                content: true
            }
        })).map((d) => d.content).join('\n\n');
    });

    // We upload the data to OpenAI with all the content
    const file = await io.openai.files.createAndWaitForProcessing("upload-file", {
      purpose: "assistants",
      file: data
    });

    // We create a new assistant or update the old one with the new file
    const assistant = await io.openai.runTask("create-or-update-assistant", async (openai) => {
        const currentAssistant = await prisma.assistant.findFirst({
            where: {
                url: payload.url
            }
        });
        if (currentAssistant) {
            return openai.beta.assistants.update(currentAssistant.aId, {
                file_ids: [file.id]
            });
        }
        return openai.beta.assistants.create({
            name: identifier,
            description: 'Documentation',
            instructions: 'You are a documentation assistant, you have been loaded with documentation from ' + payload.url + ', return everything in an MD format.',
            model: 'gpt-4-1106-preview',
            tools: [{ type: "code_interpreter" }, {type: 'retrieval'}],
            file_ids: [file.id],
        });
    });

    // We update our internal database with the assistant
    await io.runTask("save-assistant", async () => {
        await prisma.assistant.upsert({
            where: {
                url: payload.url
            },
            update: {
                aId: assistant.id,
            },
            create: {
                aId: assistant.id,
                url: payload.url,
            }
        });
    });
  },
});

export function getElementsBetween(startElement: Element, endElement: Element) {
    let currentElement = startElement;
    const elements = [];

    // Traverse the DOM until the endElement is reached
    while (currentElement && currentElement !== endElement) {
        currentElement = currentElement.nextElementSibling!;

        // If there's no next sibling, go up a level and continue
        if (!currentElement) {
            // @ts-ignore
            currentElement = startElement.parentNode!;
            startElement = currentElement;
            if (currentElement === endElement) break;
            continue;
        }

        // Add the current element to the list
        if (currentElement && currentElement !== endElement) {
            elements.push(currentElement);
        }
    }

    return elements;
}

// This job will grab the content from the website
const processContent = client.defineJob({
  // This is the unique identifier for your Job; it must be unique across all Jobs in your project.
  id: "process-content",
  name: "Process Content",
  version: "0.0.1",
  // This is triggered by an event using eventTrigger. You can also trigger Jobs with webhooks, on schedules, and more: https://trigger.dev/docs/documentation/concepts/triggers/introduction
  trigger: eventTrigger({
    name: "process.content.event",
    schema: object({
      url: string(),
      identifier: string(),
    })
  }),
  run: async (payload, io, ctx) => {
    return io.runTask('grab-content', async () => {
        try {
            // We first grab a raw HTML of the content from the website
            const data = await (await fetch(payload.url)).text();

            // We load it with JSDOM so we can manipulate it
            const dom = new JSDOM(data);

            // We remove all the scripts and styles from the page
            dom.window.document.querySelectorAll('script, style').forEach((el) => el.remove());

            // We grab all the titles from the page
            const content = Array.from(dom.window.document.querySelectorAll('h1, h2, h3, h4, h5, h6'));

            // We grab the last element so we can get the content between the last element and the next element
            const lastElement = content[content.length - 1]?.parentElement?.nextElementSibling!;
            const elements = [];

            // We loop through all the elements and grab the content between each title
            for (let i = 0; i < content.length; i++) {
                const element = content[i];
                const nextElement = content?.[i + 1] || lastElement;
                const elementsBetween = getElementsBetween(element, nextElement);
                elements.push({
                    title: element.textContent, content: elementsBetween.map((el) => el.textContent).join('\n')
                });
            }

            // We create a raw text format of all the content
            const page = `
            ----------------------------------
            url: ${payload.url}\n
            ${elements.map((el) => `${el.title}\n${el.content}`).join('\n')}

            ----------------------------------
            `;

            // We save it to our database
            await prisma.docs.upsert({
                where: {
                    url: payload.url
                }, update: {
                    content: page, identifier: payload.identifier
                }, create: {
                    url: payload.url, content: page, identifier: payload.identifier
                }
            });
        }
        catch (e) {
            console.log(e);
        }
    });
  },
});

We have finished creating the background job to scrape and index the files 🎉

Question the assistant

Now, let’s create the job to question our assistant.

Go to jobs and create a new file, question.assistant.ts. Add the following code:

import {eventTrigger} from "@trigger.dev/sdk";
import {client} from "@openai-assistant/trigger";
import {object, string} from "zod";
import {openai} from "@openai-assistant/helper/open.ai";

client.defineJob({
    // This is the unique identifier for your Job; it must be unique across all Jobs in your project.
    id: "question-assistant",
    name: "Question Assistant",
    version: "0.0.1", // This is triggered by an event using eventTrigger. You can also trigger Jobs with webhooks, on schedules, and more: https://trigger.dev/docs/documentation/concepts/triggers/introduction
    trigger: eventTrigger({
        name: "question.assistant.event", schema: object({
            content: string(),
            aId: string(),
            threadId: string().optional(),
        })
    }), integrations: {
        openai
    }, run: async (payload, io, ctx) => {
        // Create or use an existing thread
        const thread = payload.threadId ? await io.openai.beta.threads.retrieve('get-thread', payload.threadId) : await io.openai.beta.threads.create('create-thread');

       // Create a message in the thread
       await io.openai.beta.threads.messages.create('create-message', thread.id, {
            content: payload.content,
            role: 'user',
        });

       // Run the thread
        const run = await io.openai.beta.threads.runs.createAndWaitForCompletion('run-thread', thread.id, {
            model: 'gpt-4-1106-preview',
            assistant_id: payload.aId,
        });

        // Check the status of the thread
        if (run.status !== "completed") {
            console.log('not completed');
            throw new Error(`Run finished with status ${run.status}: ${JSON.stringify(run.last_error)}`);
        }

        // Get the messages from the thread
        const messages = await io.openai.beta.threads.messages.list("list-messages", run.thread_id, {
            query: {
                limit: "1"
            }
        });

        const content = messages[0].content[0];
        if (content.type === 'text') {
            return {content: content.text.value, threadId: thread.id};
        }
    }
});

The event takes three parameters
- content - the message we want to send to our assistant.
- aId - the internal ID of the assistant we previously created.
- threadId - The thread id of the conversation. As you can see, this is an optional parameter because, on the first message, we will not have a thread ID yet.
Then, we create or get the thread the previous thread.
We add a new message to the thread of the question we ask the assistant.
We run the thread and wait for it to finish.
We get the list of messages (and limit it to 1) as the first message is the last one in the conversation.
We return the message content and the thread ID we just created.

Add routing

We need to create 3 API routes for our application:

Send a new assistant for processing.
Get a specific assistant by URL.
Add a new message to an assistant.

Create a new folder inside of app/api called assistant, and inside, create a new file called route.ts. Add the following code inside:

import {client} from "@openai-assistant/trigger";
import {prisma} from "@openai-assistant/helper/prisma.client";

export async function POST(request: Request) {
    const body = await request.json();
    if (!body.url) {
        return new Response(JSON.stringify({error: 'URL is required'}), {status: 400});
    }

    // We send an event to the trigger to process the documentation
    const {id: eventId} = await client.sendEvent({
        name: "process.documentation.event",
        payload: {url: body.url},
    });

    return new Response(JSON.stringify({eventId}), {status: 200});
}

export async function GET(request: Request) {
    const url = new URL(request.url).searchParams.get('url');
    if (!url) {
        return new Response(JSON.stringify({error: 'URL is required'}), {status: 400});
    }

    const assistant = await prisma.assistant.findFirst({
        where: {
            url: url
        }
    });

    return new Response(JSON.stringify(assistant), {status: 200});
}

The first POST method gets a URL and triggers the process.documentation.event job with a URL sent from the client.

The second GET method gets the assistant from our database, from the URL sent from the client.

Now, let’s create the route to add a message to our assistant.
Inside of app/api create a new folder message and add a new file called route.ts, then add the following code:

import {prisma} from "@openai-assistant/helper/prisma.client";
import {client} from "@openai-assistant/trigger";

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

  // Check that we have the assistant id and the message
  if (!body.id || !body.message) {
      return new Response(JSON.stringify({error: 'Id and Message are required'}), {status: 400});
  }

  // get the assistant id in OpenAI from the id in the database
  const assistant = await prisma.assistant.findUnique({
      where: {
          id: +body.id
      }
  });

  // We send an event to the trigger to process the documentation
  const {id: eventId} = await client.sendEvent({
      name: "question.assistant.event",
      payload: {
          content: body.message,
          aId: assistant?.aId,
          threadId: body.threadId
      },
  });

  return new Response(JSON.stringify({eventId}), {status: 200});
}

That’s a very basic code. We get the message, assistant id, and thread id from the client and send it to our previously created question.assistant.event.

The last thing to do is create a function to get all our assistants.

Inside of helpers create a new function called get.list.ts and add the following code:

import {prisma} from "@openai-assistant/helper/prisma.client";

// Get the list of all the available assistants
export const getList = () => {
    return prisma.assistant.findMany({
    });
}

Very simple code to get all the assistants.

We have finished with the backend 🥳

Let’s move to the front.

Creating the Frontend

We are going to create a basic interface to add URLs and show the list of the added URLs:

The main page

Replace the content of app/page.tsx with the following code:

import {getList} from "@openai-assistant/helper/get.list";
import Main from "@openai-assistant/components/main";

export default async function Home() {
  const list = await getList();
  return (
     <Main list={list} />
  )
}

That’s a straightforward code that grabs the list from the database and passes it to our Main component.

Next, let’s create the Main component.

Inside app create a new folder components and add a new file called main.tsx. Add the following code:

"use client";

import {Assistant} from '@prisma/client';
import {useCallback, useState} from "react";
import {FieldValues, SubmitHandler, useForm} from "react-hook-form";
import {ChatgptComponent} from "@openai-assistant/components/chatgpt.component";
import {AssistantList} from "@openai-assistant/components/assistant.list";
import {TriggerProvider} from "@trigger.dev/react";

export interface ExtendedAssistant extends Assistant {
    pending?: boolean;
    eventId?: string;
}
export default function Main({list}: {list: ExtendedAssistant[]}) {
    const [assistantState, setAssistantState] = useState(list);
    const {register, handleSubmit} = useForm();

    const submit: SubmitHandler<FieldValues> = useCallback(async (data) => {
        const assistantResponse = await (await fetch('/api/assistant', {
            body: JSON.stringify({url: data.url}),
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })).json();

        setAssistantState([...assistantState, {...assistantResponse, url:  data.url, pending: true}]);
    }, [assistantState])

    const changeStatus = useCallback((val: ExtendedAssistant) => async () => {
        const assistantResponse = await (await fetch(`/api/assistant?url=${val.url}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })).json();
        setAssistantState([...assistantState.filter((v) => v.id), assistantResponse]);
    }, [assistantState])

    return (
        <TriggerProvider publicApiKey={process.env.NEXT_PUBLIC_TRIGGER_PUBLIC_API_KEY!}>
            <div className="w-full max-w-2xl mx-auto p-6 flex flex-col gap-4">
                <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}>
                    <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add documentation link" type="text" {...register('url', {required: 'true'})} />
                    <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit">
                        Add
                    </button>
                </form>
                <div className="divide-y-2 divide-gray-300 flex gap-2 flex-wrap">
                    {assistantState.map(val => (
                        <AssistantList key={val.url} val={val} onFinish={changeStatus(val)} />
                    ))}
                </div>
                {assistantState.filter(f => !f.pending).length > 0 && <ChatgptComponent list={assistantState} />}
            </div>
        </TriggerProvider>
    )
}

Let’s see what’s going on here:

We created a new interface that’s called ExtendedAssistant with two parameters pending and eventId. When we create a new assistant, we don’t have the final value, we will store only the eventId and listen to the job processing until finished.
We get the list from the server component and set it to our new state (so we can modify it later)
We added a TriggerProvider to help us listen for event completion and update it with data.
We use react-hook-form to create a new form for adding new assistants.
We added a form with one input URL to submit new assistants for processing.
We iterate and show all the assistants that exist.
On form submissions, we send the information to the previously created route to add the new assistant.
Once the event is completed, we trigger changeStatus to load the assistant from the database.
In the end, we have the ChatGPT component, only to be displayed if we don’t have assistants waiting to be processed (!f.pending)

Let’s create our AssistantList component.

inside components, create a new file assistant.list.tsx and add the following content there:

"use client";

import {FC, useEffect} from "react";
import {ExtendedAssistant} from "@openai-assistant/components/main";
import {useEventRunDetails} from "@trigger.dev/react";

export const Loading: FC<{eventId: string, onFinish: () => void}> = (props) => {
    const {eventId} = props;
    const { data, error } = useEventRunDetails(eventId);

    useEffect(() => {
        if (!data || error) {
            return ;
        }

        if (data.status === 'SUCCESS') {
            props.onFinish();
        }
    }, [data]);

    return <div className="pointer bg-yellow-300 border-yellow-500 p-1 px-3 text-yellow-950 border rounded-2xl">Loading</div>
};

export const AssistantList: FC<{val: ExtendedAssistant, onFinish: () => void}> = (props) => {
    const {val, onFinish} = props;
    if (val.pending) {
        return <Loading eventId={val.eventId!} onFinish={onFinish} />
    }

    return (
        <div key={val.url} className="pointer relative bg-green-300 border-green-500 p-1 px-3 text-green-950 border rounded-2xl hover:bg-red-300 hover:border-red-500 hover:text-red-950 before:content-[attr(data-content)]" data-content={val.url} />
    )
}

We iterate over all the assistants we created. If the assistants have already been created, we just display the name. If not, we render the <Loading /> component.

The loading component shows a Loading on the screen and long-polling the server until the event is finished.

We used the useEventRunDetails function created by Trigger.dev to know when the event is finished.

Once the event is finished, it triggers the onFinish function to update our client with the newly created assistant.

Chat interface

Now, let’s add the ChatGPT component and question our assistant!

Select the assistant we would like to use
Show the list of messages
Add input for the message we want to send and the submit button.

Inside of components add a new file called chatgpt.component.tsx

Let’s draw our ChatGPT chat box:

"use client";
import {FC, useCallback, useEffect, useRef, useState} from "react";
import {ExtendedAssistant} from "@openai-assistant/components/main";
import Markdown from 'react-markdown'
import {useEventRunDetails} from "@trigger.dev/react";

interface Messages {
    message?: string
    eventId?: string
}

export const ChatgptComponent = ({list}: {list: ExtendedAssistant[]}) => {
    const url = useRef<HTMLSelectElement>(null);
    const [message, setMessage] = useState('');
    const [messagesList, setMessagesList] = useState([] as Messages[]);
    const [threadId, setThreadId] = useState<string>('' as string);

    const submitForm = useCallback(async (e: any) => {
        e.preventDefault();
        setMessagesList((messages) => [...messages, {message: `**[ME]** ${message}`}]);
        setMessage('');

        const messageResponse = await (await fetch('/api/message', {
            method: 'POST',
            body: JSON.stringify({message, id: url.current?.value, threadId}),
        })).json();

        if (!threadId) {
            setThreadId(messageResponse.threadId);
        }

        setMessagesList((messages) => [...messages, {eventId: messageResponse.eventId}]);
    }, [message, messagesList, url, threadId]);

    return (
        <div className="border border-black/50 rounded-2xl flex flex-col">
            <div className="border-b border-b-black/50 h-[60px] gap-3 px-3 flex items-center">
                <div>Assistant:</div>
                <div>
                    <select ref={url} className="border border-black/20 rounded-xl p-2">
                        {list.filter(f => !f.pending).map(val => (
                            <option key={val.id} value={val.id}>{val.url}</option>
                        ))}
                    </select>
                </div>
            </div>
            <div className="flex-1 flex flex-col gap-3 py-3 w-full min-h-[500px] max-h-[1000px] overflow-y-auto overflow-x-hidden messages-list">
                {messagesList.map((val, index) => (
                    <div key={index} className={`flex border-b border-b-black/20 pb-3 px-3`}>
                        <div className="w-full">
                                {val.message ? <Markdown>{val.message}</Markdown> : <MessageComponent eventId={val.eventId!} onFinish={setThreadId} />}
                        </div>
                    </div>
                ))}
            </div>
            <form onSubmit={submitForm}>
                <div className="border-t border-t-black/50 h-[60px] gap-3 px-3 flex items-center">
                    <div className="flex-1">
                        <input value={message} onChange={(e) => setMessage(e.target.value)} className="read-only:opacity-20 outline-none border border-black/20 rounded-xl p-2 w-full" placeholder="Type your message here" />
                    </div>
                    <div>
                        <button className="border border-black/20 rounded-xl p-2 disabled:opacity-20" disabled={message.length < 3}>Send</button>
                    </div>
                </div>
            </form>
        </div>
    )
}

export const MessageComponent: FC<{eventId: string, onFinish: (threadId: string) => void}> = (props) => {
    const {eventId} = props;
    const { data, error } = useEventRunDetails(eventId);

    useEffect(() => {
        if (!data || error) {
            return ;
        }

        if (data.status === 'SUCCESS') {
            props.onFinish(data.output.threadId);
        }
    }, [data]);

    if (!data || error || data.status !== 'SUCCESS') {
        return (
            <div className="flex justify-end items-center pb-3 px-3">
                <div className="animate-spin rounded-full h-3 w-3 border-t-2 border-b-2 border-blue-500" />
            </div>

    }

    return <Markdown>{data.output.content}</Markdown>;
};

A few exciting things are going on over here:

When we create a new message, we automatically render it on the screen as “our” message, but when we send it to the server, we need to push the event id, as we don’t have the message yet. That’s why we use {val.message ? <Markdown>{val.message}</Markdown> : <MessageComponent eventId={val.eventId!} onFinish={setThreadId} />}
We wrap our messages with a Markdown component. If you remember, we told ChatGPT in the previous steps to output everything in an MD format so we can render it correctly.
Once the event has finished processing, we update the thread id so that we will have the context of the same conversation from the following message.

And we are done 🎉

Let's connect! 🔌

The source for this tutorial is available here:

https://github.com/triggerdotdev/blog/tree/main/openai-assistant

Thank you for reading!

🚀 Top 4 ways to send notifications about new stars ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

Eric Allam — Tue, 21 Nov 2023 13:11:59 +0000

TL;DR

In the last article, I discussed creating a GitHub stars monitor.
In this article, I want to show you how you can be informed about new stars daily.
We will learn:

How to build a generic system to create and use providers.
How to use the providers to send notifications.
Different use cases of using different providers.

Your background job platform 🔌

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more!

Please help us with a star 🥹.
It would help us to create more articles like this 💖

Star the Trigger.dev repository ⭐️

Let’s set it up 🔥

We are going to create different providers to inform us when there are new stars. We will set up Email, SMS, Slack, and Discord notifications.

Our goal is to make it simple enough for every contributor to contribute more providers in the future.

Each provider will have a different set of parameters, some only API keys and some phone numbers, depending on the providers.

To validate those keys, let’s install zod; it’s a great library to define schemas and check data against them.

You can start by running:

npm install zod --save

Once that is done, create a new folder called providers and then a new file inside called register.provider.ts.

here is the code of the file:

import {Schema} from "zod";

export function registerProvider<T>(
    name: string,
    options: {active: boolean},
    validation: Schema<T>,
    run: (libName: string, stars: number, values: T) => Promise<void>
) {
    // if not active, we can just pass an empty function, nothing will run
    if (!options.active) {
        return () => {};
    }

    // will validate and remove unnecessary values (Security wise)
    const env = validation.parse(process.env);

    // return the function we will run at the end of the job
    return async (libName: string, stars: number) => {
        console.log(`Running provider ${name}`);
        await run(libName, stars, env as T);
        console.log(`Finished running provider ${name}`);
    }
}

It’s not a lot of code, but it might be a little bit complex.

We are starting by creating a new function called registerProvider. That function gets a generic type T, which is basically our required environment variables.

Then we have 4 more parameters:

name - that can be any of Twilio, Discord, Slack, or Resend.
options - currently, one parameter is the provider active or not?
validation - here, we pass the zod schema of our required parameters in our .env file.
run - That actually functions to send the notifications. Pay attention that the parameters that are being passed into it are the library name, the number of stars, and the environment variables that we specified in validation

Then we have the actual function:

First, we check if the provider is active or not. If not, we send an empty function.

Then, we validate and extract the variables we specify in our schema. If the variables are missing zod will send an error and will not let the application run.

Lastly, we return a function that gets the library name and the number of stars and triggers the notification.

Inside our providers folder, create a new file called providers.ts and add the following code inside:

export const Providers = [];

Later, we will add all our providers there.

Modify TriggerDev jobs

This article is a continuation of the previous article on creating a GitHub stars monitor.

Edit the file jobs/sync.stars.ts and add the following code to the bottom of the file:

const triggerNotification = client.defineJob({
    id: "trigger-notification",
    name: "Trigger Notification",
    version: "0.0.1",
    trigger: invokeTrigger({
      schema: z.object({
        stars: z.number(),
        library: z.string(),
        providerNumber: z.number(),
      })
    }),
    run: async (payload, io, ctx) => {
      await io.runTask("trigger-notification", async () => {
        return Providers[payload.providerNumber](payload.library, payload.stars);
      });
    }
});

This job gets the number of stars, library name, and provider number and triggers the notification for a specific provider from the previously defined providers.

Now, let’s go ahead and modify getStars at the end of the function add the following code:

for (let i = 0; i < Providers.length; i++) {
      await triggerNotification.invoke(payload.name + '-' + i, {
          library: payload.name,
          stars: stargazers_count - payload.previousStarCount,
          providerNumber: i,
      });
  }

This will trigger a notification for every library.

The full page code:

import { cronTrigger, invokeTrigger } from "@trigger.dev/sdk";
import { client } from "@/trigger";
import { prisma } from "../../helper/prisma";
import axios from "axios";
import { z } from "zod";
import {Providers} from "@/providers/providers";

// Your first job
// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline.
client.defineJob({
  id: "sync-stars",
  name: "Sync Stars Daily",
  version: "0.0.1",
  // Run a cron every day at 23:00 AM
  trigger: cronTrigger({
    cron: "0 23 * * *",
  }),
  run: async (payload, io, ctx) => {
    const repos = await io.runTask("get-stars", async () => {
      // get all libraries and current amount of stars
      return await prisma.repository.groupBy({
        by: ["name"],
        _sum: {
          stars: true,
        },
      });
    });

    //loop through all repos and invoke the Job that gets the latest stars
    for (const repo of repos) {
      await getStars.invoke(repo.name, {
        name: repo.name,
        previousStarCount: repo?._sum?.stars || 0,
      });
    }
  },
});

const getStars = client.defineJob({
  id: "get-latest-stars",
  name: "Get latest stars",
  version: "0.0.1",
  // Run a cron every day at 23:00 AM
  trigger: invokeTrigger({
    schema: z.object({
      name: z.string(),
      previousStarCount: z.number(),
    }),
  }),
  run: async (payload, io, ctx) => {
    const stargazers_count = await io.runTask("get-stars", async () => {
      const {data} = await axios.get(`https://api.github.com/repos/${payload.name}`, {
        headers: {
          authorization: `token ${process.env.TOKEN}`,
        },
      });
      return data.stargazers_count as number;
    });

    await io.runTask("upsert-stars", async () => {
      await prisma.repository.upsert({
        where: {
          name_day_month_year: {
            name: payload.name, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(),
          },
        }, update: {
          stars: stargazers_count - payload.previousStarCount,
        }, create: {
          name: payload.name, stars: stargazers_count - payload.previousStarCount, month: new Date().getMonth() + 1, year: new Date().getFullYear(), day: new Date().getDate(),
        },
      });
    });

    for (let i = 0; i < Providers.length; i++) {
        await triggerNotification.invoke(payload.name + '-' + i, {
            library: payload.name,
            stars: stargazers_count - payload.previousStarCount,
            providerNumber: i,
        });
    }
  },
});

const triggerNotification = client.defineJob({
    id: "trigger-notification",
    name: "Trigger Notification",
    version: "0.0.1",
    trigger: invokeTrigger({
      schema: z.object({
        stars: z.number(),
        library: z.string(),
        providerNumber: z.number(),
      })
    }),
    run: async (payload, io, ctx) => {
      await io.runTask("trigger-notification", async () => {
        return Providers[payload.providerNumber](payload.library, payload.stars);
      });
    }
});

Now, the fun part 🎉

Let’s go ahead and create our providers!

First create a new folder called providers/lists

1. Discord

Create a new file called discord.provider.ts and add the following code:

import {object, string} from "zod";
import {registerProvider} from "@/providers/register.provider";
import axios from "axios";

export const DiscordProvider = registerProvider(
    "discord",
    {active: true},
    object({
        DISCORD_WEBHOOK_URL: string(),
    }),
    async (libName, stars, values) => {
        await axios.post(values.DISCORD_WEBHOOK_URL, {content: `The library ${libName} has ${stars} new stars!`});
    }
);

As you can see, we are using the registerProvider to create a new provider called DiscordProvider

We set the name to discord
We set it to be active
We specify that we need an environment variable called DISCORD_WEBHOOK_URL.
We use a simple post command with Axios to add the information to the check.

To get DISCORD_WEBHOOK_URL:

Go to your Discord server
Click edit on one of the channels
Go to Integrations
Click Create Webhook
Click on the created webhook, then click Copy webhook URL

Edit our .env file on our root project and add

SLACK_WEBHOOK_URL=<your copied url>

2. Slack

Create a new file called slack.provider.ts and add the following code:

import {object, string} from "zod";
import {registerProvider} from "@/providers/register.provider";
import axios from "axios";

export const SlackProvider = registerProvider(
    "slack",
    {active: true},
    object({
        SLACK_WEBHOOK_URL: string(),
    }),
    async (libName, stars, values) => {
        await axios.post(values.SLACK_WEBHOOK_URL, {text: `The library ${libName} has ${stars} new stars!`});
    }
);

As you can see, we are using the registerProvider to create a new provider called SlackProvider

We set the name to slack
We set it to be active
We specify that we need an environment variable called SLACK_WEBHOOK_URL.
We use a simple post command with Axios to add the information to the check.

To get SLACK_WEBHOOK_URL:

Create a new Slack app by using this URL: https://api.slack.com/apps?new_app=1
Select the first option: “From scratch”
Give an app name (any) and Slack the workspace you would like to add the notifications too. Click Create App.
In “Add features and functionalities,” click Incoming hook
In Activate Incoming Webhooks, change it to “On”.
Click on “Add New Webhook to Workspace”.
Select the channel you want and click “Allow”.
Copy the webhook URL.

Edit our .env file on our root project and add

SLACK_WEBHOOK_URL=<your copied url>

3. Email

You can use different kinds of email providers. For example, we will use Resend to send emails.

For that, let’s install resend on our project:

npm install resend --save

Create a new file called resend.provider.ts and add the following code:

import {object, string} from "zod";
import {registerProvider} from "@/providers/register.provider";
import axios from "axios";
import { Resend } from 'resend';

export const ResendProvider = registerProvider(
    "resend",
    {active: true},
    object({
        RESEND_API_KEY: string(),
    }),
    async (libName, stars, values) => {
        const resend = new Resend(values.RESEND_API_KEY);
        await resend.emails.send({
            from: "Eric Allam <eric@trigger.dev>",
            to: ['eric@trigger.dev'],
            subject: 'New GitHub stars',
            html: `The library ${libName} has ${stars} new stars!`,
        });
    }
);

As you can see, we are using the registerProvider to create a new provider called ResendProvider

We set the name to resend
We set it to be active
We specify that we need an environment variable called RESEND_API_KEY.
We use the Resend library to send an email to ourselves with the new number of stars.

To get RESEND_API_KEY:

Create a new account at: https://resend.com
Go to API Keys or use this URL https://resend.com/api-keys
Click “+ Create API Key,” add the Key name, choose “Sending access” and use the default “All Domains”. Click Add.
Copy the API Key.

Edit our .env file on our root project and add

RESEND_API_KEY=<your API key>

4. SMS

SMS are a little bit more complex as they require multiple variables.

For that, let’s install Twilio on our project:

npm install twilio --save

Create a new file called twilio.provider.ts and add the following code:

import {object, string} from "zod";
import {registerProvider} from "@/providers/register.provider";
import axios from "axios";
import client from 'twilio';

export const TwilioProvider = registerProvider(
    "twilio",
    {active: true},
    object({
        TWILIO_SID: string(),
        TWILIO_AUTH_TOKEN: string(),
        TWILIO_FROM_NUMBER: string(),
        TWILIO_TO_NUMBER: string(),
    }),
    async (libName, stars, values) => {
        const twilio = client(values.TWILIO_SID, values.TWILIO_AUTH_TOKEN);
        await twilio.messages.create({
            body: `The library ${libName} has ${stars} new stars!`,
            from: values.TWILIO_FROM_NUMBER,
            to: values.TWILIO_TO_NUMBER,
        });
    }
);

As you can see, we are using the registerProvider to create a new provider called TwilioProvider

We set the name to twilio
We set it to be active
We specify that we need environment variables: TWILIO_SID, TWILIO_AUTH_TOKEN, TWILIO_FROM_NUMBER and TWILIO_TO_NUMBER
We use the Twilio create function to send an SMS.

To get TWILIO_SID, TWILIO_AUTH_TOKEN, TWILIO_FROM_NUMBER and TWILIO_TO_NUMBER

Create a new account at https://twilio.com
Mark that you want to use it to send SMSs.
Click “Get a phone number”
Copy the “Account SID”, “Auth Token” and “My Twilio Phone Number”

Edit our .env file on our root project and add

TWILIO_SID=<your SID key>
TWILIO_AUTH_TOKEN=<your AUTH TOKEN key>
TWILIO_FROM_NUMBER=<your FROM number>
TWILIO_TO_NUMBER=<your TO number>

Create new providers

As you can see, now it’s super easy to create providers.

You can also use the open-source community to create new providers since they only need to create one new file inside the providers/list directory.

The last thing to do is edit your providers.ts file and add all your providers.

import {DiscordProvider} from "@/providers/list/discord.provider";
import {ResendProvider} from "@/providers/list/resend.provider";
import {SlackProvider} from "@/providers/list/slack.provider";
import {TwilioProvider} from "@/providers/list/twilio.provider";

export const Providers = [
    DiscordProvider,
    ResendProvider,
    SlackProvider,
    TwilioProvider,
];

Feel free to create more providers for push notifications, web push notifications, in-app notifications, etc.

And you are done 🥳

Let's connect! 🔌

As an open-source developer, you're invited to join our community to contribute and engage with maintainers. Don't hesitate to visit our GitHub repository to contribute and create issues related to Trigger.dev.

The source for this tutorial is available here:

https://github.com/triggerdotdev/blog/tree/main/stars-monitor-notifications

Thank you for reading!

🔥 Take NextJS to the next level: Create a GitHub stars monitor 🤯

Eric Allam — Tue, 14 Nov 2023 12:42:30 +0000

In this article, you will learn how to create a GitHub stars monitor to check your stars over months and how many stars you get daily.

Use the GitHub API to fetch the current number of stars received every day.
Draw a beautiful graph of stars per day on the screen.
Create a job to collect the new stars every day.

Your background job platform 🔌

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more!

Please help us with a star 🥹.
It would help us to create more articles like this 💖

Star the Trigger.dev repository ⭐️

Here is what you need to know 😻

Most of the work around getting the number of stars on GitHub will be done through the GitHub API.

GitHub API has some limits:

Maximum 100 stargazers per request
Max 100 concurrent requests
Max 60 requests per hour

The TriggerDev repository has more than 5000 stars, and it’s literally not possible to count all the stars in a reasonable amount of time (live).

So, we will do the same trick that GitHub Stars History does.

Fetch the total amount of stars (5,715) divided by 100 results per page = 58 pages
Set the maximum amount of requests we want (20 pages max) divided by 58 pages = 3 pages skip.
Fetch the stars from those pages (2000 stars) and then the stars left, and we will proportionally add to the other days (3715 stars).

It will draw us a nice graph with the bump in stars where needed.

When we fetch a new number of stars daily, it will be a lot easier.
We will take the total number of stars we currently have minus the new number of stars from GitHub. We will not need to iterate the stargazers anymore.

Let’s set it up 🔥

Our application will consist of one page:

Add repositories you want to monitor.
See the list of repositories with their GitHub graph of stars.
Delete the ones you don’t want anymore.

💡 We will use NextJS new app router, please make sure you have a node version 18+ before installing the project.

Set up a new project with NextJS

npx create-next-app@latest

We will have to save all the stars into our database!

For our demo, we will use SQLite with Prisma.

It is super easy to install, but feel free to use any other database.

npm install prisma @prisma/client --save

Install Prisma in our project

npx prisma init --datasource-provider sqlite

Go to prisma/schema.prisma and replace it with the following schema:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Repository {
    id        String   @id @default(uuid())
    month     Int
    year      Int
    day       Int
    name      String
    stars     Int
    @@unique([name, day, month, year])
}

And then run

npx prisma db push

We have basically created a new table in our SQLite database that’s called Repository:

month, year, day is a date.
name the name of the repository
stars and the number of stars for that specific date.

You can also see that we added a @@unique at the bottom, which means we can have a duplicate record of the name, month, year, day together. It will throw an error.

Let’s add our Prisma client.

Create a new folder called helper and add a new file called prisma.ts and the following code inside:

import {PrismaClient} from '@prisma/client';

export const prisma = new PrismaClient();

We can later use that prisma variable to question our database.

Application UI Skeleton 💀

We will need a few libraries to complete this tutorial:

Axios - to send requests to the server (feel free to use fetch if you feel more comfortable with it)
Dayjs - Great library to deal with dates. It’s an alternative to moment.js that’s not fully maintained anymore.
Lodash - Cool library to play with data structures.
react-hook-form - The best library to deal with forms (validation / values / etc.)
chart.js - My library of choosing to draw our GitHub stars charts.

Let’s install them:

npm install axios dayjs lodash @types/lodash chart.js react-hook-form react-chartjs-2 --save

Create a new folder called components and add a new file called main.tsx

Add the following code:

"use client";
import {useForm} from "react-hook-form";
import axios from "axios";
import {Repository} from "@prisma/client";
import {useCallback, useState} from "react";

export default function Main() {
    const [repositoryState, setRepositoryState] = useState([]);
    const {register, handleSubmit} = useForm();

    const submit = useCallback(async (data: any) => {
        const {data: repositoryResponse} = await axios.post('/api/repository', {todo: 'add', repository: data.name});
        setRepositoryState([...repositoryState, ...repositoryResponse]);
    }, [repositoryState])

    const deleteFromList = useCallback((val: List) => () => {
        axios.post('/api/repository', {todo: 'delete', repository: `https://github.com/${val.name}`});
        setRepositoryState(repositoryState.filter(v => v.name !== val.name));
    }, [repositoryState])

    return (
        <div className="w-full max-w-2xl mx-auto p-6 space-y-12">
            <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}>
                <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add Git repository" type="text" {...register('name', {required: 'true'})} />
                <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit">
                    Add
                </button>
            </form>
            <div className="divide-y-2 divide-gray-300">
                {repositoryState.map(val => (
                    <div key={val.name} className="space-y-4">
                        <div className="flex justify-between items-center py-10">
                            <h2 className="text-xl font-bold">{val.name}</h2>
                            <button className="p-3 border border-black/20 rounded-xl bg-red-400" onClick={deleteFromList(val)}>Delete</button>
                        </div>
                        <div className="bg-white rounded-lg border p-10">
                            <div className="h-[300px]]">
                                {/* Charts Component */}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

Super simple React component

Form that allows us to add a new GitHub library and send it to the server POST - /api/repository {todo: 'add'}
Delete repositories we don’t want POST - /api/repository {todo: 'delete'}
List of all the added libraries with their graph.

Let’s move to the complex part of the article, adding the new repository.

Counting stars

Inside of helper create a new file called all.stars.ts and add the following code:

import axios from "axios";
import dayjs from "dayjs";
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);

const requestAmount = 20;

export const getAllGithubStars = async (owner: string, name: string) => {
    // Get the amount of stars from GitHub
    const totalStars = (await axios.get(`https://api.github.com/repos/${owner}/${name}`)).data.stargazers_count;

    // get total pages
    const totalPages = Math.ceil(totalStars / 100);

    // How many pages to skip? We don't want to spam requests
    const pageSkips = totalPages < requestAmount ? requestAmount : Math.ceil(totalPages / requestAmount);

    // Send all the requests at the same time
    const starsDates = (await Promise.all([...new Array(requestAmount)].map(async (_, index) => {
        const getPage = (index * pageSkips) || 1;
        return (await axios.get(`https://api.github.com/repos/${owner}/${name}/stargazers?per_page=100&page=${getPage}`, {
            headers: {
                Accept: "application/vnd.github.v3.star+json",
            },
        })).data;
    }))).flatMap(p => p).reduce((acc: any, stars: any) => {
        const yearMonth = stars.starred_at.split('T')[0];
        acc[yearMonth] = (acc[yearMonth] || 0) + 1;
        return acc;
    }, {});

    // how many stars did we find from a total of `requestAmount` requests?
    const foundStars = Object.keys(starsDates).reduce((all, current) => all + starsDates[current], 0);

    // Find the earliest date
    const lowestMonthYear = Object.keys(starsDates).reduce((lowest, current) => {
        if (lowest.isAfter(dayjs.utc(current.split('T')[0]))) {
            return dayjs.utc(current.split('T')[0]);
        }
        return lowest;
    }, dayjs.utc());

    // Count dates until today
    const splitDate = dayjs.utc().diff(lowestMonthYear, 'day') + 1;

    // Create an array with the amount of stars we didn't find
    const array = [...new Array(totalStars - foundStars)];

    // Set the amount of value to add proportionally for each day
    let splitStars: any[][] = [];
    for (let i = splitDate; i > 0; i--) {
        splitStars.push(array.splice(0, Math.ceil(array.length / i)));
    }

    // Calculate the amount of stars for each day
    return [...new Array(splitDate)].map((_, index, arr) => {
        const yearMonthDay = lowestMonthYear.add(index, 'day').format('YYYY-MM-DD');
        const value = starsDates[yearMonthDay] || 0;
        return {
            stars: value + splitStars[index].length,
            date: {
                month: +dayjs.utc(yearMonthDay).format('M'),
                year: +dayjs.utc(yearMonthDay).format('YYYY'),
                day: +dayjs.utc(yearMonthDay).format('D'),
            }
        };
    });
}

So what’s going on here:

totalStars - We take the total amount of stars the library has.
totalPages - We calculate the number of pages (100 records per page)
pageSkips - Since we want a maximum of 20 requests, we check how many pages we must skip each time.
starsDates - We populate the number of stars for each date.
foundStars - Since we are skipping dates, we need to calculate the total number of stars we actually found.
lowestMonthYear - Finding the earliest date of stars we have.
splitDate - How many dates are there between the earliest date and today?
array - an empty array with splitDate amount of items.
splitStars - The number of stars we are missing and need to add each date proportionally.
Final return - The new array with the number of stars in each day since the beginning.

So, we have successfully created a function that can give us stars per day.

I have tried to display it like this, and it is chaos.
You probably want to display the amount of stars for every month.
Furthermore, you would probably want to accumulate stars instead of:

February - 300 stars
March - 200 stars
April - 400 stars

It would be nicer to have it like this:

February - 300 stars
March - 500 stars
April - 900 stars

Both options are valid. It depends on what you want to show!

So let’s go to our helper folder and create a new file called get.list.ts.

Here is the content of the file:

import {prisma} from "./prisma";
import {groupBy, sortBy} from "lodash";
import {Repository} from "@prisma/client";

function fixStars (arr: any[]): Array<{name: string, stars: number, month: number, year: number}> {
    return arr.map((current, index) => {
        return {
            ...current,
            stars: current.stars + arr.slice(index + 1, arr.length).reduce((acc, current) => acc + current.stars, 0),
        }
    }).reverse();
}

export const getList = async (data?: Repository[]) => {
    const repo = data || await prisma.repository.findMany();
    const uniqMonth = Object.values(
        groupBy(
            sortBy(
                Object.values(
                    groupBy(repo, (p) => p.name + '-' + p.year + '-' + p.month))
                    .map(current => {
                        const stars = current.reduce((acc, current) => acc + current.stars, 0);
                        return {
                            name: current[0].name,
                            stars,
                            month: current[0].month,
                            year: current[0].year
                        }
                    }),
            [(p: any) => -p.year, (p: any) => -p.month]
        ),p => p.name)
    );

    const fixMonthDesc = uniqMonth.map(p => fixStars(p));

    return fixMonthDesc.map(p => ({
        name: p[0].name,
        list: p
    }));
}

First, it converts all the stars by day to stars by month.

Later, we will accumulate the number of stars for every month.

One main thing to note here is that data?: Repository[] is optional.

We have made a simple logic: if we don’t pass the data, it will do it for all the repositories we have in our database.

If we pass the data, it will work only on it.

Why, you ask?

When we create a new repository, we need to work on the specific repository data after we add it to the database.
When we reload the page, we need to get the data for all of our data.

Now, let’s work on our stars create/delete route.

Go to src/app/api and create a new folder called repository. In that folder, create a new file called route.tsx.

Add the following code there:

import {getAllGithubStars} from "../../../../helper/all.stars";
import {prisma} from "../../../../helper/prisma";
import {Repository} from "@prisma/client";
import {getList} from "../../../../helper/get.list";

export async function POST(request: Request) {
    const body = await request.json();
    if (!body.repository) {
        return new Response(JSON.stringify({error: 'Repository is required'}), {status: 400});
    }

    const {owner, name} = body.repository.match(/github.com\/(?<owner>.*)\/(?<name>.*)/).groups;
    if (!owner || !name) {
        return new Response(JSON.stringify({error: 'Repository is invalid'}), {status: 400});
    }

    if (body.todo === 'delete') {
        await prisma.repository.deleteMany({
            where: {
                name: `${owner}/${name}`
            }
        });

        return new Response(JSON.stringify({deleted: true}), {status: 200});
    }

    const starsMonth = await getAllGithubStars(owner, name);
    const repo: Repository[] = [];
    for (const stars of starsMonth) {
        repo.push(
            await prisma.repository.upsert({
                where: {
                    name_day_month_year: {
                        name: `${owner}/${name}`,
                        month: stars.date.month,
                        year: stars.date.year,
                        day: stars.date.day,
                    },
                },
                update: {
                    stars: stars.stars,
                },
                create: {
                    name: `${owner}/${name}`,
                    month: stars.date.month,
                    year: stars.date.year,
                    day: stars.date.day,
                    stars: stars.stars,
                }
            })
        );
    }
    return new Response(JSON.stringify(await getList(repo)), {status: 200});
}

We are sharing both the DELETE and CREATE routes, which shouldn’t usually be used in production use, but we have done it for the article to make it easier for you.

We take the JSON from the request, check that the “repository” field exists, and that it’s a valid path for a GitHub repository.

If it’s a delete request, we use prisma to delete the repository from the database by the name of the repository and return the request.

If it’s a create, we use getAllGithubStars to get the data to save to our database.

💡 Since we have put a unique index on name,month,year and day we can use prisma upsert to update the data if the record already exists

Last, we return the newly accumulated data to the client.

The hard part finished 🍾

Main page population 💽

We haven’t created our main page component yet.

Let’s do it.

Go to the app folder create or edit page.tsx and add the following code:

"use server";

import Main from "@/components/main";
import {getList} from "../../helper/get.list";

export default async function Home() {
  const list: any[] = await getList();
  return (
      <Main list={list} />
  )
}

We use the same function of getList to get all data of all the repositories accumulated.

Let’s also modify the main component to support it.

Edit components/main.tsx and replace it with:

"use client";
import {useForm} from "react-hook-form";
import axios from "axios";
import {Repository} from "@prisma/client";
import {useCallback, useState} from "react";

interface List {
    name: string,
    list: Repository[]
}

export default function Main({list}: {list: List[]}) {
    const [repositoryState, setRepositoryState] = useState(list);
    const {register, handleSubmit} = useForm();

    const submit = useCallback(async (data: any) => {
        const {data: repositoryResponse} = await axios.post('/api/repository', {todo: 'add', repository: data.name});
        setRepositoryState([...repositoryState, ...repositoryResponse]);
    }, [repositoryState])

    const deleteFromList = useCallback((val: List) => () => {
        axios.post('/api/repository', {todo: 'delete', repository: `https://github.com/${val.name}`});
        setRepositoryState(repositoryState.filter(v => v.name !== val.name));
    }, [repositoryState])

    return (
        <div className="w-full max-w-2xl mx-auto p-6 space-y-12">
            <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}>
                <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add Git repository" type="text" {...register('name', {required: 'true'})} />
                <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit">
                    Add
                </button>
            </form>
            <div className="divide-y-2 divide-gray-300">
                {repositoryState.map(val => (
                    <div key={val.name} className="space-y-4">
                        <div className="flex justify-between items-center py-10">
                            <h2 className="text-xl font-bold">{val.name}</h2>
                            <button className="p-3 border border-black/20 rounded-xl bg-red-400" onClick={deleteFromList(val)}>Delete</button>
                        </div>
                        <div className="bg-white rounded-lg border p-10">
                            <div className="h-[300px]]">
                                {/* Charts Components */}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

Show Charts! 📈

Go to the components folder and add a new file called chart.tsx.

Add the following code:

"use client";
import {Repository} from "@prisma/client";
import {useMemo} from "react";
import React from 'react';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
);

export default function ChartComponent({repository}: {repository: Repository[]}) {
    const labels = useMemo(() => {
        return repository.map(r => `${r.year}/${r.month}`);
    }, [repository]);

    const data = useMemo(() => ({
        labels,
        datasets: [
            {
                label: repository[0].name,
                data: repository.map(p => p.stars),
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: 'rgba(255, 99, 132, 0.5)',
                tension: 0.2,
            },
        ],
    }), [repository]);

    return (
        <Line options={{
            responsive: true,
        }} data={data} />
    );
}

We use the chart.js library to draw a Line type of graph.

It’s pretty straightforward since we did all the data structuring on the server side.

Once big thing to note here is that we export default our ChartComponent. That’s because it uses Canvas. that’s unavailable on the server side, and we will need to lazy load this component.

Let’s modify our main.tsx:

"use client";
import {useForm} from "react-hook-form";
import axios from "axios";
import {Repository} from "@prisma/client";
import dynamic from "next/dynamic";
import {useCallback, useState} from "react";
const ChartComponent = dynamic(() => import('@/components/chart'), { ssr: false, })

interface List {
    name: string,
    list: Repository[]
}

export default function Main({list}: {list: List[]}) {
    const [repositoryState, setRepositoryState] = useState(list);
    const {register, handleSubmit} = useForm();

    const submit = useCallback(async (data: any) => {
        const {data: repositoryResponse} = await axios.post('/api/repository', {todo: 'add', repository: data.name});
        setRepositoryState([...repositoryState, ...repositoryResponse]);
    }, [repositoryState])

    const deleteFromList = useCallback((val: List) => () => {
        axios.post('/api/repository', {todo: 'delete', repository: `https://github.com/${val.name}`});
        setRepositoryState(repositoryState.filter(v => v.name !== val.name));
    }, [repositoryState])

    return (
        <div className="w-full max-w-2xl mx-auto p-6 space-y-12">
            <form className="flex items-center space-x-4" onSubmit={handleSubmit(submit)}>
                <input className="flex-grow p-3 border border-black/20 rounded-xl" placeholder="Add Git repository" type="text" {...register('name', {required: 'true'})} />
                <button className="flex-shrink p-3 border border-black/20 rounded-xl" type="submit">
                    Add
                </button>
            </form>
            <div className="divide-y-2 divide-gray-300">
                {repositoryState.map(val => (
                    <div key={val.name} className="space-y-4">
                        <div className="flex justify-between items-center py-10">
                            <h2 className="text-xl font-bold">{val.name}</h2>
                            <button className="p-3 border border-black/20 rounded-xl bg-red-400" onClick={deleteFromList(val)}>Delete</button>
                        </div>
                        <div className="bg-white rounded-lg border p-10">
                            <div className="h-[300px]]">
                                <ChartComponent repository={val.list} />
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}

You can see that we use nextjs/dynamic to lazy load the component.

I hope in the future, NextJS will add something like "use lazy-load" for the client components 😺

But what about new stars? Meet Trigger.Dev!

The best way to add the new stars every day would be to run a cron request to check for the newly added stars and add them to our database.

Instead of using Vercel cron / GitHub actions or, god forbid, creating a new server for that.

We can use Trigger.DEV will work directly with our NextJS app.

So let’s set it up!

Once registered, create an organization and choose a project name for your job.

Select Next.js as your framework and follow the process for adding Trigger.dev to an existing Next.js project.

Otherwise, click Environments & API Keys on the sidebar menu of your project dashboard.

Copy your DEV server API key and run the code snippet below to install Trigger.dev.

Follow the instructions carefully.

npx @trigger.dev/cli@latest init

Run the following code snippet in another terminal to establish a tunnel between Trigger.dev and your Next.js project.

npx @trigger.dev/cli@latest dev

Let's create our TriggerDev job!

You will see a newly created folder called jobs.
Create a new file there called sync.stars.ts

Add the following code:

import { cronTrigger, invokeTrigger } from "@trigger.dev/sdk";
import { client } from "@/trigger";
import { prisma } from "../../helper/prisma";
import axios from "axios";
import { z } from "zod";

// Your first job
// This Job will be triggered by an event, log a joke to the console, and then wait 5 seconds before logging the punchline.
client.defineJob({
  id: "sync-stars",
  name: "Sync Stars Daily",
  version: "0.0.1",
  // Run a cron every day at 23:00 AM
  trigger: cronTrigger({
    cron: "0 23 * * *",
  }),
  run: async (payload, io, ctx) => {
    const repos = await io.runTask("get-stars", async () => {
      // get all libraries and current amount of stars
      return await prisma.repository.groupBy({
        by: ["name"],
        _sum: {
          stars: true,
        },
      });
    });

    //loop through all repos and invoke the Job that gets the latest stars
    for (const repo of repos) {
      getStars.invoke(repo.name, {
        name: repo.name,
        previousStarCount: repo?._sum?.stars || 0,
      });
    }
  },
});

const getStars = client.defineJob({
  id: "get-latest-stars",
  name: "Get latest stars",
  version: "0.0.1",
  // Run a cron every day at 23:00 AM
  trigger: invokeTrigger({
    schema: z.object({
      name: z.string(),
      previousStarCount: z.number(),
    }),
  }),
  run: async (payload, io, ctx) => {
    const stargazers_count = await io.runTask("get-stars", async () => {
      const { data } = await axios.get(
          `https://api.github.com/repos/${payload.name}`,
          {
            headers: {
              authorization: `token ${process.env.TOKEN}`,
            },
          }
      );
      return data.stargazers_count as number;
    });

    await prisma.repository.upsert({
      where: {
        name_day_month_year: {
          name: payload.name,
          month: new Date().getMonth() + 1,
          year: new Date().getFullYear(),
          day: new Date().getDate(),
        },
      },
      update: {
          stars: stargazers_count - payload.previousStarCount,
      },
      create: {
        name: payload.name,
        stars: stargazers_count - payload.previousStarCount,
        month: new Date().getMonth() + 1,
        year: new Date().getFullYear(),
        day: new Date().getDate(),
      },
    });
  },
});

We created a new job called “Sync Stars Daily” that will run every day at 23:00pm - The representation of it in the cron text is: 0 23 * * *

We get all our current repositories in our database, group them by their name, and sum the stars.

Since everything runs on Vercel serverless, we might get to a timeout going over all the repositories.

For that, we send each repository to a different job.

We use the invoke to create new jobs and then process them inside Get latest stars

We iterate over all the new repositories and get the current number of stars.

We remove the new number of stars by the old number of stars to get the today amount of stars.

We added it to the database with prisma. there is no simpler than that!

The last thing is to edit jobs/index.ts and replace the content with this:

export * from "./sync.stars";

And you are done 🥳

Let's connect! 🔌

The source for this tutorial is available here:

https://github.com/triggerdotdev/blog/tree/main/stars-monitor

Thank you for reading!

🚀Creating a resume builder with NextJS, Trigger.dev and GPT4🔥✨

Eric Allam — Wed, 08 Nov 2023 12:07:21 +0000

TL;DR

In this article, you will learn how to create a resume builder using NextJS, Trigger.dev, Resend, and OpenAI. 😲

Add basic details such as First name, last name, and last places of work.
Generate details such as Profile Summary, Work History, and Job Responsibilities.
Create a PDF that contains all the information.
Send everything to your email

Your background job platform 🔌

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more!

Please help us with a star 🥹.
It would help us to create more articles like this 💖

Star the Trigger.dev repository ⭐️

Let's set it up 🔥

Set up a new project with NextJS



npx create-next-app@latest

We are going to create a simple form with basic information such as:

First name
Last name
Email address
Your profile picture
And the experience you have until today!

We are going to work with NextJS's new app router.
Open layout.tsx and add the following code



import { GeistSans } from "geist/font";
import "./globals.css";

const defaultUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "http://localhost:3000";

export const metadata = {
  metadataBase: new URL(defaultUrl),
  title: "Resume Builder with GPT4",
  description: "The fastest way to build a resume with GPT4",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={GeistSans.className}>
      <body className="bg-background text-foreground">
        <main className="min-h-screen flex flex-col items-center">
          {children}
        </main>
      </body>
    </html>
  );
}

We are basically setting the layout for all the pages (even though we have only one page.)
We set the basic page metadata, background, and global CSS elements.

Next, let's open our page.tsx and add the following code:



    <div className="flex-1 w-full flex flex-col items-center">
      <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
        <div className="w-full max-w-6xl flex justify-between items-center p-3 text-sm">
          <span className="font-bold select-none">resumeGPT.</span>
        </div>
      </nav>

      <div className="animate-in flex-1 flex flex-col opacity-0 max-w-6xl px-3">
        <Home />
      </div>
    </div>

This sets the headline of our resumeGPT and the main home components.

The easiest way to build forms

The easiest way to save the form information and validate our fields is to use react-hook-form.

We are going to upload a profile picture.
For that, we can't use JSON-based requests.
We will need to convert the JSON into a valid form-data.

So let's install them all!



npm install react-hook-form object-to-formdata axios --save

Create a new folder called components add a new file called Home.tsx, and add the following code:



"use client";

import React, { useState } from "react";
import {FormProvider, useForm} from "react-hook-form";
import Companies from "@/components/Companies";
import axios from "axios";
import {serialize} from "object-to-formdata";

export type TUserDetails = {
  firstName: string;
  lastName: string;
  photo: string;
  email: string;
  companies: TCompany[];
};

export type TCompany = {
  companyName: string;
  position: string;
  workedYears: string;
  technologies: string;
};

const Home = () => {
  const [finished, setFinished] = useState<boolean>(false);
  const methods = useForm<TUserDetails>()

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = methods;

  const handleFormSubmit = async (values: TUserDetails) => {
    axios.post('/api/create', serialize(values));
    setFinished(true);
  };

  if (finished) {
    return (
        <div className="mt-10">Sent to the queue! Check your email</div>
    )
  }

  return (
    <div className="flex flex-col items-center justify-center p-7">
      <div className="w-full py-3 bg-slate-500 items-center justify-center flex flex-col rounded-t-lg text-white">
        <h1 className="font-bold text-white text-3xl">Resume Builder</h1>
        <p className="text-gray-300">
          Generate a resume with GPT in seconds 🚀
        </p>
      </div>
      <FormProvider {...methods}>
        <form
          onSubmit={handleSubmit(handleFormSubmit)}
          className="p-4 w-full flex flex-col"
        >
          <div className="flex flex-col lg:flex-row gap-4">
            <div className="flex flex-col w-full">
              <label htmlFor="firstName">First name</label>
              <input
                type="text"
                required
                id="firstName"
                placeholder="e.g. John"
                className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent"
                {...register('firstName')}
              />
            </div>
            <div className="flex flex-col w-full">
              <label htmlFor="lastName">Last name</label>
              <input
                type="text"
                required
                id="lastName"
                placeholder="e.g. Doe"
                className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent"
                {...register('lastName')}
              />
            </div>
          </div>
          <hr className="w-full h-1 mt-3" />
          <label htmlFor="email">Email Address</label>
          <input
            type="email"
            required
            id="email"
            placeholder="e.g. john.doe@gmail.com"
            className="p-3 rounded-md outline-none border border-gray-500 text-white bg-transparent"
            {...register('email', {required: true, pattern: /^\S+@\S+$/i})}
          />
          <hr className="w-full h-1 mt-3" />
          <label htmlFor="photo">Upload your image 😎</label>
          <input
            type="file"
            id="photo"
            accept="image/x-png"
            className="p-3 rounded-md outline-none border border-gray-500 mb-3"
            {...register('photo', {required: true})}
          />
          <Companies />
          <button className="p-4 pointer outline-none bg-blue-500 border-none text-white text-base font-semibold rounded-lg">
            CREATE RESUME
          </button>
        </form>
      </FormProvider>
    </div>
  );
};

export default Home;

You can see that we start with "use client" which basically tells our component that it should run on the client only.

Why do we want client only?
React states (input changes) are available only on the client side.

We set two interfaces, TUserDetails and TCompany. They represent the structure of the data we are working with.

We use useForm with react-hook-form. It creates a local state management to our inputs and allows us to update and validate our fields easily. you can see that in every input, there is a simple register function that specific the input name and validation and registers it to the managed state.

This is cool as we don't need to play with things like onChange

You can also see that we use FormProvider, that's important as we want to have the Context of react-hook-form in children components.

We also have a method called handleFormSubmit. That's the method that is called once we submit the form. You can see that we use the serialize function to convert our javascript object to FormData and send a request to the server to initiate the job with axios.

And you can see another component called Companies. That component will let us specify all the companies we worked for.

So let's work on it.
Create a new file called Companies.tsx
And add the following code:



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

import { TCompany } from "./Home";
import {useFieldArray, useFormContext} from "react-hook-form";

const Companies = () => {
  const {control, register} = We();
  const {fields: companies, append} = useFieldArray({
    control,
    name: "companies",
  });

  const addCompany = useCallback(() => {
    append({
      companyName: '',
      position: '',
      workedYears: '',
      technologies: ''
    })
  }, [companies]);


useEffect(() => {
    addCompany();
  }, []);

  return (
    <div className="mb-4">
      {companies.length > 1 ? (
        <h3 className="font-bold text-white text-3xl my-3">
          Your list of Companies:
        </h3>
      ) : null}
      {companies.length > 1 &&
        companies.slice(1).map((company, index) => (
          <div
            key={index}
            className="mb-4 p-4 border bg-gray-800 rounded-lg shadow-md"
          >
            <div className="mb-2">
              <label htmlFor={`companyName-${index}`} className="text-white">
                Company Name
              </label>
              <input
                type="text"
                id={`companyName-${index}`}
                className="p-2 border border-gray-300 rounded-md w-full bg-transparent"
                {...register(`companies.${index}.companyName`, {required: true})}
              />
            </div>

            <div className="mb-2">
              <label htmlFor={`position-${index}`} className="text-white">
                Position
              </label>
              <input
                type="text"
                id={`position-${index}`}
                className="p-2 border border-gray-300 rounded-md w-full bg-transparent"
                {...register(`companies.${index}.position`, {required: true})}
              />
            </div>

            <div className="mb-2">
              <label htmlFor={`workedYears-${index}`} className="text-white">
                Worked Years
              </label>
              <input
                  type="number"
                  id={`workedYears-${index}`}
                  className="p-2 border border-gray-300 rounded-md w-full bg-transparent"
                  {...register(`companies.${index}.workedYears`, {required: true})}
              />
            </div>
            <div className="mb-2">
              <label htmlFor={`workedYears-${index}`} className="text-white">
                Technologies
              </label>
              <input
                  type="text"
                  id={`technologies-${index}`}
                  className="p-2 border border-gray-300 rounded-md w-full bg-transparent"
                  {...register(`companies.${index}.technologies`, {required: true})}
              />
            </div>
          </div>
        ))}
        <button type="button" onClick={addCompany} className="mb-4 p-2 pointer outline-none bg-blue-900 w-full border-none text-white text-base font-semibold rounded-lg">
          Add Company
        </button>
    </div>
  );
};

export default Companies;

We start with useFormContext, which allows us to get the context of the parent component.

Next, we use useFieldArray to create a new state called companies. It is an array for all the companies that we have.

In the useEffect, we add the first item of the array to iterate over it.

When clicking on addCompany, it will push another element to the array.

We have finished with the client 🥳

Parse the HTTP request

Remember that we send a POST request to /api/create?
Let's go to our app/api folder and create a new folder called create inside that folder, create a new file called route.tsx and paste the following code:



import {NextRequest, NextResponse} from "next/server";
import {client} from "@/trigger";

export async function POST(req: NextRequest) {
    const data = await req.formData();
    const allArr = {
        name: data.getAll('companies[][companyName]'),
        position: data.getAll('companies[][position]'),
        workedYears: data.getAll('companies[][workedYears]'),
        technologies: data.getAll('companies[][technologies]'),
    };

    const payload = {
        firstName: data.get('firstName'),
        lastName: data.get('lastName'),
        photo: Buffer.from((await (data.get('photo[0]') as File).arrayBuffer())).toString('base64'),
        email: data.get('email'),
        companies: allArr.name.map((name, index) => ({
            companyName: allArr.name[index],
            position: allArr.position[index],
            workedYears: allArr.workedYears[index],
            technologies: allArr.technologies[index],
        })).filter((company) => company.companyName && company.position && company.workedYears && company.technologies)
    }

    await client.sendEvent({
        name: 'create.resume',
        payload
    });

    return NextResponse.json({ })
}

This code will run only with NodeJS version 20+. If you have a lower version, it will not be able to parse FormData.

That code is pretty simple.

We parse the request as FormData using req.formData
We convert the FormData-based request into a JSON file.
We extract the image and convert it to base64
We send everything to TriggerDev

Build the resume and send it to your email 📨

Building the resume is a long-running task we need to

Use ChatGPT to generate the content.
Create a PDF
Send it to your email

We don't want to make a long-running HTTP request to make all of those for a few reasons.

When deploying to Vercel, there is a limit of 10 seconds on serverless functions. We will never make it on time.
We want to keep the user from hanging for a long time. It's a bad UX. If the user closes the window, the entire process will fail.

Introducing Trigger.dev!

With Trigger.dev, you can run background processes inside of your NextJS app! You don't need to create a new server.
They also know how to handle long-running jobs by breaking them into short tasks seamlessly.

Select Next.js as your framework and follow the process for adding Trigger.dev to an existing Next.js project.

Otherwise, click Environments & API Keys on the sidebar menu of your project dashboard.

Copy your DEV server API key and run the code snippet below to install Trigger.dev. Follow the instructions carefully.



npx @trigger.dev/cli@latest init

In another terminal, run the following code snippet to establish a tunnel between Trigger.dev and your Next.js project.



npx @trigger.dev/cli@latest dev

Let's create our TriggerDev job!
Head over to the newly created folder jobs and create a new file called create.resume.ts.

Add the following code:



client.defineJob({
  id: "create-resume",
  name: "Create Resume",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "create.resume",
    schema: z.object({
      firstName: z.string(),
      lastName: z.string(),
      photo: z.string(),
      email: z.string().email(),
      companies: z.array(z.object({
        companyName: z.string(),
        position: z.string(),
        workedYears: z.string(),
        technologies: z.string()
      }))
    }),
  }),
  run: async (payload, io, ctx) => {
  }
});

This will create a new job for us called create-resume.
As you can see, there is a schema validation of the request we previously sent from our route.tsx. That will give us validation and also auto-completion.

We are going to run three jobs here

ChatGPT
Pdf creation
Email sending

Let's start with ChatGPT.

Create an OpenAI account and generate an API Key.

Click View API key from the dropdown to create an API Key.

Next, install the OpenAI package by running the code snippet below.



npm install @trigger.dev/openai

Add your OpenAI API key to the .env.local file.



OPENAI_API_KEY=<your_api_key>

Create a new folder in the root directory called utils.
inside that directory, create a new file called openai.ts
Add the following code:



import { OpenAI } from "openai";

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY!,
});

export async function generateResumeText(prompt: string) {
  const response = await openai.completions.create({
    model: "text-davinci-003",
    prompt,
    max_tokens: 250,
    temperature: 0.7,
    top_p: 1,
    frequency_penalty: 1,
    presence_penalty: 1,
  });

  return response.choices[0].text.trim();
}

export const prompts = {
  profileSummary: (fullName: string, currentPosition: string, workingExperience: string, knownTechnologies: string) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). \n I write in the technologies: ${knownTechnologies}. Can you write a 100 words description for the top of the resume(first person writing)?`,
  jobResponsibilities: (fullName: string, currentPosition: string, workingExperience: string, knownTechnologies: string) =>  `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). \n I write in the technolegies: ${knownTechnologies}. Can you write 3 points for a resume on what I am good at?`,
  workHistory: (fullName: string, currentPosition: string, workingExperience: string, details: TCompany[]) => `I am writing a resume, my details are \n name: ${fullName} \n role: ${currentPosition} (${workingExperience} years). ${companyDetails(details)} \n Can you write me 50 words for each company seperated in numbers of my succession in the company (in first person)?`,
};

This code basically created the infrastructure to use ChatGPT and also 3 functions, profileSummary, workingExperience, and workHistory. We will use them to create the content for the sections.

Go back to our create.resume.ts and add the new job:



import { client } from "@/trigger";
import { eventTrigger } from "@trigger.dev/sdk";
import { z } from "zod";
import { prompts } from "@/utils/openai";
import { TCompany, TUserDetails } from "@/components/Home";

const companyDetails = (companies: TCompany[]) => {
  let stringText = "";
  for (let i = 1; i < companies.length; i++) {
    stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`;
  }
  return stringText;
};

client.defineJob({
  id: "create-resume",
  name: "Create Resume",
  version: "0.0.1",
  integrations: {
      resend
  },
  trigger: eventTrigger({
    name: "create.resume",
    schema: z.object({
      firstName: z.string(),
      lastName: z.string(),
      photo: z.string(),
      email: z.string().email(),
      companies: z.array(z.object({
        companyName: z.string(),
        position: z.string(),
        workedYears: z.string(),
        technologies: z.string()
      }))
    }),
  }),
  run: async (payload, io, ctx) => {

    const texts = await io.runTask("openai-task", async () => {
      return Promise.all([
          await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)),
          await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)),
          await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies))
      ]);
    });
  },
});

We created a new task called openai-task.
Inside that task, we simultaneously run three prompts with ChatGPT, and return them.

Creating the PDF

There are many ways to create a PDF

You can use things like HTML2CANVAS and convert HTML code into an image and then a PDF.
You can use things like puppeteer to scrape a web page and convert it to a PDF.
You can use different libraries that can create PDFs on the backend side.

In our case, we are going to use a simple library called jsPdf it's very simplistic library to create PDF over the backend. I encourage you to create some more robust PDF files with Puppeteer and more HTML.

So let's install it



npm install jspdf @typs/jspdf --save

Let's return to utils and create a new file called resume.ts. That file will basically create a PDF file that we can send to the user's email.

Add the following content:



import {TUserDetails} from "@/components/Home";
import {jsPDF} from "jspdf";

type ResumeProps = {
  userDetails: TUserDetails;
  picture: string;
  profileSummary: string;
  workHistory: string;
  jobResponsibilities: string;
};

export function createResume({ userDetails, picture, workHistory, jobResponsibilities, profileSummary }: ResumeProps) {
    const doc = new jsPDF();

    // Title block
    doc.setFontSize(24);
    doc.setFont('helvetica', 'bold');

    doc.text(userDetails.firstName + ' ' + userDetails.lastName, 45, 27);
    doc.setLineWidth(0.5);
    doc.rect(20, 15, 170, 20); // x, y, width, height
    doc.addImage({
        imageData: picture,
        x: 25,
        y: 17,
        width: 15,
        height: 15
    });

    // Reset font for the rest
    doc.setFontSize(12);
    doc.setFont('helvetica', 'normal');

    // Personal Information block
    doc.setFontSize(14);
    doc.setFont('helvetica', 'bold');
    doc.text('Summary', 20, 50);
    doc.setFontSize(10);
    doc.setFont('helvetica', 'normal');
    const splitText = doc.splitTextToSize(profileSummary, 170);
    doc.text(splitText, 20, 60);

    const newY = splitText.length * 5;

    // Work history block
    doc.setFontSize(14);
    doc.setFont('helvetica', 'bold');
    doc.text('Work History', 20, newY + 65);
    doc.setFontSize(10);
    doc.setFont('helvetica', 'normal');
    const splitWork = doc.splitTextToSize(workHistory, 170);
    doc.text(splitWork, 20, newY + 75);

    const newNewY = splitWork.length * 5;

    // Job Responsibilities block
    doc.setFontSize(14);
    doc.setFont('helvetica', 'bold');
    doc.text('Job Responsibilities', 20, newY + newNewY + 75);
    doc.setFontSize(10);
    doc.setFont('helvetica', 'normal');
    const splitJob = doc.splitTextToSize(jobResponsibilities, 170);
    doc.text(splitJob, 20, newY + newNewY + 85);

    return doc.output("datauristring");
}

This file contains three sections: Personal Information, Work history, and Job Responsibilities block.

We calculate where each block will be and what it will be.

Everything is set up in an absolute way.
A notable thing is the splitTextToSize to break the text into multiple lines, so it will not go off the screen.

Now, let's create the next task: open resume.ts again and add the following code:



import { client } from "@/trigger";
import { eventTrigger } from "@trigger.dev/sdk";
import { z } from "zod";
import { prompts } from "@/utils/openai";
import { TCompany, TUserDetails } from "@/components/Home";
import { createResume } from "@/utils/resume";

const companyDetails = (companies: TCompany[]) => {
  let stringText = "";
  for (let i = 1; i < companies.length; i++) {
    stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`;
  }
  return stringText;
};

client.defineJob({
  id: "create-resume",
  name: "Create Resume",
  version: "0.0.1",
  integrations: {
      resend
  },
  trigger: eventTrigger({
    name: "create.resume",
    schema: z.object({
      firstName: z.string(),
      lastName: z.string(),
      photo: z.string(),
      email: z.string().email(),
      companies: z.array(z.object({
        companyName: z.string(),
        position: z.string(),
        workedYears: z.string(),
        technologies: z.string()
      }))
    }),
  }),
  run: async (payload, io, ctx) => {

    const texts = await io.runTask("openai-task", async () => {
      return Promise.all([
          await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)),
          await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)),
          await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies))
      ]);
    });

    console.log('passed chatgpt');

    const pdf = await io.runTask('convert-to-html', async () => {
        const resume = createResume({
            userDetails: payload,
            picture: payload.photo,
            profileSummary: texts[0],
            jobResponsibilities: texts[1],
            workHistory: texts[2],
        });

        return {final: resume.split(',')[1]}
    });

    console.log('converted to pdf');
  },
});

You can see we have added a new task called convert-to-html. This will create the PDF for us, convert it to base64 and return it.

Let them know 🎤

We are reaching the end!
The only thing left is to share it with the user.
You can use any email service you want.
We will use Resend.com

Visit the Signup page, create an account and an API Key, and save it into the .env.local file.



RESEND_API_KEY=<place_your_API_key>

Install the Trigger.dev Resend integration package to your Next.js project.



npm install @trigger.dev/resend

All that is left to do is to add our last job!
Fortunately, Trigger directly integrates with Resend, so we don't need to create a new "normal" task.

Here is the final code:



import { client } from "@/trigger";
import { eventTrigger } from "@trigger.dev/sdk";
import { z } from "zod";
import { prompt } from "@/utils/openai";
import { TCompany, TUserDetails } from "@/components/Home";
import { createResume } from "@/utils/resume";
import { Resend } from "@trigger.dev/resend";

const resend = new Resend({
    id: "resend",
    apiKey: process.env.RESEND_API_KEY!,
});

const companyDetails = (companies: TCompany[]) => {
  let stringText = "";
  for (let i = 1; i < companies.length; i++) {
    stringText += ` ${companies[i].companyName} as a ${companies[i].position} on technologies ${companies[i].technologies} for ${companies[i].workedYears} years.`;
  }
  return stringText;
};

client.defineJob({
  id: "create-resume",
  name: "Create Resume",
  version: "0.0.1",
  integrations: {
      resend
  },
  trigger: eventTrigger({
    name: "create.resume",
    schema: z.object({
      firstName: z.string(),
      lastName: z.string(),
      photo: z.string(),
      email: z.string().email(),
      companies: z.array(z.object({
        companyName: z.string(),
        position: z.string(),
        workedYears: z.string(),
        technologies: z.string()
      }))
    }),
  }),
  run: async (payload, io, ctx) => {

    const texts = await io.runTask("openai-task", async () => {
      return Promise.all([
          await generateResumeText(prompts.profileSummary(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)),
          await generateResumeText(prompts.jobResponsibilities(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies[0].technologies)),
          await generateResumeText(prompts.workHistory(payload.firstName, payload.companies[0].position, payload.companies[0].workedYears, payload.companies))
      ]);
    });

    console.log('passed chatgpt');

    const pdf = await io.runTask('convert-to-html', async () => {
        const resume = createResume({
            userDetails: payload,
            picture: payload.photo,
            profileSummary: texts[0],
            jobResponsibilities: texts[1],
            workHistory: texts[2],
        });

        return {final: resume.split(',')[1]}
    });

    console.log('converted to pdf');

    await io.resend.sendEmail('send-email', {
        to: payload.email,
        subject: 'Resume',
        html: 'Your resume is attached!',
        attachments: [
            {
                filename: 'resume.pdf',
                content: Buffer.from(pdf.final, 'base64'),
                contentType: 'application/pdf',
            }
        ],
        from: "Nevo David <nevo@gitup.dev>",
    });

    console.log('Sent email');
  },
});

We have the Resend instance at the top of our file loaded with our API key from the dashboard.

We have the



  integrations: {
      resend
  },

We added it to our job to use later inside of io.
And finally, we have our job to send the PDF io.resend.sendEmail

A notable thing is the attachment inside it with the PDF file we generated in the previous step.

And we are done 🎉

You can check and run the full source code here:
https://github.com/triggerdotdev/blog

Let's connect! 🔌

The source for this tutorial is available here:
https://github.com/triggerdotdev/blog/tree/main/blog-resume-builder

Thank you for reading!

🎉 17 Javascript repositories to become the best developer in the world 🌍

Eric Allam — Tue, 24 Oct 2023 12:23:36 +0000

Become a better developer

I've curated a list of 17 GitHub repositories you should know as a JavaScript developer. 🎉

These repositories span various parts of software and web development.

Feel free to explore their GitHub repositories, contribute to your favorites, and support them by starring the repositories.

1. Trigger.dev 👑

✅ Create and manage long-running jobs within your applications.

Trigger.dev is an open-source library that enables you to create and monitor long-running tasks in serverless environments. You can use Trigger.dev in frameworks like Next.js, Remix, Astro, Nest.js, Nuxt, and many others.

It also offers three communication methods: webhook, schedule, and event.

Schedule is ideal for recurring tasks.
Event triggers a job upon receiving a payload.
Webhook triggers jobs when specific events occur.

The best part is that Trigger.dev allows you to integrate various services and perform specific events or automation when these events occur.

Give Trigger.dev a ⭐️ on GitHub

2. Chart.js

✅ Create dynamic JavaScript charts easily.

Chart.js is a popular JavaScript library for creating interactive and visually appealing charts and graphs. With Chart.js, you can create various charts, including line charts, bar charts, radar charts, doughnut charts, and more.

It is highly customizable and responsive and provides a simple API to create interactive and animated charts.

Give Chart.js a ⭐️ on GitHub

3. React Flow

✅ Add feature-rich, interactive diagrams to your React applications.

React Flow is a JavaScript library for building interactive node-based graphs and diagrams in React applications.

It provides a set of React components that enables you to create visual representations of workflows, mind maps, process diagrams, and other graph-based structures.

Its features include:

Drag and drop nodes around the screen.
Highly customizable to support custom node and edge types.
Built-in plugins and components to handle various actions effectively.

Give React Flow a ⭐️ on GitHub

4. Monaco Editor for React

✅ Fully featured browser-based code editor.

Monaco Editor is an open-source code editor built from VS Code. It is fast, lightweight, and can be used as a standalone web-based code editor or integrated into other applications.

The Monaco Editor for React allows you to add a fully responsive and customizable code editor to your web applications. It provides intelligent features such as syntax highlighting, autocompletion, error checking, etc.

Give Monaco Editor for React a ⭐️ on GitHub

5. Novu

✅ Manage all your notifications from one place.

Novu is the first open-source notification infrastructure for developers. It allows you to manage and monitor all forms of communication, such as Email, SMS, Direct, and Push, from a single dashboard.

With Novu, you connect to various communication providers and create templates and rules that control your notifications.

Its features include:

Unified API for notificaitons across multiple programming languages.
Prebuilt in-app notification components.
Integration with various communication providers.

Give Novu a ⭐️ on GitHub

6. NX

✅ Smart, fast, and extensible build system for your projects.

NX is a next-generation build system that keeps your CI fast and makes your workspace easy to maintain. NX scales your project using modern techniques, such as distributed task execution and computation caching.

Its features include:

Monorepo architecture
Remote caching
Automated and dynamic distribution of tasks across multiple machines.
Fast CI and smart to never rebuild the same code twice.

Give NX a ⭐️ on GitHub

7. ClickVote

✅ Seamlessly integrate like, upvote, and review components to your application.

Clickvote is an open-source library for adding like and upvote components easily to any website, SPA, or no-code tool. It simplifies the process of creating reaction components without writing any complex code.

Its features include:

Pre-built components for likes, ratings, stars, and feedback.
Supports various frameworks, including React, Vue, Svelte, HTML, etc.
Instant analytics about users.

Give ClickVote a ⭐️ on GitHub

8. Mantine

✅ Stunning UI components for your React applications.

Mantine is a popular open-source React component library for building modern web applications. It provides a set of accessible and customizable components that enable you to create responsive and stunning user interfaces.

Its features include:

Highly customizable components for building modern applications.
Built-in hooks to simplify common frontend tasks.
Dark mode and TypeScript support.

Give Mantine a ⭐️ on GitHub

9. Styled Components

✅ Write CSS code within JavaScript.

Styled Components is a popular library for styling your React applications. It allows you to write CSS code within JavaScript by creating custom components with scoped styles.

In Styled Components, styles are contained within the components, ensuring a clear and maintainable code structure.

Its features include:

Painless maintenance and debugging.
Component-based styling
No class name bugs

Give Styled Components a ⭐️ on GitHub

10. Supabase

✅ The open-source Firebase Alternative.

Supabase is an open-source Firebase alternative that enables you to add authentication, file storage, Postgres, and real-time database to your software applications.

With Supabase, you can build secured and scalable applications in a few minutes.

Its features include:

Real-time data synchronization.
Serverless functions and interaction via RESTful API.
Provides authentication, security, and scalability for your applications.

Give Supabase a ⭐️ on GitHub

11. TanStack Query

✅ Asynchronous state management for TS/JS, React, Solid, Vue, and Svelte.

TanStack Query is a powerful data-fetching and state management library that simplifies the process of fetching, caching, synchronizing, and updating data within your software applications.

With TanStack Query, you can manage memory and garbage collection of server state, update data in the background, cache data, and many more.

Its features include:

Automatic caching
Pagination and infinite loading
Powerful developer tools for inspecting queries.
Support for TS/JS, React, Solid, Vue and Svelte

Give TanStack Query a ⭐️ on GitHub

12. Axios

✅ A simple way to perform HTTP requests.

Axios is a popular JavaScript library for making HTTP requests in web browsers and Node.js environments.

It provides a simple and consistent way to handle asynchronous HTTP tasks, simplifying the process of sending and receiving data from web services and APIs.

Its features include:

Built on top of the Promise API.
Automatic JSON data transformation.
Browser and Node.js support.
Interceptors

Give Axios a ⭐️ on GitHub

13. Swiper

✅ Create modern carousels and touch sliders.

Swiper is a modern and mobile-friendly JavaScript library for building touch-enabled carousels and sliders in web applications.

It provides a simple, powerful, and customizable API for creating responsive and interactive slideshows, image galleries, and content carousels that work smoothly on desktop and mobile devices.

Its features include:

Fully responsive to all screen sizes.
Supports touch and drag events
Rich transition effects.

Give Swiper a ⭐️ on GitHub

14. Chance

✅ Random generator helper for JavaScript.

Chance is an open-source software that enables you to generate random data for various purposes, such as testing, simulations, and data visualization.

It can generate random numbers, strings, names, phone numbers, addresses, emails, etc. You can use it to simulate different scenarios, mock data, and test your application's ability to handle diverse input.

Give Chance a ⭐️ on GitHub

15. Day.js

✅ Best alternative to Moment.js.

Day.js is a minimalistic JavaScript library for handling various date and time operations.

If you use Moment.js, you already know how to use Day.js. Unlike Moment.js, Day.js is lightweight (2KB), making it a popular choice among developers.

Its features include:

Ensuring data consistency by using immutable objects.
Chainable API that simplifies complex date manipulations and enhances code readability.
Highly customizable and extensible with plugins.

MomentJS is not maintainable anymore, it's super important to move to Dayjs

Give Day.js a ⭐️ on GitHub

16. FullCalendar

✅ Fully interactive calendar for your JavaScript applications.

FullCalendar is a popular JavaScript library for creating interactive and customizable calendar interfaces in web applications.

It provides a robust set of features for displaying events. It supports multiple calendar views, including month, week, day, and agenda views, making it suitable for building applications involving time-based data.

Its features include:

Provides multiple views
Highly customizable and interactive.
Click event handling and drag-and-drop support.

Give Full Calendar a ⭐️ on GitHub

17. Zod

✅ Schema validation library

Zod is a TypeScript-first schema declaration and validation library. It enables you to define the data structure and schemas for any data type, including primitive data types, arrays, and objects, in a concise and type-safe manner.

With Zod, you can create complex data models, validate input data, and ensure type safety in your applications.

Give Zod a ⭐️ on GitHub

If you have any awesome suggestions that weren't covered in the article, don't hesitate to share them in the comment section below.

Thank you for reading!🎉

🚀 Turn your face into a super-hero with NextJS, Replicate, and Trigger.dev 🦸🏻‍♂️

Eric Allam — Tue, 17 Oct 2023 12:51:59 +0000

TL;DR

This tutorial is super fun!
You'll learn how to build a web application that allows users to generate AI images of themselves based on the prompt provided.

Before we start, head over to:

https://avatar-generator-psi.vercel.app
Generate a new avatar and post it in the comments!
(To find good prompts check https://lexica.art)

In this tutorial, you will learn the following:

Upload images seamlessly in Next.js,
Generate stunning AI images with Replicate, and swap their faces with your face!
Send emails via Resend in Trigger.dev.

Your background job management for NextJS

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more!

If you can spend 10 seconds giving us a star, I would be super grateful 💖
https://github.com/triggerdotdev/trigger.dev

Set up the Wizard 🧙‍♂️

The application consists of two pages: the Home page that accepts users' email, image, gender, and a specific prompt if necessary, and the Success page that informs users that the image is being generated and will be sent to their email once it's ready.

The best part? All these tasks are handled seamlessly by Trigger.dev.🤩

Run the code snippet below within your terminal to create a Typescript Next.js project.



npx create-next-app image-generator

Main page 🏠

Update the index.tsx file to display a form that enables users to enter their email address and gender, an optional custom prompt, and upload a picture of themselves.



"use client";
import Head from "next/head";
import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";

export default function Home() {
    const [selectedFile, setSelectedFile] = useState<File>();
    const [userPrompt, setUserPrompt] = useState<string>("");
    const [email, setEmail] = useState<string>("");
    const [gender, setGender] = useState<string>("");
    const router = useRouter();

    const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        console.log({ selectedFile, userPrompt, email, gender });
        router.push("/success");
    };

    return (
        <main className='flex items-center md:p-8 px-4 w-full justify-center min-h-screen flex-col'>
            <Head>
                <title>Avatar Generator</title>
            </Head>
            <header className='mb-8 w-full flex flex-col items-center justify-center'>
                <h1 className='font-bold text-4xl'>Avatar Generator</h1>
                <p className='opacity-60'>
                    Upload a picture of yourself and generate your avatar
                </p>
            </header>

            <form
                method='POST'
                className='flex flex-col md:w-[60%] w-full'
                onSubmit={(e) => handleSubmit(e)}
            >
                <label htmlFor='email'>Email Address</label>
                <input
                    type='email'
                    required
                    className='px-4 py-2 border-[1px] mb-3'
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />

                <label htmlFor='gender'>Gender</label>
                <select
                    className='border-[1px] py-3 px-4 mb-4 rounded'
                    name='gender'
                    id='gender'
                    value={gender}
                    onChange={(e) => setGender(e.target.value)}
                    required
                >
                    <option value=''>Select</option>
                    <option value='male'>Male</option>
                    <option value='female'>Female</option>
                </select>

                <label htmlFor='image'>Upload your picture</label>
                <input
                    name='image'
                    type='file'
                    className='border-[1px] py-2 px-4 rounded-md mb-3'
                    accept='.png, .jpg, .jpeg'
                    required
                    onChange={({ target }) => {
                        if (target.files) {
                            const file = target.files[0];
                            setSelectedFile(file);
                        }
                    }}
                />
                <label htmlFor='prompt'>
                    Add custom prompt for your avatar
                    <span className='opacity-60'>(optional)</span>
                </label>
                <textarea
                    rows={4}
                    className='w-full border-[1px] p-3'
                    name='prompt'
                    id='prompt'
                    value={userPrompt}
                    placeholder='Copy image prompts from https://lexica.art'
                    onChange={(e) => setUserPrompt(e.target.value)}
                />
                <button
                    type='submit'
                    className='px-6 py-4 mt-5 bg-blue-500 text-lg hover:bg-blue-700 rounded text-white'
                >
                    Generate Avatar
                </button>
            </form>
        </main>
    );
}

The code snippet above displays the required input fields and a button that logs all the user inputs to the console.

The Success page ✅

After users submit the form on the home page, they are automatically redirected to the Success page. This page confirms the receipt of their request and informs them that they will receive the AI-generated image via email as soon as it is ready.

Create a success.tsx file and copy the code snippet into the file.



import Link from "next/link";
import Head from "next/head";

export default function Success() {
    return (
        <div className='min-h-screen w-full flex flex-col items-center justify-center'>
            <Head>
                <title>Success | Avatar Generator</title>
            </Head>
            <h2 className='font-bold text-3xl mb-2'>Thank you! 🌟</h2>
            <p className='mb-4 text-center'>
                Your image will be delivered to your email, once it is ready! 💫
            </p>
            <Link
                href='/'
                className='bg-blue-500 text-white px-4 py-3 rounded hover:bg-blue-600'
            >
                Generate another
            </Link>
        </div>
    );
}

Uploading images to a Next.js server

On the form, you need to allow users to upload images to the Next.js server and swap the face on the picture with an AI image.

To do this, I'll walk you through how to upload files in Next.js using Formidable - a Node.js module for parsing form data, especially file uploads.

Install Formidable to your Next.js project:



npm install formidable @types/formidable

Before we proceed, update the handleSubmit function to send the user's data to an endpoint on the server.



const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
        if (!selectedFile) return;
        const formData = new FormData();
        formData.append("image", selectedFile);
        formData.append("gender", gender);
        formData.append("email", email);
        formData.append("userPrompt", userPrompt);
        //👇🏻 post data to server's endpoint
        await fetch("/api/generate", {
            method: "POST",
            body: formData,
        });
        //👇🏻 redirect to Success page
        router.push("/success");
    } catch (err) {
        console.error({ err });
    }
};

Create the /api/generate endpoint on the server and disable the default Next.js body-parser, as shown below.



import type { NextApiRequest, NextApiResponse } from "next";

//👇🏻 disables the default Next.js body parser
export const config = {
    api: {
        bodyParser: false,
    },
};

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    res.status(200).json({ message: "Hello world" });
}

Add this code snippet directly below the config object to convert the image to base64 format.



//👇🏻 creates a writable stream that stores a chunk of data
const fileConsumer = (acc: any) => {
    const writable = new Writable({
        write: (chunk, _enc, next) => {
            acc.push(chunk);
            next();
        },
    });

    return writable;
};

const readFile = (req: NextApiRequest, saveLocally?: boolean) => {
    // @ts-ignore
    const chunks: any[] = [];
    //👇🏻 creates a formidable instance that uses the fileConsumer function
    const form = formidable({
        keepExtensions: true,
        fileWriteStreamHandler: () => fileConsumer(chunks),
    });

    return new Promise((resolve, reject) => {
        form.parse(req, (err, fields: any, files: any) => {
            //👇🏻 converts the image to base64
            const image = Buffer.concat(chunks).toString("base64");
            //👇🏻 logs the result
            console.log({
                    image,
                    email: fields.email[0],
                    gender: fields.gender[0],
                    userPrompt: fields.userPrompt[0],
            });

            if (err) reject(err);
            resolve({ fields, files });
        });
    });
};

From the code snippet above,
- The fileConsumer function creates a writable stream in Node.js for storing the chunk of data to be written.
- The readFile function creates a Formidable instance that uses the fileConsumer function as the custom fileWriteStreamHandler. The handler ensures that the image data is stored within the chunks array.
- It also returns the user’s image (base64 format), email, gender, and the custom prompt.

Finally, modify the handler function to execute readFile function.



export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  await readFile(req, true);

  res.status(200).json({ message: "Processing!" });
}

Congratulations!🎉 You've learnt how to upload images in base64 format in Next.js. In the upcoming section, I'll walk you through generating images with AI models on Replicate and sending them to your emails via Resend and Trigger.dev.

Managing long-running jobs with Trigger.dev 🏄‍♂️

Trigger.dev is an open-source library that offers three communication methods: webhook, schedule, and event. Schedule is ideal for recurring tasks, events activate a job upon sending a payload, and webhooks trigger real-time jobs when specific events occur.

Here, you'll learn how to create and trigger jobs within your Next.js project.

How to add Trigger.dev to a Next.js application

Select Next.js as your framework and follow the process for adding Trigger.dev to an existing Next.js project.

Otherwise, click Environments & API Keys on the sidebar menu of your project dashboard.

Copy your DEV server API key and run the code snippet below to install Trigger.dev. Follow the instructions carefully.



npx @trigger.dev/cli@latest init

Start your Next.js project.



npm run dev

In another terminal, run the following code snippet to establish a tunnel between Trigger.dev and your Next.js project.



npx @trigger.dev/cli@latest dev

Rename the jobs/examples.ts file to jobs/functions.ts. This is where all the jobs are processed.

Next, install Zod - a TypeScript-first type-checking and validation library that enables you to verify the data type of a job's payload.



npm install zod

In Trigger.dev, jobs can be triggered using the client.sendEvent() method. Therefore, modify the readFile function to trigger the newly created job and send the user's data as a payload to the job.



const readFile = (req: NextApiRequest, saveLocally?: boolean) => {
  // @ts-ignore
  const chunks: any[] = [];
  const form = formidable({
    keepExtensions: true,
    fileWriteStreamHandler: () => fileConsumer(chunks),
  });

  return new Promise((resolve, reject) => {
    form.parse(req,  (err, fields: any, files: any) => {
      const image = Buffer.concat(chunks).toString("base64");
      //👇🏻 sends the payload to the job
      client.sendEvent({
        name: "generate.avatar",
        payload: {
          image,
          email: fields.email[0],
          gender: fields.gender[0],
          userPrompt: fields.userPrompt[0],
        },
      });

      if (err) reject(err);
      resolve({ fields, files });
    });
  });
};

Creating the faces with Replicate

Replicate is a web platform that allows users to run models at scale in the cloud. Here, you'll learn how to generate and swap image faces using AI models on Replicate.

Follow the steps below to accomplish this:

Visit the Replicate home page, click the Sign in button to log in via your GitHub account, and generate your API token.

Copy your API token, the Stability AI model URI - for generating images, and the Faceswap AI model URI into the .env.local file.



REPLICATE_API_TOKEN=<your_API_token>
STABILITY_AI_URI=stability-ai/sdxl:c221b2b8ef527988fb59bf24a8b97c4561f1c671f73bd389f866bfb27c061316
FACESWAP_API_URI=lucataco/faceswap:9a4298548422074c3f57258c5d544497314ae4112df80d116f0d2109e843d20d

Next, go to the Trigger.dev integration page and install the Replicate package.



npm install @trigger.dev/replicate@latest

Import and initialize the Replicate within the jobs/functions.ts file.



import { Replicate } from "@trigger.dev/replicate";

const replicate = new Replicate({
  id: "replicate",
  apiKey: process.env["YOUR_REPLICATE_API_KEY"],
});

Update the jobs/functions.ts file to generate an image using the prompt provided by the user or a default prompt.



import { z } from "zod";

client.defineJob({
id: "generate-avatar",
  name: "Generate Avatar",
//👇🏻 integrates Replicate
  integrations: { replicate },
  version: "0.0.1",
  trigger: eventTrigger({
    name: "generate.avatar",
    schema: z.object({
      image: z.string(),
      email: z.string(),
      gender: z.string(),
      userPrompt: z.string().nullable(),
    }),
  }),
    run: async (payload, io, ctx) => {
    const { email, image, gender, userPrompt } = payload;

    await io.logger.info("Avatar generation started!", { image });

    const imageGenerated = await io.replicate.run("create-model", {
      identifier: process.env.STABILITY_AI_URI,
      input: {
        prompt: `${
          userPrompt
            ? userPrompt
            : `A professional ${gender} portrait suitable for a social media avatar. Please ensure the image is appropriate for all audiences.`
        }`,
      },
    });

        await io.logger.info(JSON.stringify(imageGenerated));
    },
});

The code snippet above generates an AI image based on the prompt and logs it on your Trigger.dev dashboard.

Remember, you need to generate an AI image and swap the user's face with the AI-generated image. Next, let's swap faces on the images.

Copy this function to the top of the jobs/functions.ts file. The code snippet converts the image generated into its data URI, which is the accepted format for the face swap AI model.



//👇🏻 converts an image URL to a data URI
const urlToBase64 = async (image: string) => {
    const response = await fetch(image);
    const arrayBuffer = await response.arrayBuffer();
    const buffer = Buffer.from(arrayBuffer);
    const base64String = buffer.toString("base64");
    const mimeType = "image/png";
    const dataURI = `data:${mimeType};base64,${base64String}`;
    return dataURI;
};

Update the Trigger.dev job to send both the user's image and generated image as parameters to the faceswap model.



client.defineJob({
    id: "generate-avatar",
    name: "Generate Avatar",
    version: "0.0.1",
    trigger: eventTrigger({
        name: "generate.avatar",
        schema: z.object({
            image: z.string(),
            email: z.string(),
            gender: z.string(),
            userPrompt: z.string().nullable(),
        }),
    }),
    run: async (payload, io, ctx) => {
        const { email, image, gender, userPrompt } = payload;

    await io.logger.info("Avatar generation started!", { image });

    const imageGenerated = await io.replicate.run("create-model", {
      identifier: process.env.STABILITY_AI_URL,
      input: {
        prompt: `${
          userPrompt
            ? userPrompt
            : `A professional ${gender} portrait suitable for a social media avatar. Please ensure the image is appropriate for all audiences.`
        }`,
      },
    });

    const swappedImage = await io.replicate.run("create-image", {
      identifier: process.env.FACESWAP_AI_URL
      input: {
        // @ts-ignore
        target_image: await urlToBase64(imageGenerated.output),
        swap_image: "data:image/png;base64," + image,
      },
    });
        await io.logger.info("Swapped image: ", {swappedImage.output});
        await io.logger.info("✨ Congratulations, your image has been swapped! ✨");
    },
});

The code snippet above gets the data URI for the AI-generated and user's image and sends both images to the AI model, which returns the URL of the swapped image.

Congratulations!🎉 You've learnt how to generate AI images of yourself with Replicate. In the upcoming section, you'll learn how to send these images via email with Resend.

PS: You can also get custom prompts for your images from Lexica.

Sending emails with Resend via Trigger.dev

Resend is an email API that enables you to send texts, attachments, and email templates easily. With Resend, you can build, test, and deliver transactional emails at scale.

Visit the Signup page, create an account and an API Key and save it into the .env.local file.



RESEND_API_KEY=<place_your_API_key>

Install the Trigger.dev Resend integration package to your Next.js project.



npm install @trigger.dev/resend

Import Resend into the /jobs/functions.ts file as shown below.



import { Resend } from "@trigger.dev/resend";

const resend = new Resend({
    id: "resend",
    apiKey: process.env.RESEND_API_KEY!,
});

Finally, integrate Resend to the job and send the swapped imaged to user's email.



client.defineJob({
    id: "generate-avatar",
    name: "Generate Avatar",
    // ---👇🏻 integrates Resend ---
    integrations: { resend },
    version: "0.0.1",
    trigger: eventTrigger({
        name: "generate.avatar",
        schema: z.object({
            image: z.object({ filepath: z.string() }),
            email: z.string(),
            gender: z.string(),
            userPrompt: z.string().nullable(),
        }),
    }),
    run: async (payload, io, ctx) => {
        const { email, image, gender, userPrompt } = payload;
        //👇🏻 -- After swapping the images, add the code snipped below --
        await io.logger.info("Swapped image: ", {swappedImage});

        //👇🏻 -- Sends the swapped image to the user--
    await io.resend.sendEmail("send-email", {
      from: "onboarding@resend.dev",
      to: [email],
      subject: "Your avatar is ready! 🌟🤩",
      text: `Hi! \n View and download your avatar here - ${swappedImage.output}`,
    });

        await io.logger.info(
            "✨ Congratulations, the image has been delivered! ✨"
        );
    },
});

Congratulations!🎉 You've completed the project for this tutorial.

Conclusion

So far, you've learnt how to

upload images to a local directory in Next.js,
create and manage long-running jobs with Trigger.dev,
generate AI images using various models on Replicate, and
send emails via Resend in Trigger.dev.

The source for this tutorial is available here:
https://github.com/triggerdotdev/blog/tree/main/avatar-generator

Thank you for reading!

Don't forget to generate a new avatar and post it in the comments!
https://avatar-generator-psi.vercel.app
(To find good prompts, check https://lexica.art)

🤯 Get visibility on X (Twitter): Schedule your posts with NextJS 🚀🚀

Eric Allam — Wed, 11 Oct 2023 12:55:25 +0000

TL;DR

In this tutorial, you will learn how to create an X (Twitter) post scheduler 🔥

Authenticates users via X (Twitter).
Schedule posts and save them to Supabase.
Post to X (Twitter) with Trigger.dev.

Your background job management for NextJS

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more!

If you can spend 10 seconds giving us a star, I would be super grateful 💖
https://github.com/triggerdotdev/trigger.dev

Let's set it up 🔥

Let's create a TypeScript Next.js application by running the code snippet below.

npx create-next-app x-post-scheduler

Install the React Icons and the Headless UI packages. React Icons enable us to use different icons within the application, and we'll leverage Headless UI to add animated custom modals to the application.

npm install @headlessui/react react-icons

The right way for authentication 🔐

Here, I'll walk you through how to add X authentication to your Next.js application and enable permissions to send posts on behalf of your users.

To create a Twitter Developers’ project, you must have an X account. Visit the homepage and create a new project.

Provide a suitable project name and answer all the required questions.

Next, create an App under the project and copy the tokens generated into a .env.local file within your Next.js project.

TWITTER_API_KEY=<your_api_key>
TWITTER_API_SECRET=<your_api_secret>
TWITTER_BEARER_TOKEN=<your_bearer_token>

Scroll down the page and set up user authentication to enable users to sign in to your application via X.

Select Read and write as the app permission, enable Request email from users, and select Web app as the type of app.

Scroll down to the next section and provide your app's callback URL, website URL, and the required information. If you are using the Next.js development server, you may use the same inputs in the image below. After authentication, users are redirected to http://www.localhost:3000/dashboard, which is another route on the client side.

After setting up the authentication process, save the OAuth 2.0 Client ID and secret into the .env.local file.

TWITTER_CLIENT_ID=<app_client_id>
TWITTER_CLIENT_SECRET=<app_client_secret>

Adding X authentication to Next.js

Create a Sign in with Twitter link element within the index.ts file that redirects users to X and allows them to grant your app access to their profile.

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
import Link from "next/link";

export default function Home() {
    const router = useRouter();

    const getTwitterOauthUrl = () => {
        const rootUrl = "https://twitter.com/i/oauth2/authorize";
        const options = {
            redirect_uri: "<your_callback_URL>",
            client_id: process.env.TWITTER_CLIENT_ID!,
            state: "state",
            response_type: "code",
            code_challenge: "y_SfRG4BmOES02uqWeIkIgLQAlTBggyf_G7uKT51ku8",
            code_challenge_method: "S256",
            //👇🏻 required scope for authentication and posting tweets
            scope: ["users.read", "tweet.read", "tweet.write"].join(" "),
        };
        const qs = new URLSearchParams(options).toString();
        return `${rootUrl}?${qs}`;
    };

    return (
        <main
            className={`flex items-center flex-col justify-center min-h-screen ${inter.className}`}
        >
            <h2 className='font-bold text-2xl '>X Scheduler</h2>
            <p className='mb-3 text-md'>Get started and schedule posts</p>
            <Link
                href={getTwitterOauthUrl()}
                className='bg-blue-500 py-3 px-4 text-gray-50 rounded-lg'
            >
                Sign in with Twitter
            </Link>
        </main>
    );
}

From the code snippet above, the Sign in with Twitter link executes the getTwitterOauthUrl function, redirecting users to X and enabling them to grant the app access to their profile.

When users authorize your app, they are redirected to the callback URL page, and you need to access the code parameter added to the URL and send this code to the server for further processing.

http://www.localhost:3000/dashboard?state=state&code=WTNhMUFYSDQwVnBsbEFoWGM0cmIwMWhKd3lJOFM1Q3FuVEdtdE5ESU1mVjIwOjE2OTY3NzMwMTEyMzc6M

Next, create the /dashboard client route by creating a dashboard.tsx file that extracts the code parameter from the URL and sends it to the server when the component mounts.

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

const Dashboard = () => {
    const sendAuthRequest = useCallback(async (code: string | null) => {
        try {
            const request = await fetch("/api/twitter/auth", {
                method: "POST",
                body: JSON.stringify({ code }),
                headers: {
                    "Content-Type": "application/json",
                },
            });
            const response = await request.json();
            console.log("RES >>>", response);
        } catch (err) {
            console.error(err);
        }
    }, []);

    useEffect(() => {
        const params = new URLSearchParams(window.location.href);
        const code = params.get("code");
        sendAuthRequest(code);
    }, [sendAuthRequest]);

    return (
        <main className='w-full min-h-screen'>
            <p>Dashboard</p>
        </main>
    );
};

export default Dashboard;

The code snippet above retrieves the code parameter from the URL and sends it to an /api/twitter/auth endpoint on the server where the user will be authenticated.

On the server, the code received fetches the user's access token. With this token, you can retrieve the user's details and save or send them to the client.

Therefore, create an api/twitter/auth.ts file (server route) that receives the code parameter from the client. Copy the code snippet below to the top of the file.

import type { NextApiRequest, NextApiResponse } from "next";

const BasicAuthToken = Buffer.from(
    `${process.env.TWITTER_CLIENT_ID!}:${process.env.TWITTER_CLIENT_SECRET!}`,
    "utf8"
).toString("base64");

const twitterOauthTokenParams = {
    client_id: process.env.TWITTER_CLIENT_ID!,
//👇🏻 according to the code_challenge provided on the client
    code_verifier: "8KxxO-RPl0bLSxX5AWwgdiFbMnry_VOKzFeIlVA7NoA",
    redirect_uri: `<your_callback_URL>`,
    grant_type: "authorization_code",
};

//gets user access token
export const fetchUserToken = async (code: string) => {
    try {
        const formatData = new URLSearchParams({
            ...twitterOauthTokenParams,
            code,
        });
        const getTokenRequest = await fetch(
            "https://api.twitter.com/2/oauth2/token",
            {
                method: "POST",
                body: formatData.toString(),
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                    Authorization: `Basic ${BasicAuthToken}`,
                },
            }
        );
        const getTokenResponse = await getTokenRequest.json();
        return getTokenResponse;
    } catch (err) {
        return null;
    }
};

//gets user's data from the access token
export const fetchUserData = async (accessToken: string) => {
    try {
        const getUserRequest = await fetch("https://api.twitter.com/2/users/me", {
            headers: {
                "Content-type": "application/json",
                Authorization: `Bearer ${accessToken}`,
            },
        });
        const getUserProfile = await getUserRequest.json();
        return getUserProfile;
    } catch (err) {
        return null;
    }
};

From the code snippet above,
- The BasicAuthToken variable contains the encoded version of your tokens.
- The twitterOauthTokenParams contains the parameters required for getting the users' access token.
- The fetchUserToken function sends a request to Twitter's endpoint and returns the user's access token, and the fetchUserData function accepts the token and retrieves the user's X profile.

Finally, create the endpoint as done below.

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const { code } = req.body;
    try {
        const tokenResponse = await fetchUserToken(code);
        const accessToken = tokenResponse.access_token;
        if (accessToken) {
            const userDataResponse = await fetchUserData(accessToken);
            const userCredentials = { ...tokenResponse, ...userDataResponse };
            return res.status(200).json(userCredentials);
        }
    } catch (err) {
        return res.status(400).json({ err });
    }
}

The code snippet above retrieves the user's access token and profile details using the functions declared above, merge them into a single object, and sends them back to the client.

Congratulations! You've successfully added X (Twitter) authentication to your Next.js application.

Building the schedule dashboard ⏰

In this section, you'll learn how to create the user interface for the application by building a calendar-like table to enable users to add and delete scheduled posts within each cell.

Before we proceed, create a utils/util.ts file. It will contain some of the functions used within the application.

mkdir utils
cd utils
touch util.ts

Copy the code snippet below into the util.ts file. It describes the structure of the table header and its contents (time and schedule). They will mapped into the table on the user interface.

export interface Content {
    minutes?: number;
    content?: string;
    published?: boolean;
    day?: number;
}
export interface AvailableScheduleItem {
    time: number;
    schedule: Content[][];
}
// table header
export const tableHeadings: string[] = [
    "Time",
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
];

// table contents
export const availableSchedule: AvailableScheduleItem[] = [
    {
        time: 0,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 1,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 2,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 3,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 4,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 5,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 6,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 7,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 8,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 9,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 10,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 11,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 12,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 13,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 14,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 15,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 16,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 17,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 18,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 19,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 20,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 21,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 22,
        schedule: [[], [], [], [], [], [], []],
    },
    {
        time: 23,
        schedule: [[], [], [], [], [], [], []],
    },
];

Add the code snippet below into the file to help format the time into a more readable format for your users.

export const formatTime = (value: number) => {
    if (value === 0) {
        return `Midnight`;
    } else if (value < 10) {
        return `${value}am`;
    } else if (value >= 10 && value < 12) {
        return `${value}am`;
    } else if (value === 12) {
        return `${value}noon`;
    } else {
        return `${value % 12}pm`;
    }
};

Update the dashboard.tsx file to display the table header and contents on the webpage within a table.

"use client";
import React, { useState } from "react";
import {
    Content,
    availableSchedule,
    formatTime,
    tableHeadings,
} from "@/utils/util";
import { FaClock } from "react-icons/fa6";

const Dashboard = () => {
    const [yourSchedule, updateYourSchedule] = useState(availableSchedule);

    //👇🏻 add scheduled post
    const handleAddPost = (id: number, time: number) => {
        console.log({ id, time });
    };

    //👇🏻 delete scheduled post
    const handleDeletePost = (
        e: React.MouseEvent<HTMLParagraphElement>,
        content: Content,
        time: number
    ) => {
        e.stopPropagation();
        if (content.day !== undefined) {
            console.log({ time, content });
        }
    };

    return (
        <main className='w-full min-h-screen'>
            <header className='w-full flex items-center mb-6 justify-center'>
                <h2 className='text-center font-extrabold text-3xl mr-2'>
                    Your Post Schedules
                </h2>
                <FaClock className='text-3xl text-pink-500' />
            </header>
            <div className=' p-8'>
                <div className='w-full h-[80vh] overflow-y-scroll'>
                    <table className='w-full border-collapse'>
                        <thead>
                            <tr>
                                {tableHeadings.map((day, index) => (
                                    <th
                                        key={index}
                                        className='bg-[#F8F0DF] text-lg p-4 font-bold'
                                    >
                                        {day}
                                    </th>
                                ))}
                            </tr>
                        </thead>
                        <tbody>
                            {yourSchedule.map((item, index) => (
                                <tr key={index}>
                                    <td className='bg-[#F8F0DF] text-lg font-bold'>
                                        {formatTime(item.time)}
                                    </td>
                                    {item.schedule.map((sch, id) => (
                                        <td
                                            key={id}
                                            onClick={() => handleAddPost(id, item.time)}
                                            className='cursor-pointer'
                                        >
                                            {sch.map((content, ind: number) => (
                                                <div
                                                    key={ind}
                                                    onClick={(e) =>
                                                        handleDeletePost(e, content, item.time)
                                                    }
                                                    className={`p-3 ${
                                                        content.published ? "bg-pink-500" : "bg-green-600"
                                                    }  mb-2 rounded-md text-xs cursor-pointer`}
                                                >
                                                    <p className='text-gray-700 mb-2'>
                                                        {content.minutes === 0
                                                            ? "o'clock"
                                                            : `at ${content.minutes} minutes past`}
                                                    </p>
                                                    <p className=' text-white'>{content.content}</p>
                                                </div>
                                            ))}
                                        </td>
                                    ))}
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    );
};

export default Dashboard;

The handleAddPost function runs when the user clicks on an empty cell on the table, and the handleDeletePost is executed when the user clicks on a scheduled post within a cell.

Within the util.ts file, create the Typescript interface for newly added posts and selected posts to be deleted. The DelSectedCell Typescript interface defines the properties of a post within a cell, and the SelectedCell represents the structure of the newly added post.

export interface DelSelectedCell {
    content?: string;
    day_id?: number;
    day?: string;
    time_id?: number;
    time?: string;
    minutes?: number;
}
export interface SelectedCell {
    day_id?: number;
    day?: string;
    time_id?: number;
    time?: string;
    minutes?: number;
}

Import the DelSelectedCell and SelectedCell interfaces into the dashboard.tsx file and create the states holding both data structures. Add two boolean states that display the needed modal when the user performs an add or delete event.

const [selectedCell, setSelectedCell] = useState<SelectedCell>({
    day_id: 0,
    day: "",
    time_id: 0,
    time: "",
});
const [delSelectedCell, setDelSelectedCell] = useState<DelSelectedCell>({
    content: "",
    day_id: 0,
    day: "",
    time_id: 0,
    time: "",
    minutes: 0,
});
//👇🏻 triggers the add post modal
const [addPostModal, setAddPostModal] = useState(false);
//👇🏻 triggers the delete post modal
const [deletePostModal, setDeletePostModal] = useState(false);

Modify the handleAddPost and handleDeletePost functions to update the recently added states as follows.

const handleAddPost = (id: number, time: number) => {
    setSelectedCell({
        day_id: id + 1,
        day: tableHeadings[id + 1],
        time_id: time,
        time: formatTime(time),
    });
    setAddPostModal(true);
};

const handleDeletePost = (
    e: React.MouseEvent<HTMLParagraphElement>,
    content: Content,
    time: number
) => {
    e.stopPropagation();
    if (content.day !== undefined) {
        setDelSelectedCell({
            content: content.content,
            day_id: content.day,
            day: tableHeadings[content.day],
            time_id: time,
            time: formatTime(time),
            minutes: content.minutes,
        });
        setDeletePostModal(true);
    }
};

The Delete and Add post modals with Headless UI

In this section, how to add posts when a user clicks on a cell and delete posts from the schedule when users click on a specific post in a cell.

Create a components folder containing the add and delete post modals.

mkdir components
cd components
touch AddPostModal.tsx DeletePostModal.tsx

Display both components within the dashboard.tsx when the user wants to add or delete a post.

return (
    <main>
        {/*-- other dashboard elements --*/}
        {addPostModal && (
            <AddPostModal
                setAddPostModal={setAddPostModal}
                addPostModal={addPostModal}
                selectedCell={selectedCell}
                yourSchedule={yourSchedule}
                updateYourSchedule={updateYourSchedule}
                profile={username}
            />
        )}
        {deletePostModal && (
            <DeletePostModal
                setDeletePostModal={setDeletePostModal}
                deletePostModal={deletePostModal}
                delSelectedCell={delSelectedCell}
                yourSchedule={yourSchedule}
                updateYourSchedule={updateYourSchedule}
                profile={username}
            />
        )}
    </main>
);

Both components accept the schedule, the states containing the post to be added or deleted, and the user's X username as props.

Copy the code snippet below into the AddPostModal.tsx file.

import {
    SelectedCell,
    AvailableScheduleItem,
    updateSchedule,
} from "@/utils/util";
import { Dialog, Transition } from "@headlessui/react";
import {
    FormEventHandler,
    Fragment,
    useState,
    Dispatch,
    SetStateAction,
} from "react";

interface Props {
    setAddPostModal: Dispatch<SetStateAction<boolean>>;
    updateYourSchedule: Dispatch<SetStateAction<AvailableScheduleItem[]>>;
    addPostModal: boolean;
    selectedCell: SelectedCell;
    profile: string | any;
    yourSchedule: AvailableScheduleItem[];
}

const AddPostModal: React.FC<Props> = ({
    setAddPostModal,
    addPostModal,
    selectedCell,
    updateYourSchedule,
    profile,
    yourSchedule,
}) => {
    const [content, setContent] = useState<string>("");
    const [minute, setMinute] = useState<number>(0);
    const closeModal = () => setAddPostModal(false);

const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
        e.preventDefault();
}
    return ()
}

The code snippet above accepts the values passed via props into the component. The content and minute states hold the post's content and the post's scheduled minute. The handleSubmit function is executed when the user clicks the Save button to schedule a post.

Return the JSX elements below from the AddPostModal component. The code snippet below uses the Headless UI components to render an animated and already customised modal.

<div>
    <Transition appear show={addPostModal} as={Fragment}>
        <Dialog as='div' className='relative z-10' onClose={closeModal}>
            <Transition.Child
                as={Fragment}
                enter='ease-out duration-300'
                enterFrom='opacity-0'
                enterTo='opacity-100'
                leave='ease-in duration-200'
                leaveFrom='opacity-100'
                leaveTo='opacity-0'
            >
                <div className='fixed inset-0 bg-black bg-opacity-80' />
            </Transition.Child>

            <div className='fixed inset-0 overflow-y-auto'>
                <div className='flex min-h-full items-center justify-center p-4 text-center'>
                    <Transition.Child
                        as={Fragment}
                        enter='ease-out duration-300'
                        enterFrom='opacity-0 scale-95'
                        enterTo='opacity-100 scale-100'
                        leave='ease-in duration-200'
                        leaveFrom='opacity-100 scale-100'
                        leaveTo='opacity-0 scale-95'
                    >
                        <Dialog.Panel className='w-full max-w-xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
                            <Dialog.Title
                                as='h3'
                                className='text-xl font-bold leading-6 text-gray-900'
                            >
                                Schedule a post on {selectedCell.day} by {selectedCell.time}
                            </Dialog.Title>

                            <form className='mt-2' onSubmit={handleSubmit}>
                                {minute > 59 && (
                                    <p className='text-red-600'>
                                        Error, please minute must be less than 60
                                    </p>
                                )}
                                <label htmlFor='minute' className='opacity-60'>
                                    How many minutes past?
                                </label>
                                <input
                                    type='number'
                                    className='w-full border-[1px] px-4 py-2 rounded-md mb-2'
                                    name='title'
                                    id='title'
                                    value={minute.toString()}
                                    onChange={(e) => setMinute(parseInt(e.target.value, 10))}
                                    max={59}
                                    required
                                />

                                <label htmlFor='content' className='opacity-60'>
                                    Post content
                                </label>
                                <textarea
                                    className='w-full border-[1px] px-4 py-2 rounded-md mb-2 text-sm'
                                    name='content'
                                    id='content'
                                    value={content}
                                    onChange={(e) => setContent(e.target.value)}
                                    required
                                />

                                <div className='mt-4 flex items-center justify-between space-x-4'>
                                    <button
                                        type='submit'
                                        className='inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
                                    >
                                        Save
                                    </button>

                                    <button
                                        type='button'
                                        className='inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2'
                                        onClick={closeModal}
                                    >
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </Dialog.Panel>
                    </Transition.Child>
                </div>
            </div>
        </Dialog>
    </Transition>
</div>

Update the handleSubmit function as done below.

const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();
    if (
        Number(minute) < 60 &&
        content.trim().length > 0 &&
        selectedCell.time_id !== undefined &&
        selectedCell.day_id !== undefined
    ) {
        const newSchedule = [...yourSchedule];
        const selectedDay =
            newSchedule[selectedCell.time_id].schedule[selectedCell.day_id - 1];
        selectedDay.push({
            content,
            published: false,
            minutes: minute,
            day: selectedCell.day_id,
        });
        updateYourSchedule(newSchedule);
        closeModal();
    }
};

The function first validates if the minute entered by the user is valid, ensures the content is not empty, and confirms that the selected time and day are defined. Then, it retrieves the user's post schedule, identifies the selected day scheduled for the post, and updates the array with the new post details.

Add the code snippet below into the DeletePostModal.tsx file.

"use client";
import { Dialog, Transition } from "@headlessui/react";
import { Fragment, Dispatch, SetStateAction } from "react";
import {
    DelSelectedCell,
    AvailableScheduleItem,
    updateSchedule,
} from "../utils/util";

interface Props {
    setDeletePostModal: Dispatch<SetStateAction<boolean>>;
    deletePostModal: boolean;
    delSelectedCell: DelSelectedCell;
    profile: string | any;
    yourSchedule: AvailableScheduleItem[];
    updateYourSchedule: Dispatch<SetStateAction<AvailableScheduleItem[]>>;
}

const DeletePostModal: React.FC<Props> = ({
    setDeletePostModal,
    deletePostModal,
    delSelectedCell,
    yourSchedule,
    updateYourSchedule,
    profile,
}) => {
    const closeModal = () => setDeletePostModal(false);

    const handleDelete = () => {};

    return <main>{/**-- JSX elements --**/}</main>;
};

Render these JSX elements within the DeletePostModal component.

return (
    <div>
        <Transition appear show={deletePostModal} as={Fragment}>
            <Dialog as='div' className='relative z-10' onClose={closeModal}>
                <Transition.Child
                    as={Fragment}
                    enter='ease-out duration-300'
                    enterFrom='opacity-0'
                    enterTo='opacity-100'
                    leave='ease-in duration-200'
                    leaveFrom='opacity-100'
                    leaveTo='opacity-0'
                >
                    <div className='fixed inset-0 bg-black bg-opacity-25' />
                </Transition.Child>

                <div className='fixed inset-0 overflow-y-auto'>
                    <div className='flex min-h-full items-center justify-center p-4 text-center'>
                        <Transition.Child
                            as={Fragment}
                            enter='ease-out duration-300'
                            enterFrom='opacity-0 scale-95'
                            enterTo='opacity-100 scale-100'
                            leave='ease-in duration-200'
                            leaveFrom='opacity-100 scale-100'
                            leaveTo='opacity-0 scale-95'
                        >
                            <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all'>
                                <Dialog.Title
                                    as='h3'
                                    className='text-xl font-bold leading-6 text-gray-900'
                                >
                                    Delete post
                                </Dialog.Title>
                                <div className='mt-2'>
                                    <p className='mb-3'>Are you sure you want to delete?</p>
                                    <p className='text-sm text-gray-500'>
                                        {`"${delSelectedCell.content}" scheduled for ${delSelectedCell.day} at ${delSelectedCell.time_id}:${delSelectedCell.minutes}`}
                                    </p>
                                </div>

                                <div className='mt-4 flex items-center justify-between space-x-4'>
                                    <button
                                        type='button'
                                        className='inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
                                        onClick={handleDelete}
                                    >
                                        Yes
                                    </button>
                                    <button
                                        type='button'
                                        className='inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2'
                                        onClick={closeModal}
                                    >
                                        Cancel
                                    </button>
                                </div>
                            </Dialog.Panel>
                        </Transition.Child>
                    </div>
                </div>
            </Dialog>
        </Transition>
    </div>
);

Modify the handleDelete function to accept the properties of the selected post and remove it from the schedule.

const handleDelete = () => {
    if (
        delSelectedCell.time_id !== undefined &&
        delSelectedCell.day_id !== undefined
    ) {
        //👇🏻 gets the user's post schedule
        const initialSchedule = [...yourSchedule];
        //👇🏻 gets the exact day the post is scheduled for
        let selectedDay =
            initialSchedule[delSelectedCell.time_id].schedule[
                delSelectedCell.day_id - 1
            ];
        //👇🏻 filters the array to remove the selected post
        const updatedPosts = selectedDay.filter(
            (day) =>
                day.content !== delSelectedCell.content &&
                day.minutes !== delSelectedCell.minutes
        );
        //👇🏻 updates the schedule
        initialSchedule[delSelectedCell.time_id].schedule[
            delSelectedCell.day_id - 1
        ] = updatedPosts;
        //👇🏻 updates the schedule
        updateYourSchedule(initialSchedule);
        closeModal();
    }
};

Congratulations on making it thus far! You can now add and remove scheduled posts from each cell. Next, let's connect a backend database (Supabase) to the application to persist data when the page is refreshed.

Saving everything to the database 📀

Supabase is an open-source Firebase alternative that enables you to add authentication, file storage, Postgres, and real-time database to your software applications. With Supabase, you can build secured and scalable applications in a few minutes.

In this section, you'll learn how to integrate Supabase into your Next.js application and save and update the user's schedule via Supabase. Before we proceed, install the Supabase package.

npm install @supabase/supabase-js

Visit the Supabase homepage and create a new organization and project.

To set up the database for the application, you need to create two tables - schedule_posts containing the scheduled posts and the users table containing all the user's information retrieved from X.

The users table has three columns containing the username, ID, and access token retrieved after authentication. Ensure you make the username column the primary key for the table.

The schedule_posts table contains six columns: a unique ID for each row, the timestamp indicating when the post will be live, the post content for X, the post status, the user's username on X, and day_id representing the scheduled day. day_id is necessary for retrieving existing schedules.

Next, make the profile column a foreign key to the username column on the users table. We'll need this connection when making queries that merge the data within both tables.

Click API on the sidebar menu and copy the project's URL and API into the .env.local file.

NEXT_PUBLIC_SUPABASE_URL=<public_supabase_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<supabase_anon_key>

Finally, create a src/supbaseClient.ts file and create the Supabase client for the application.

import { createClient } from "@supabase/supabase-js";

const supabaseURL = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseURL, supabaseAnonKey, {
  auth: { persistSession: false },
});

Finally, create an api/schedule folder on the server containing a read, create, and delete route. The api/schedule/create adds a new post schedule to the database, api/schedule/delete deletes a selected post, and api/schedule/read fetches all the posts created by a user.

cd pages/api
mkdir schedule
touch create.ts delete.ts read.ts

Before we continue, update the api/twitter/auth endpoint to save the user’s access token and profile information to Supabase after authentication.

import { supabase } from '../../../../supabaseClient';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
    const { code } = req.body
        try { 
            const tokenResponse = await fetchUserToken(code)
            const accessToken = tokenResponse.access_token

            if (accessToken) {
                const userDataResponse = await fetchUserData(accessToken)
                const userCredentials = { ...tokenResponse, ...userDataResponse };
                                //👇🏻 saves user's information to Supabase
                const { data, error } = await supabase.from("users").insert({
                    id: userCredentials.data.id,
                    accessToken: userCredentials.access_token,
                    username: userCredentials.data.username
                });
                if (!error) {
                    return res.status(200).json(userCredentials)

                } else {c
                    return res.status(400).json({error})
                }         
            }

        } catch (err) {
            return res.status(400).json({err})
        }
}

Scheduling new posts

Modify the api/schedule/create endpoint to accept the post details and save them to the Supabase.

import type { NextApiRequest, NextApiResponse } from "next";
import { supabase } from "../../../../supabaseClient";

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const { profile, timestamp, content, published, day_id } = req.body;

    const { data, error } = await supabase.from("schedule_posts").insert({
        profile, timestamp, content, published, day_id
    });
    res.status(200).json({data, error});

}

Add a function within the utils/util.ts file that accepts all the post details from the client and sends them to the endpoint. Execute the function when a user adds a new schedule.

export const getNextDayOfWeek = (dayOfWeek: number, hours: number, minutes: number) => {
    var today = new Date();
    var daysUntilNextDay = dayOfWeek - today.getDay();
    if (daysUntilNextDay < 0) {
        daysUntilNextDay += 7;
    }
    today.setDate(today.getDate() + daysUntilNextDay);
    today.setHours(hours);
    today.setMinutes(minutes);
    return today;
}

export const updateSchedule = async (
    profile: string,
    schedule: any
) => {
    const { day_id, time, minutes, content, published } = schedule
    const timestampFormat = getNextDayOfWeek(day_id, time, minutes)
    try {
    await fetch("/api/schedule/create", {
            method: "POST",
            body: JSON.stringify({profile, timestamp: timestampFormat, content, published, day_id}),
            headers: {
                "Content-Type": "application/json",
            },
        });

    } catch (err) {
        console.error(err);
    }
};

The getNextDayOfWeek function accepts the day, hour, and minutes of the post, gets the date of the selected day, and converts the post's time and date into a datetime format - the acceptable format on the database, before adding it to the request's body. The profile parameter contains the user’s X username stored in local storage after authentication.

Deleting scheduled posts

Update the api/schedule/delete endpoint to accept the post’s data and delete it from database.

import type { NextApiRequest, NextApiResponse } from "next";
import { supabase } from "../../../../supabaseClient";

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const { profile, timestamp, content } = req.body;

    const { data, error } = await supabase
        .from("schedule_posts").delete().eq("content", content).eq("timestamp", timestamp.toISOString())

    res.status(200).json({ data, error });
}

Create the client-side function within the utils/util.ts file that sends a request to the endpoint when the user deletes a post.

export const deleteSchedule = async (
    profile: string,
    schedule: any
) => {
    const { day_id, time_id, minutes, content, published } = schedule
    const timestampFormat = getNextDayOfWeek(day_id, time_id, minutes)

    try {
        await fetch("/api/schedule/delete", {
            method: "POST",
            body: JSON.stringify({ profile, timestamp: timestampFormat,  content}),
            headers: {
                "Content-Type": "application/json",
            },
        });
    } catch (err) {
        console.error(err);
    }

};

Fetching users’ schedule

Modify the api/schedule/create endpoint to accept a post details and add them to the database.

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
import { supabase } from "../../../../supabaseClient";

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const { profile, timestamp, content, published, day_id } = req.body;

    const { data, error } = await supabase.from("schedule_posts").insert({
        profile, timestamp, content, published, day_id
    });
    res.status(200).json({data, error});

}

Create its request function on the client that retrieves all the scheduled posts and converts them to the format required on the front end.

export const fetchSchedule = async (
    profile: string, updateYourSchedule: Dispatch<SetStateAction<AvailableScheduleItem[]>>
) => {
    try {
        const request = await fetch("/api/schedule/read", {
            method: "POST",
            body: JSON.stringify({ profile }),
            headers: {
                "Content-Type": "application/json",
            },
        });
        const response = await request.json();
        const { data } = response
        //👇🏻 if there is a response
        if (data) {
            const result = data.map((item: any) => {
                const date = new Date(item.timestamp);
                //👇🏻 returns a new array in the format below
                return {
                    //👇🏻 converts 24 hour to 0 hour
                    time: date.getUTCHours() + 1 < 24 ? date.getUTCHours() + 1 : 0,
                    schedule: {
                        content: item.content,
                        published: item.published,
                        minutes: date.getUTCMinutes(),
                        day: item.day_id
                    },
                }

            })
            //👇🏻 loops through retrieved schedule and add them to the large table array 
            result.forEach((object: any) => {
                const matchingObjIndex = availableSchedule.findIndex((largeObj) => largeObj.time === object.time);
                if (matchingObjIndex !== -1) {
                    availableSchedule[matchingObjIndex].schedule[object.schedule.day].push(object.schedule)
                }
            })
            updateYourSchedule(availableSchedule)
        }
    } catch (err) {
        console.error(err);
    }

};

The code snippet above receives the scheduled posts from the server, converts it into the format required by the table UI, then loops through the data, adds them to the large array - availableSchedule that contains the table layout, and updates the schedule state with the modified version.

Congratulations! You've successfully added Supabase to the application.

Sending the post at the right time ⏳

Trigger.dev offers three communication methods: webhook, schedule, and event. Schedule is ideal for recurring tasks, events activate a job upon sending a payload, and webhooks trigger real-time jobs when specific events occur.

In this section, you’ll learn how to schedule recurring tasks with Trigger.dev by comparing the current time with the time scheduled post times and automatically posting them to X at their scheduled times.

Adding Trigger.dev to a Next.js app

Before we continue, you need to create a Trigger.dev account. Once registered, create an organization and choose a project name for your jobs.

Select Next.js as your framework and follow the process for adding Trigger.dev to an existing Next.js project.

Otherwise, click Environments & API Keys on the sidebar menu of your project dashboard.

Copy your DEV server API key and run the code snippet below to install Trigger.dev. Follow the instructions carefully.

npx @trigger.dev/cli@latest init

Start your Next.js project.

npm run dev

In another terminal, run the following code snippet to establish a tunnel between Trigger.dev and your Next.js project.

npx @trigger.dev/cli@latest dev

Finally, rename the jobs/examples.ts file to jobs/functions.ts. This is where all the jobs are processed.

Congratulations!🎉 You've successfully added Trigger.dev to your Next.js app.

Posting scheduled contents on X with Trigger.dev

Here, you'll learn how to create recurring jobs with Trigger. The job will check the scheduled posts every minute and post content to X at the exact time stated by the user.

To integrate Trigger.dev with Supabase, you need to install the Trigger.dev Supabase package.

npm install @trigger.dev/supabase

Import the [cronTrigger](https://trigger.dev/docs/sdk/crontrigger) and Supabase from their packages into the jobs/functions.ts file. The cronTrigger() function enables us to execute jobs on a recurring schedule.

PS: Scheduled Triggers do not trigger Jobs in the DEV Environment. When you’re working locally you should use the Test feature to trigger any scheduled jobs.

import { cronTrigger } from "@trigger.dev/sdk";
import { Supabase } from "@trigger.dev/supabase";

const supabase = new Supabase({
    id: "supabase",
    supabaseUrl: process.env.NEXT_PUBLIC_SUPABASE_URL!,
    supabaseKey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
});

Modify the job within the jobs/functions.ts file to fetch posts that are yet to be published, and whose schedule time matches the current time.

client.defineJob({
    id: "post-schedule",
    name: "Post Schedule",
    //👇🏻 integrate Supabase
    integrations: { supabase },
    version: "0.0.1",
    //👇🏻 runs every minute
    trigger: cronTrigger({
      cron: "* * * * *",
    }),
    run: async (payload, io, ctx) => {
        await io.logger.info("Job started! 🌟");

        const { data, error } = await io.supabase.runTask(
            "find-schedule",
            async (db) => {
                return (await db.from("schedule_posts")
                    .select(`*, users (username, accessToken)`)
                    .eq("published", false)
                    .lt("timestamp", new Date().toISOString()))
            }
        );

        await io.logger.info(JSON.stringify(data))
}
});

The code snippet above uses the foreign key (username) created between the users and the schedule_posts table to perform a join query. This query returns the access token and username from the users table and all the data within schedule_posts.

Finally, iterate through the posts and post its content on X.

      for (let i = 0; i < data?.length; i++) {
            try {
                const postTweet = await fetch("https://api.twitter.com/2/tweets", {
                    method: "POST",
                    headers: {
                        "Content-type": "application/json",
                        Authorization: `Bearer ${data[i].users.accessToken}`,
                    },
                    body: JSON.stringify({ text: data[i].content })
                })
                const getResponse = await postTweet.json()
                await io.logger.info(`${i}`)
                await io.logger.info(`Tweet created successfully!${i} - ${getResponse.data}`)

            } catch (err) {
                await io.logger.error(err)
            }

        }

Congratulations! You have completed the project for this tutorial.

Conclusion

So far, you've learned how to add Twitter (X) authentication to a Next.js application, save data to Supabase, and create recurring tasks with Trigger.dev.

The source for this tutorial is available here:

https://github.com/triggerdotdev/blog/tree/main/x-post-scheduler

Thank you for reading!

Help me out 🩷

If you can spend 10 seconds giving us a star, I would be super grateful 💖
https://github.com/triggerdotdev/trigger.dev

🚀 Achieve NextJS Mastery: Build a Sales Page with Stripe and Airtable 🧙‍♂️🪄✨

Eric Allam — Tue, 03 Oct 2023 11:00:19 +0000

TL;DR

In this tutorial, you'll learn how to build a sales landing page:

Build an entire sales-page with NextJS.
Make payments via Stripe.
Save their details to an Airtable database.

Your background job management for NextJS

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more!

If you can spend 10 seconds giving us a star, I would be super grateful 💖
https://github.com/triggerdotdev/trigger.dev

Let's set it up 🔥

Here, I'll walk you through creating the user interface for the course landing page.

Create a new TypeScript Next.js project by running the code snippet below.

npx create-next-app course-page

Install the React Icons package to enable us to use different kinds of icons within the application.

npm install react-icons --save

The application is divided into two pages: the Home page, representing the course landing page, and the Success page, which is displayed to the user after making a payment.

Home page 🏠

The Home page is divided into five sections - the navigation bar, header, features, purchase, and footer sections.

Update the index.tsx file, as done below. The placeholders represent each section of the landing page.

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });

export default function Home() {
    return (
        <main className={` ${inter.className}`}>
            {/* --- Navigation bar --- */}
            <p>Hello world</p>
            {/* --- Header --- */}

            {/* --- Features Section --- */}

            {/* --- Purchase Now Section--- */}

            {/* --- Footer Section --- */}
        </main>
    );
}

Replace the Navigation bar placeholder with the code snippet below.

<nav className='md:h-[12vh] w-full md:p-8 p-4 flex items-center justify-between border-b-[1px] border-b-gray-200 bg-white sticky top-0 z-20'>
    <h2 className='text-2xl font-bold text-purple-600'>TechGrow</h2>
    <button className='bg-purple-600 hover:bg-purple-800 text-white px-5 py-3 rounded-2xl'>
        Get Started
    </button>
</nav>

Copy the code snippet below into the Header section. You can get the image from its GitHub repository.

<header className='min-h-[88vh] w-full md:px-8 px-4 py-12 flex md:flex-row flex-col items-center justify-between'>
    <div className='md:w-[60%] w-full md:pr-6 md:mb-0 mb-8'>
        <h2 className='font-extrabold text-5xl mb-4'>
            Future-Proof Your Career with Top Digital Skills!
        </h2>
        <p className='opacity-60 mb-4'>
            Unlock your full potential of a future-proof career through the power of
            top digital skills with our all-in-one growth package.
        </p>
        <button className='bg-purple-600 hover:bg-purple-800 w-[200px] text-white px-5 py-3 rounded-2xl text-lg font-semibold'>
            Get Started
        </button>
    </div>
    <div className='md:w-[40%] w-full'>
        <Image src={headerImage} alt='Man smiling' className='rounded-lg' />
    </div>
</header>

The Features Section displays some of the reasons why a customer should purchase the course.

<section className='w-full min-h-[88vh] bg-purple-50 md:px-8 px-4 py-14 '>
    <h2 className='font-extrabold text-3xl text-center mb-4'>Why Choose Us?</h2>
    <p className='opacity-50 text-center'>
        Unlock your full potential of a future-proof career
    </p>
    <p className='opacity-50 mb-14 text-center'>
        that surpasses your expectation.
    </p>
    <div className='flex w-full items-center justify-between md:space-x-6 md:flex-row flex-col'>
        <div className='md:w-1/3 md:mb-0 mb-6 w-full bg-white rounded-xl px-5 py-8 hover:border-[1px] hover:border-purple-600 hover:shadow-md'>
            <div className='rounded-full p-4 bg-purple-50 max-w-max mb-2'>
                <FaChalkboardTeacher className='text-2xl text-purple-800' />
            </div>
            <p className='font-bold text-lg mb-2'>Expert instructors</p>
            <p className='text-sm opacity-50'>
                Learn from industry experts, gaining unique insights which cannot be
                found elsewhere.
            </p>
        </div>
        <div className='md:w-1/3 md:mb-0 mb-6 w-full bg-white rounded-xl px-5 py-8 hover:border-[1px] hover:border-purple-600 hover:shadow-md'>
            <div className='rounded-full p-4 bg-purple-50 max-w-max mb-2'>
                <IoDocumentTextSharp className='text-2xl text-purple-800' />
            </div>
            <p className='font-bold text-lg mb-2'>Hands-On Projects</p>
            <p className='text-sm opacity-50'>
                Learn practical, real-world digital skills through relevant projects and
                interactive sessions.
            </p>
        </div>
        <div className='md:w-1/3 md:mb-0 mb-6 w-full bg-white rounded-xl px-5 py-8 hover:border-[1px] hover:border-purple-600 hover:shadow-md'>
            <div className='rounded-full p-4 bg-purple-50 max-w-max mb-2'>
                <BsFillClockFill className='text-2xl text-purple-800' />
            </div>
            <p className='font-bold text-lg mb-2'>Lifetime Access</p>
            <p className='text-sm opacity-50'>
                Unlimited lifetime access for continuous learning and personal growth.
            </p>
        </div>
    </div>
</section>

Copy the code snippet below into the Purchase Now Section placeholder.

<div className='w-full min-h-[70vh] py-14 md:px-12 px-4 bg-purple-700 flex md:flex-row flex-col items-center justify-between'>
    <div className='md:w-[50%] w-full md:pr-6 md:mb-0 mb-8'>
        <h2 className='font-extrabold text-5xl mb-4 text-purple-50'>
            Start learning and grow your skills today!{" "}
        </h2>
        <p className='mb-4 text-purple-300'>
            Unlock your full potential of a future-proof career through the power of
            top digital skills with our all-in-one growth package.
        </p>
        <div className='mb-6'>
            <div className='flex items-center space-x-3 mb-2'>
                <AiFillCheckCircle className='text-2xl text-green-300' />
                <p className='text-purple-50 text-sm opacity-80'>24/7 availability</p>
            </div>
            <div className='flex items-center space-x-3 mb-2'>
                <AiFillCheckCircle className='text-2xl text-green-300' />
                <p className='text-purple-50 text-sm opacity-80 '>
                    Expert-led tutorials
                </p>
            </div>
            <div className='flex items-center space-x-3 mb-2'>
                <AiFillCheckCircle className='text-2xl text-green-300' />
                <p className='text-purple-50 text-sm opacity-80 '>
                    High-quality contents
                </p>
            </div>
            <div className='flex items-center space-x-3 mb-2'>
                <AiFillCheckCircle className='text-2xl text-green-300' />
                <p className='text-purple-50 text-sm opacity-80 '>
                    Hands-on practical and interactive sessions
                </p>
            </div>
        </div>
        <button className='bg-purple-50 hover:bg-purple-100 w-[200px] text-purple-600 px-5 py-3 rounded-2xl text-lg font-semibold'>
            Purchase Now
        </button>
    </div>
    <div className='md:w-[50%] w-full flex items-center justify-center'>
        <Image src={buy} alt='Man smiling' className='rounded-lg' />
    </div>
</div>

Finally, update the Footer section as done below.

<footer className='w-full flex items-center justify-center min-h-[10vh] bg-white'>
    <p className='text-purple-800 text-sm'>
        Copyright, &copy; {new Date().getFullYear()} All Rights Reserved Tech Grow
    </p>
</footer>

Success 🚀

After a successful payment, users are redirected to the Success page.

Create a success.tsx file and copy the code below into the file.

import React from "react";
import Link from "next/link";

export default function Success() {
    return (
        <div className='w-full min-h-[100vh] flex flex-col items-center justify-center'>
            <h2 className='text-3xl font-bold mb-4'>Payment Sucessful!</h2>
            <Link
                href='/'
                className='bg-purple-50 hover:bg-purple-100 text-purple-600 px-5 py-3 rounded-2xl text-lg font-semibold'
            >
                Go Home
            </Link>
        </div>
    );
}

Congratulations!🎉 You've successfully created the user interface for the application.

Start collecting payments 💰

Stripe is a popular online payment processing platform that enables you to create products and integrate both one-time and recurring payment methods into your application.

Here, I'll walk you through how to create a product on Stripe and how to add the Stripe checkout page to your Next.js application.

First, you need to create a Stripe account. You can use a test mode account for this tutorial.

Select Products from the top menu and click the Add Product button to create a new product. Provide the product name, price, description, and payment option. Select one-time as the payment option.

Create a .env.local file and copy the product ID into the file.

PRODUCT_ID=<YOUR_PRODUCT_ID>

Next, click Developers from the top menu, select API keys, and create a new secret key.

Save the secret key into the .env.local file. It authenticates and enables you to access Stripe from the application.

STRIPE_API_KEY=<YOUR_STRIPE_SECRET_KEY>

Adding Stripe checkout page to Next.js

To do this, install the Stripe Node.js library.

npm install stripe

Create an API endpoint - api/payment within the Next.js application and copy the code below into the file.

//👉🏻  Within the api/payment.ts file
import type { NextApiRequest, NextApiResponse } from "next";
import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_API_KEY!, {} as any);

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const session = await stripe.checkout.sessions.create({
        line_items: [
            {
                price: process.env.PRODUCT_ID,
                quantity: 1,
            },
        ],
        mode: "payment",
        success_url: `http://localhost:3000/success?session_id={CHECKOUT_SESSION_ID}`,
        cancel_url: "http://localhost:3000",
    });

    res.status(200).json({ session: session.url });
}

The code snippet above creates a checkout session for the product and returns the session URL. The session URL is the link where payments for a product are collected, and you need to redirect users to this URL.

Create a function within the index.tsx file that retrieves the session URL from the API endpoint and redirects the user to the page. Execute the function when a user clicks any of the buttons on the web page.

const handlePayment = async () => {
    try {
        const data = await fetch("/api/payment");
        const response = await data.json();
        window.location.assign(response.session);
    } catch (err) {
        console.error(err);
    }
};

Congratulations!🎉 You've successfully added the Stripe checkout page to your application.
In the upcoming sections, you'll learn how to handle payments and save users' details to an Airtable database using Trigger.dev.

Process payments with Trigger.dev

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more! With Trigger.dev, you can automate, schedule, and delay tasks within your codebase and in services like GitHub repositories, Slack channels, etc.

Connect stripe to Trigger.dev ✨

Here, you'll learn how to handle Stripe payments within your application using Trigger.dev webhooks.

Trigger.dev webhooks are user-friendly, managing both the registration and un-registration processes for you. Additionally, if there's an error, it attempts to resend the event until successful.

All you have to do is specify the service and events you want to listen to; Trigger.dev takes care of the configurations.

Adding Trigger.dev to a Next.js app

Before we proceed, you need to create a Trigger.dev account.

Create an organization and project name for your jobs.

Follow the steps provided. Once you've completed them, feel free to move on to the next section of this article.

Otherwise, click Environments & API Keys on the sidebar menu of your project dashboard.

Copy your DEV server API key and run the code snippet below to install Trigger.dev. Follow the instructions carefully.

npx @trigger.dev/cli@latest init

Start your Next.js project.

npm run dev

In another terminal, run the following code snippet to establish a tunnel between Trigger.dev and your Next.js project.

npx @trigger.dev/cli@latest dev

Finally, rename the jobs/examples.ts file to jobs/functions.ts. This is where all the jobs are processed.

Congratulations!🎉 You've successfully added Trigger.dev to your Next.js app.

Listen to stripe successful payments

Install the Stripe package provided by Trigger.dev.

npm install @trigger.dev/stripe@latest

Update the jobs/functions.ts file as shown below.

import { client } from "@/trigger";
import { Stripe } from "@trigger.dev/stripe";

const stripe = new Stripe({
    id: "stripe",
    apiKey: process.env.STRIPE_API_KEY!,
});

client.defineJob({
    //👇🏻 job properties
    id: "save-customer",
    name: "Save Customer Details",
    version: "0.0.1",
    //👇🏻 event trigger
    trigger: stripe.onCheckoutSessionCompleted(),

    run: async (payload, io, ctx) => {
        const { customer_details } = payload;
        await io.logger.info("Getting event from Stripe!🎉");
        //👇🏻 logs customer's details
        await io.logger.info(JSON.stringify(customer_details));

        await io.logger.info("✨ Congratulations, A customer just paid! ✨");
    },
});

The code snippet automatically creates a Stripe webhook that listens for checkout completion events, triggered when a user makes a payment.

After the user makes a payment, their details are logged to the job console on Trigger.dev.

Save the customer information 💾

After retrieving the customer's details from the Stripe webhook, the next step is to save these details to a database. In this section, you will learn how to integrate Airtable into a Next.js app and interact with it using Trigger.dev.

Airtable is an easy-to-use cloud-based software that helps you organize information into customizable tables. It's like a mix between a spreadsheet and a database, allowing you to manage data, tasks, or projects collaboratively in a visually appealing way.

To get started, create an Airtable account and set up a workspace and a base. An Airtable workspace serves as a folder containing multiple databases, known as bases. Each base can contain several tables.

Within the base, create a table containing a Name and Email columns. This is where the customer's name and email retrieved from Stripe will be stored.

Click the Help button on the navigation bar, and select API Documentation.

Scroll through the page, find and copy the base and table ID, and save them into the .env.local file.

AIRTABLE_BASE_ID=<YOUR_AIRTABLE_BASE_ID>
AIRTABLE_TABLE_ID=<YOUR_AIRTABLE_TABLE_ID>

Next, create a personal access token by clicking on your avatar and selecting Developer Hub. Give the token a read-and-write scope.

Save the newly generated token into the .env.local file.

AIRTABLE_TOKEN=<YOUR_PERSONAL_ACCESS_TOKEN>

Then, install the Airtable package provided by Trigger.dev.

npm install @trigger.dev/airtable

Update the jobs/functions.js file to save the user's name and email to Airtable after completing the payment checkout.

import { Airtable } from "@trigger.dev/airtable";
import { client } from "@/trigger";
import { Stripe } from "@trigger.dev/stripe";

// -- 👇🏻 Airtable instance --
const airtable = new Airtable({
    id: "airtable",
    token: process.env.AIRTABLE_TOKEN,
});
// -- 👇🏻 Stripe instance --
const stripe = new Stripe({
    id: "stripe",
    apiKey: process.env.STRIPE_API_KEY!,
});

client.defineJob({
    id: "save-customer",
    name: "Save Customer Details",
    version: "0.0.1",
    // -- 👇🏻 integrates Airtable --
    integrations: { airtable },
    trigger: stripe.onCheckoutSessionCompleted(),

    run: async (payload, io, ctx) => {
        const { customer_details } = payload;
        await io.logger.info("Getting event from Stripe!🎉");
        await io.logger.info(JSON.stringify(customer_details));

        await io.logger.info("Adding data to Airtable🎉");

        // --👇🏻 access the exact table via its ID --
        const table = io.airtable
            .base(process.env.AIRTABLE_BASE_ID!)
            .table(process.env.AIRTABLE_TABLE_ID!);

        // -- 👇🏻 adds a new record to the table --
        await table.createRecords("create records", [
            {
                fields: {
                    Name: customer_details?.name!,
                    Email: customer_details?.email!,
                },
            },
        ]);

        await io.logger.info("✨ Congratulations, New customer added! ✨");
    },
});

The code snippet above integrates Airtable to Trigger.dev, access the table, and it with the customer's name and email.

Congratulations! You have completed the project for this tutorial.

Conclusion

So far, you've learned how to

add a Stripe checkout page to your Next.js app,
handle payments with Trigger.dev, and
save data to Airtable via Trigger.dev.

The source for this tutorial is available here: https://github.com/triggerdotdev/blog/tree/main/sales-page

Thank your for reading!

🧞‍♂️ Generator unlocked: Create memes with ChatGPT and NextJS 🚀 💥

Eric Allam — Mon, 18 Sep 2023 13:00:42 +0000

TL;DR

In this tutorial, you'll learn how to build a meme generator in Next.js. We will be using:

Trigger.dev for handling the meme's creation in the background.
Supabase for storing and saving the memes
Resend for sending the generated meme to the user.

Your background job management for NextJS

Trigger.dev is an open-source library that enables you to create and monitor long-running jobs for your app with NextJS, Remix, Astro, and so many more!

If you can spend 10 seconds giving us a star, I would be super grateful 💖
https://github.com/triggerdotdev/trigger.dev

Let's set it up 🔥

Here, I'll walk you through creating the user interface for the meme generator application.

Create a new Next.js project by running the code snippet below.

npx create-next-app memes-generator

First, you need to create a homepage displaying a form that enables users to enter the meme audience and topic. You can also add another field for the user's email address to receive the meme once it is ready.
Below the form, users should be able to view the recently generated memes, as shown below.

When the user submits the form, they will be redirected to a submission page while the application generates the meme in the background and sends it to the user's email.

Home page 🏠

Before we proceed, run the code snippet below to install the React Tag Input package. It enables us to provide multiple inputs for a value.

npm install react-tag-input

Copy the code snippet below into the index.js file.

"use client";
import { Space_Grotesk } from "next/font/google";
import { useState } from "react";
import { WithContext as ReactTags } from "react-tag-input";
import { useRouter } from "next/navigation";
import ViewMemes from "@/components/ViewMemes";

const KeyCodes = {
  comma: 188,
  enter: 13,
};
const inter = Space_Grotesk({ subsets: ["latin"] });
const delimiters = [KeyCodes.comma, KeyCodes.enter];

export default function Home() {
  const [audience, setAudience] = useState("");
  const [email, setEmail] = useState("");
  const [memes, setMemes] = useState([]);
  const router = useRouter();
  const [topics, setTopics] = useState([
    { id: "Developers", text: "Developers" },
  ]);

  const handleDelete = (i) =>
    setTopics(topics.filter((topic, index) => index !== i));

  const handleAddition = (topic) => setTopics([...topics, topic]);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({
      audience,
      topics,
      email,
    });
    router.push("/submit");
  };

  return (
    <main className={`w-full min-h-screen ${inter.className}`}>
      <header className="bg-[#F8F0E5] min-h-[95vh] flex items-center justify-center flex-col">
        <h2 className="text-4xl font-bold mb-2 text-[#0F2C59]">Meme Magic</h2>
        <h3 className="text-lg opacity-60 mb-8">
          Creating memes with a touch of magic
        </h3>
        <form
          className="flex flex-col md:w-[70%] w-[95%]"
          onSubmit={handleSubmit}
        >
          <label htmlFor="audience">Audience</label>
          <input
            type="text"
            name="audience"
            value={audience}
            required
            className="px-4 py-2 rounded mb-4"
            onChange={(e) => setAudience(e.target.value)}
          />
          <label htmlFor="email">Your email address</label>
          <input
            type="email"
            name="email"
            value={email}
            required
            className="px-4 py-2 rounded mb-4"
            onChange={(e) => setEmail(e.target.value)}
          />

          <ReactTags
            tags={topics}
            delimiters={delimiters}
            handleDelete={handleDelete}
            handleAddition={handleAddition}
            inputFieldPosition="top"
            autocomplete
            placeholder="Enter a topic for the meme and press enter"
          />
          <button
            type="submit"
            className="bg-[#0F2C59] text-[#fff] mt-[30px] py-4 rounded text-lg font-bold hover:bg-[#151d2b]"
          >
            GENERATE MEME
          </button>
        </form>
      </header>
      <ViewMemes memes={memes} />
    </main>
  );
}

The code snippet creates input fields that enable users to enter the email, audience, and topic of the meme to be generated. The <ReactTags> component allows us to enter multiple values as the meme topic.

Next, create a components folder containing the ViewMemes.jsx file, where all the recently generated memes are displayed.

import React from "react";
import Image from "next/image";

const ViewMemes = ({ memes }) => {
  return (
    <section className="h-[100vh] px-4 py-10 flex items-center flex-col">
      <h2 className="text-3xl font-bold mb-8">Recent Memes</h2>
      <div className="w-full flex flex-wrap md:space-x-4">
        {memes.map((meme) => (
          <div
            className="md:w-[30%] w-full m-2 flex flex-col items-center"
            key={meme.id}
          >
            <Image
              src={`${meme.meme_url}`}
              alt={meme.name}
              className="hover:scale-105 rounded"
              width={400}
              height={400}
            />
          </div>
        ))}
      </div>
    </section>
  );
};

export default ViewMemes;

Meme submission 🐤

Create a submit.js file that displays a "Thank You" message to the user after submitting the form.

import Link from "next/link";
import React from "react";

export default function Submit() {
  return (
    <div className="w-full h-screen flex flex-col items-center justify-center">
      <h2 className="font-extrabold text-4xl mb-4 text-[#DAC0A3]">
        Thank You!
      </h2>
      <p className="mb-6">
        Your newly generated meme has been sent to your email.
      </p>
      <Link href="/">
        <p className="text-[#662549]">Go Home</p>
      </Link>
    </div>
  );
}

Generate memes in the background 🐥

In this section, I will walk you through adding Trigger.dev to a Next.js project. First, you need to visit the Trigger.dev homepage and create a new account.

Next, create an organization and project name for your jobs.

Lastly, follow the steps shown to you.

If this is not your initial Trigger.dev project, follow the steps below.
Click Environments & API Keys on the sidebar menu of your project dashboard.

Copy your DEV server API key and run the code snippet below to install Trigger.dev. Follow the instructions carefully.

npx @trigger.dev/cli@latest init

Start your Next.js project.

npm run dev

Also, in another terminal, run the code snippet below to create a tunnel between the Trigger.dev and your Next.js project.

npx @trigger.dev/cli@latest dev

Finally, rename the jobs/examples.js file to jobs/functions.js. This is where all the jobs are processed.

Congratulations!🎉 You've successfully added Trigger.dev to your Next.js app.

How to generate meme templates and captions with OpenAI and ImgFlip

In this section, you'll learn how to fetch meme templates from ImgFlip and generate meme captions from OpenAI via Trigger.dev.

Before we proceed, update the index.js file to send the user's input to the server.

//👇🏻 runs when a user submits the form
const handleSubmit = (e) => {
  e.preventDefault();
  if (topics.length > 0) {
    let topic = "";
    topics.forEach((tag) => {
      topic += tag.text + ", ";
    });
    //👇🏻 sends the data to the backend
    postData(topic);
    router.push("/submit");
  }
};

//👇🏻 sends the data to the backend server
const postData = async (topic) => {
  try {
    const data = await fetch("/api/api", {
      method: "POST",
      body: JSON.stringify({
        audience,
        topic,
        email,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    });
    const response = await data.json();
    console.log(response);
  } catch (err) {
    console.error(err);
  }
};

The postData function sends the user's input to the /api/api endpoint on the server when the user submits the form.

Next, create an api.js file within the api folder that accepts the user's data.

export default function handler(req, res) {
  const { topic, audience, email } = req.body;

  if (topic && audience && email) {
    console.log({ audience, topic, email });
  }
  res.status(200).json({ message: "Successful" });
}

Meme background job 👨🏻‍🔧

There are three ways of communicating via Trigger which are webhook, schedule, and event. Webhook triggers a job in real-time when specific events occur, Schedule works for repeating tasks, and Events trigger a job when you send a payload.

Here, I'll guide you through using Event triggers to execute jobs in the application.

Within the jobs/functions.js file, update the client.defineJob function as done below.

client.defineJob({
  id: "generate-meme",
  name: "Generate Meme",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "generate.meme",
  }),
  run: async (payload, io, ctx) => {
    const { audience, topic, email } = payload;
    // This logs a message to the console and adds an entry to the run dashboard
    await io.logger.info("Meme request received!✅");
    await io.logger.info("Meme generation in progress 🤝");

    // Wrap your code in io.runTask to get automatic error handling and logging
    const selectedTemplate = await io.runTask("fetch-meme", async () => {
      const fetchAllMeme = await fetch("https://api.imgflip.com/get_memes");
      const memesData = await fetchAllMeme.json();
      const memes = memesData.data.memes;

      const randInt = Math.floor(Math.random() * 101);

      return memes[randInt];
    });

    const userPrompt = `Topics: ${topic} \n Intended Audience: ${audience} \n Template: ${selectedTemplate.name} \n`;

    const sysPrompt = `You are a meme idea generator. You will use the imgflip api to generate a meme based on an idea you suggest. Given a random template name and topics, generate a meme idea for the intended audience. Only use the template provided.`;

    await io.logger.info("✨ Yay! You've gotten a template for the meme ✨", {
      userPrompt,
      sysPrompt,
      selectedTemplate,
      email,
    });
  },
});

The code snippet above creates a new job that fetches a random meme template from ImgFlip, creates a user, and a system prompt for OpenAI to generate a meme caption based on the data provided by the user.

To trigger this job, update the /api/api.js file to send the user's data as a payload to the job.

import { client } from "@/trigger";

export default function handler(req, res) {
  const { topic, audience, email } = req.body;
  try {
    async function fetchMeme() {
      if (topic && audience && email) {
        await client.sendEvent({
          name: "generate.meme",
          payload: {
            audience,
            topic,
            email,
          },
        });
      }
    }
    fetchMeme();
  } catch (err) {
    return res.status(400).json({ message: err });
  }
}

The code snippet above triggers the job via its name - generate.meme and sends the audience, topic, and the user's email as a payload to the job.

Once this is successful, you should see the status of the job on your Trigger.dev dashboard and monitor its activity.

Trigger.dev also allows us to nest jobs within jobs; that is, you can trigger another job within a job. This makes it possible for you to trigger a job that will execute all the nested jobs within itself.

In the previous job, we logged the data retrieved to the console; Next, let's trigger another job within the job.

client.defineJob({
  id: "generate-meme",
  name: "Generate Meme",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "generate.meme",
  }),
  run: async (payload, io, ctx) => {
    const { audience, topic, email } = payload;
    // This logs a message to the console and adds an entry to the run dashboard
    await io.logger.info("Meme request received!✅");
    await io.logger.info("Meme generation in progress 🤝");

    // Wrap your code in io.runTask to get automatic error handling and logging
    const selectedTemplate = await io.runTask("fetch-meme", async () => {
      const fetchAllMeme = await fetch("https://api.imgflip.com/get_memes");
      const memesData = await fetchAllMeme.json();
      const memes = memesData.data.memes;

      const randInt = Math.floor(Math.random() * 101);

      return memes[randInt];
    });

    const userPrompt = `Topics: ${topic} \n Intended Audience: ${audience} \n Template: ${selectedTemplate.name} \n`;

    const sysPrompt = `You are a meme idea generator. You will use the imgflip api to generate a meme based on an idea you suggest. Given a random template name and topics, generate a meme idea for the intended audience. Only use the template provided.`;

    // Trigger any job listening for the gpt.text event
    await io.sendEvent("generate-gpt-text", {
      name: "gpt.text",
      payload: {
        userPrompt,
        sysPrompt,
        selectedTemplate,
        email,
      },
    });
  },
});

The code snippet above sends the data retrieved from the job as a payload to an event - where you can generate the meme caption. Each event has a unique name, and any job that is triggered by an event with a matching name will be run. You can send events using the io.sendEvent method.

Now that we are selecting a template and generate prompts, we can implement the job for generating meme text by listening for the gpt.text event.

Generate the meme text with ChatGPT 🤖

Here, you'll learn how to communicate with OpenAI using the Trigger.dev OpenAI integration. We'll use function calls for generating captions for the meme templates. Before we proceed, create an OpenAI account and generate an API Key.

Click View API key from the dropdown to create an API Key.

Next, install the OpenAI package by running the code snippet below.

npm install @trigger.dev/openai

Add your OpenAI API key to the .env.local file.

OPENAI_API_KEY=<your_api_key>

Import the OpenAI package into the jobs/functions.js file.

import { OpenAI } from "@trigger.dev/openai";

const openai = new OpenAI({ id: "openai", apiKey: process.env.OPENAI_API_KEY });

Finally, create the job that generates the meme captions via OpenAI function call.

client.defineJob({
  id: "chatgpt-meme-text",
  name: "ChatGPT Meme Text",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "gpt.text",
  }),
  run: async (payload, io, ctx) => {
    const { userPrompt, sysPrompt, selectedTemplate, email } = payload;
    await io.logger.info("✨ Talking to ChatGPT 🫂");
    const messages = [
      { role: "system", content: sysPrompt },
      { role: "user", content: userPrompt },
    ];
    const functions = [
      {
        name: "generateMemeImage",
        description:
          "Generate meme via the imgflip API based on the given idea",
        parameters: {
          type: "object",
          properties: {
            text0: {
              type: "string",
              description: "The text for the top caption of the meme",
            },
            text1: {
              type: "string",
              description: "The text for the bottom caption of the meme",
            },
          },
          required: ["templateName", "text0", "text1"],
        },
      },
    ];
    const response = await openai.chat.completions.create("create-meme", {
      model: "gpt-3.5-turbo",
      messages,
      functions,
      function_call: "auto",
    });

    const responseMessage = response.choices[0];
    const texts = extractSentencesInQuotes(responseMessage.message.content);

    await io.logger.info("✨ Yay! You've gotten a text for your meme ✨", {
      texts,
    });

    await io.sendEvent("caption-save-meme", {
      name: "caption.save.meme",
      payload: {
        texts: ["Text0", "Text1"],
        selectedTemplate,
        email,
      },
    });
  },
});

The code snippet above generates a caption for the meme via the OpenAI function calling feature, extracts the caption, and passes it as a payload to another job. The payload contains the caption, selected meme template, and the user's email.

The extractSentencesInQuotes function retrieves the caption from the data returned by OpenAI.

const extractSentencesInQuotes = (inputString) => {
  const sentenceRegex = /"([^"]+)"/g;
  const sentences = [];
  let match;
  while ((match = sentenceRegex.exec(inputString))) {
    sentences.push(match[1]);
  }
  return sentences;
};

So far, we've been able to select a meme template from ImgFlip and generate the meme caption via OpenAI. In the upcoming sections, you'll learn how to add the caption to the meme templates.

Set the memes title 📝

ImgFlip API provides a /caption_image endpoint that accepts required parameters, such as template ID, username, password, and the captions - text0and text1. Text0 is the Top text for the meme, and Text1 is the Bottom text for the meme.

Create an account on ImgFlip, and save your username and password into the .env.local file.

IMGFLIP_USERNAME=<your_username>
IMGFLIP_PW=<your_password>

Add a new job to the jobs/functions.js file that adds a caption to the meme and saves it to Supabase.

client.defineJob({
  id: "caption-save-meme",
  name: "Caption and Save Meme",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "caption.save.meme",
  }),
  run: async (payload, io, ctx) => {
    const { texts, selectedTemplate, email } = payload;

    await io.logger.info("Received meme template and texts 🎉");

    const formatData = new URLSearchParams({
      template_id: selectedTemplate.id,
      username: process.env.IMGFLIP_USERNAME,
      password: process.env.IMGFLIP_PW,
      text0: texts[0],
      text1: texts[1],
    });

    const captionedMeme = await io.runTask("caption-meme", async () => {
      const response = await fetch("https://api.imgflip.com/caption_image", {
        method: "POST",
        body: formatData.toString(),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      });
      return await response.json();
    });

    await io.logger.info("✨ Yay! Your meme has been captioned! ✨", {
      captionedMeme,
    });
  },
});

The code snippet above accepts the required parameters and sends them to the endpoint provided by ImgFlip. The endpoint receives the meme ID, caption text, and user's credentials in a URL-encoded format.

In the upcoming section, you'll learn how to save the captioned meme to Supabase.

Save the memes and display them 💾

In this section, I'll guide you through setting up and interacting with a Supabase backend from a Next.js app.

Visit the Supabase homepage and create a new organization and project.

Next, create a new table containing the following columns, as shown below, and add some dummy data to the database table.

The table stores the id,name, and meme_url properties received from the application. The created_at is auto-generated and saves the data timestamp.

Run the code snippet below to install the Supabase package into Next.js.

npm install @supabase/supabase-js

Click API on the sidebar menu and copy the project's URL and API into the .env.local file.

NEXT_PUBLIC_SUPABASE_URL=<public_supabase_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<supabase_anon_key>

Finally, create a src/supbaseClient.js file and create the Supabase client for the application.

import { createClient } from "@supabase/supabase-js";

const supabaseURL = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseURL, supabaseAnonKey, {
  auth: { persistSession: false },
});

Congratulations!🎉 You've successfully added Supabase to the Next.js application.

Fetching all the available memes

Create an api/all-memes endpoint on the Next.js server that retrieves all the memes from Supabase.

import { supabase } from "@/supabaseClient";

export default function handler(req, res) {
  const fetchMemes = async () => {
    try {
      const { data, error } = await supabase
        .from("memes")
        .select("*")
        .order("created_at", { ascending: false });
      res.status(200).json({ data });
    } catch (err) {
      res.status(400).json({ error: err });
    }
  };
  fetchMemes();
}

Then, send a request to the endpoint when a user visits the application's homepage.

useEffect(() => {
  fetchMemes();
}, []);

const fetchMemes = async () => {
  try {
    const request = await fetch("/api/all-memes");
    const response = await request.json();
    setMemes(response.data);
  } catch (err) {
    console.error(err);
  }
};

Saving the memes to Supabase

Import Supabase from the @/supabaseClient file into the @/jobs/functions.js file.

import { supabase } from "@/supabaseClient";

Update the recently added job to save the meme to Supabase.

client.defineJob({
  id: "caption-save-meme",
  name: "Caption and Save Meme",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "caption.save.meme",
  }),
  run: async (payload, io, ctx) => {
    const { texts, selectedTemplate, email } = payload;

    await io.logger.info("Received meme template and texts 🎉");

    const formatData = new URLSearchParams({
      template_id: selectedTemplate.id,
      username: process.env.IMGFLIP_USERNAME,
      password: process.env.IMGFLIP_PW,
      text0: texts[0],
      text1: texts[1],
    });

    const captionedMeme = await io.runTask("caption-meme", async () => {
      const response = await fetch("https://api.imgflip.com/caption_image", {
        method: "POST",
        body: formatData.toString(),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      });
      return await response.json();
    });

    await io.logger.info("✨ Yay! Your meme has been captioned! ✨", {
      captionedMeme,
    });

    await supabase.from("memes").insert({
      id: selectedTemplate.id,
      name: selectedTemplate.name,
      meme_url: captionedMeme.data.url,
    });

    await io.sendEvent("email-meme", {
      name: "send.meme",
      payload: {
        email,
        meme_url: `http://localhost:3000/memes/${selectedTemplate.id}`,
      },
    });

    await io.logger.info(
      "✨ Yay! Your meme has been saved to the database! ✨"
    );
  },
});

The code snippet above adds a caption to the meme template and saves the newly created meme to Supabase. It also triggers another job, which sends the meme page URL to the user's email. You'll learn how to do this in the upcoming section.

Send email on completion 🎬

Resend is an email API that enables you to send texts, attachments, and email templates easily. With Resend, you can build, test, and deliver transactional emails at scale.

Here, you'll learn how to send emails via Resend. Go to the Signup page and create an account.

Create an API Key and save it into a .env.local file within your Next.js project.

RESEND_API_KEY=<place_your_API_key>

Install the Trigger.dev Resend integration:

npm i @trigger.dev/resend

Import Resend into the @/jobs/functions.js file as shown below.

import { Resend } from "@trigger.dev/resend";
const resend = new Resend({ id: "resend", apiKey: process.env.RESEND_API_KEY });

Add a final job that receives the meme URL and user's email from the previous job and sends the newly generated meme to the user upon completion.

client.defineJob({
  id: "send-meme",
  name: "Send Meme",
  version: "0.0.1",
  trigger: eventTrigger({
    name: "send.meme",
  }),
  run: async (payload, io, ctx) => {
    const { meme_url, email } = payload;

    await io.logger.info("Sending meme to the user 🎉");

    await resend.sendEmail("📧", {
      from: "onboarding@resend.dev",
      to: [email],
      subject: "Your meme is ready!",
      text: `Hey there, Your meme is ready.\n Access it here: ${meme_url}`,
    });

    await io.logger.info("✨ Yay! Your meme has been emailed to the user! ✨");
  },
});

The user receives an email containing a link in this format: http://localhost:3000/memes/${meme.id}. This link redirects the user to a specific page in the application that displays the meme. We will create this page in the upcoming section.

Displaying the newly generated meme

Create a memes/[id].js file that accepts the meme ID from the URL, get the meme from Supabase via its ID, and displays the meme on the page.

Copy the code snippet below into the memes/[id].js file.

"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { usePathname } from "next/navigation";
import Link from "next/link";

export default function Meme() {
  const params = usePathname();
  const [meme, setMeme] = useState({});

  useEffect(() => {
    const fetchMeme = async () => {
      if (params) {
        const id = params.split("/")[2];
        const request = await fetch("/api/meme", {
          method: "POST",
          body: JSON.stringify({ id }),
          headers: {
            "Content-Type": "application/json",
          },
        });
        const response = await request.json();
        setMeme(response.data[0]);
      }
    };

    fetchMeme();
  }, [params]);

  return (
    <div className="w-full min-h-screen flex flex-col items-center justify-center">
      {meme?.meme_url && (
        <Image
          src={meme.meme_url}
          alt={meme.name}
          className="hover:scale-105 rounded"
          width={500}
          height={500}
        />
      )}

      <Link href="/" className="mt-6 text-blue-500">
        Go back home
      </Link>
    </div>
  );
}

The code snippet above retrieves the meme ID from the URL, sends it to the server via the /api/meme endpoint, and receives the meme details as a response.

Next, create the /api/meme endpoint.

import { supabase } from "@/supabaseClient";

export default function handler(req, res) {
  const getMeme = async () => {
    const { id } = req.body;
    try {
      const { data, error } = await supabase
        .from("memes")
        .select("*")
        .eq("id", parseInt(id));
      res.status(200).json({ data });
    } catch (err) {
      res.status(400).json({ error: err });
    }
  };
  getMeme();
}

The code snippet above fetches the data whose property matches the ID from Supabase.

Congratulations! You've completed the project.

Conclusion

So far, you've learnt how to create jobs within your codebase with Trigger, generate texts from OpenAI, save and retrieve data from Supabase, and send emails via Resend.

The source code for this tutorial is available here:
https://github.com/triggerdotdev/blog/tree/main/memes-generator

Thank you for reading!

If you can spend 10 seconds giving us a star, I would be super grateful 💖
https://github.com/triggerdotdev/trigger.dev

DEV Community: Eric Allam

We ditched worktrees for Claude Code. Here's what we use instead

What worktrees get right

The local dev problem

GitButler: multiple branches, one working directory

Teaching Claude Code to use GitButler

The skill in detail

The non-negotiable rules

The CLI IDs

The absorb trick

The workflow

1. Set up GitButler (once)

2. Add the skill to your project

3. Work normally

4. Review and push

Why not hooks?

The but CLI

When worktrees still make sense

How I use this at Trigger.dev

Getting started

The bigger picture

How we tamed Node.js event loop lag: a deepdive

The discovery

The issue returns

Event loop lag: a primer

Monitoring event loop lag

Event loop lag whack-a-mole

Next steps and takeaways

Addendum: serverless and event loop lag

Background jobs

🧙‍♂️ Generate blogs with ChatGPT assistant 🪄 ✨

TL;DR

Your background job platform 🔌

Recap from the last time ⏰

A slight modification ⚙️

Docusaurus 🦖

Generating blogs 📨

The frontend 🎩

Let's connect! 🔌

✨ Train ChatGPT on your Documentation 🪄 ✨

TL;DR

Your background job platform 🔌

Let’s get started 🔥

Scrape & Index

Create a Trigger.dev account

Install ChatGPT (OpenAI)

Building the background jobs

Question the assistant

Add routing

Creating the Frontend

The main page

Chat interface

Let's connect! 🔌

🚀 Top 4 ways to send notifications about new stars ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️

TL;DR

Your background job platform 🔌

Let’s set it up 🔥

Modify TriggerDev jobs

1. Discord

2. Slack

3. Email

4. SMS

Create new providers

Let's connect! 🔌

🔥 Take NextJS to the next level: Create a GitHub stars monitor 🤯

Your background job platform 🔌

Here is what you need to know 😻

Let’s set it up 🔥

Application UI Skeleton 💀

Counting stars

Main page population 💽

Show Charts! 📈

But what about new stars? Meet Trigger.Dev!

Let's connect! 🔌

🚀Creating a resume builder with NextJS, Trigger.dev and GPT4🔥✨

TL;DR

Your background job platform 🔌

Let's set it up 🔥

The easiest way to build forms

Parse the HTTP request

The `but` CLI