​
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.

​
GitHub repo

View the Realtime CSV Importer 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 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 for more information on how to use the metadata.parent object.
  • The useRealtimeCSVValidator hook in the 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 file handles the file upload and displays the progress bar, and uses the useRealtimeCSVValidator hook to get the progress updates.

​
Learn more about Trigger.dev Realtime

To learn more, take a look at the following resources: