Skip to content

Commit

Permalink
Added Realtime CSV importer to the docs
Browse files Browse the repository at this point in the history
  • Loading branch information
D-K-P committed Jan 9, 2025
1 parent efd61f1 commit 51a054f
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 5 deletions.
4 changes: 2 additions & 2 deletions docs/guides/example-projects/batch-llm-evaluator.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Batch LLM Evaluator"
title: "Next.js Batch LLM Evaluator"
sidebarTitle: "Batch LLM Evaluator"
description: "This example project evaluates multiple LLM models using the Vercel AI SDK and streams updates to the frontend using Trigger.dev Realtime."
description: "This example Next.js project evaluates multiple LLM models using the Vercel AI SDK and streams updates to the frontend using Trigger.dev Realtime."
---

import RealtimeLearnMore from "/snippets/realtime-learn-more.mdx";
Expand Down
44 changes: 44 additions & 0 deletions docs/guides/example-projects/realtime-csv-importer.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
title: "Next.js Realtime CSV Importer"
sidebarTitle: "Realtime CSV Importer"
description: "This example Next.js project demonstrates how to use Trigger.dev Realtime to build a CSV Uploader with progress updates streamed to the frontend."
---

import RealtimeLearnMore from "/snippets/realtime-learn-more.mdx";

## Overview

The frontend is a Next.js app that allows users to upload a CSV file, which is then processed in the background using Trigger.dev tasks. The progress of the task is streamed back to the frontend in real-time using Trigger.dev Realtime.

- A [Next.js](https://nextjs.org/) app with [Trigger.dev](https://trigger.dev/) for the background tasks.
- [UploadThing](https://uploadthing.com/) to handle CSV file uploads
- Trigger.dev [Realtime](https://trigger.dev/launchweek/0/realtime) to stream updates to the frontend.

## GitHub repo

<Card
title="View the Realtime CSV Importer repo"
icon="GitHub"
href="https://github.com/triggerdotdev/examples/blob/main/realtime-csv-importer/README.md"
>
Click here to view the full code for this project in our examples repository on GitHub. You can
fork it and use it as a starting point for your own project.
</Card>

## Video

<video
controls
className="w-full aspect-video"
src="https://github.com/user-attachments/assets/25160343-6663-452c-8a27-819c3fd7b8df"
></video>

## Relevant code

- View the Trigger.dev task code in the [src/trigger/csv.ts](https://github.com/triggerdotdev/examples/blob/main/realtime-csv-importer/src/trigger/csv.ts) file.
- The parent task `csvValidator` downloads the CSV file, parses it, and then splits the rows into multiple batches. It then does a `batch.triggerAndWait` to distribute the work the `handleCSVRow` task.
- The `handleCSVRow` task "simulates" checking the row for a valid email address and then updates the progress of the parent task using `metadata.parent`. See the [Trigger.dev docs](/runs/metadata#parent-and-root-updates) for more information on how to use the `metadata.parent` object.
- The `useRealtimeCSVValidator` hook in the [src/hooks/useRealtimeCSVValidator.ts](https://github.com/triggerdotdev/examples/blob/main/realtime-csv-importer/src/hooks/useRealtimeCSVValidator.ts) file handles the call to `useRealtimeRun` to get the progress of the parent task.
- The `CSVProcessor` component in the [src/components/CSVProcessor.tsx](https://github.com/triggerdotdev/examples/blob/main/realtime-csv-importer/src/components/CSVProcessor.tsx) file handles the file upload and displays the progress bar, and uses the `useRealtimeCSVValidator` hook to get the progress updates.

<RealtimeLearnMore />
4 changes: 2 additions & 2 deletions docs/guides/example-projects/realtime-fal-ai.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: "Generate an image from a prompt using Fal.ai and Trigger.dev Realtime"
title: "Image generation with Fal.ai and Trigger.dev Realtime"
sidebarTitle: "Realtime image gen with Fal.ai"
description: "This example project generates an image from a prompt using Fal.ai and shows the progress of the task on the frontend using Trigger.dev Realtime."
description: "This example Next.js project generates an image from a prompt using Fal.ai and shows the progress of the task on the frontend using Trigger.dev Realtime."
---

import RealtimeLearnMore from "/snippets/realtime-learn-more.mdx";
Expand Down
1 change: 1 addition & 0 deletions docs/guides/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ Example projects are full projects with example repos you can fork and use. Thes
| :--------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :---------------------------------------------------------------------------------------------------- |
| [Realtime Fal.ai image generation](/guides/example-projects/realtime-fal-ai) | Generate an image from a prompt using Fal.ai and show the progress of the task on the frontend using Realtime. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation) |
| [Batch LLM Evaluator](/guides/example-projects/batch-llm-evaluator) | Evaluate multiple LLM models and stream the results to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/batch-llm-evaluator) |
| [Realtime CSV Importer](/guides/example-projects/realtime-csv-importer) | Upload a CSV file and see the progress of the task streamed to the frontend. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-csv-importer) |

## Example tasks

Expand Down
3 changes: 2 additions & 1 deletion docs/mint.json
Original file line number Diff line number Diff line change
Expand Up @@ -350,7 +350,8 @@
"group": "Example projects",
"pages": [
"guides/example-projects/realtime-fal-ai",
"guides/example-projects/batch-llm-evaluator"
"guides/example-projects/batch-llm-evaluator",
"guides/example-projects/realtime-csv-importer"
]
},
{
Expand Down

0 comments on commit 51a054f

Please sign in to comment.