diff --git a/docs/guides/example-projects/batch-llm-evaluator.mdx b/docs/guides/example-projects/batch-llm-evaluator.mdx index bd0d984b9..c214e8072 100644 --- a/docs/guides/example-projects/batch-llm-evaluator.mdx +++ b/docs/guides/example-projects/batch-llm-evaluator.mdx @@ -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"; diff --git a/docs/guides/example-projects/realtime-csv-importer.mdx b/docs/guides/example-projects/realtime-csv-importer.mdx new file mode 100644 index 000000000..856f1cadf --- /dev/null +++ b/docs/guides/example-projects/realtime-csv-importer.mdx @@ -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 + + + 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. + + +## 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. + + diff --git a/docs/guides/example-projects/realtime-fal-ai.mdx b/docs/guides/example-projects/realtime-fal-ai.mdx index e3b7c4c46..76953fd3c 100644 --- a/docs/guides/example-projects/realtime-fal-ai.mdx +++ b/docs/guides/example-projects/realtime-fal-ai.mdx @@ -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"; diff --git a/docs/guides/introduction.mdx b/docs/guides/introduction.mdx index 9676f89ba..159f301f6 100644 --- a/docs/guides/introduction.mdx +++ b/docs/guides/introduction.mdx @@ -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 diff --git a/docs/mint.json b/docs/mint.json index e99038737..ac16b678e 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -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" ] }, {