Assets repository: https://github.com/kliton-yt/scrape-flow-assets
Full Source Code ( for supporters ⭐️): https://dub.sh/scrapeflow

⭐️ Clerk: https://go.clerk.com/8Ws7303
⭐️ BrightData: https://brdta.com/codewithkliton

Discord server for problems/help: https://discord.gg/Gc3ShuJrYE

💼 Business Inquiries: work@klitonbare.com

Time Stamps 👇
00:00:00 Intro
00:04:24 Project setup
00:31:10 Auth setup
00:37:28 Database setup
00:45:14 Workflows page
01:21:05 Workflow card
01:32:12 Delete workflow dialog
01:41:05 Workflow introduction
01:43:48 Workflow editor
01:43:48 Workflow editor
01:58:19 Extract text from element task
02:04:16 Node component
02:20:54 Task/Node inputs
02:41:00 Save button
03:03:22 Task menu
03:14:25 Task/Node outputs
03:27:33 Deletable edge
03:27:33 Deletable edge
03:34:57 Extract text from element task
03:38:09 Connections validation
03:59:00 Delete/Duplicate task
04:03:04 Workflow type
04:11:00 Workflow execution part 1
04:29:48 Workflow validation/execution
05:30:20 Workflow execution viewer
06:08:38 Workflow execution part 2
06:12:24 Execution environment
06:16:48 Workflow execution part 3
07:36:43 Log collector
07:55:10 Workflow execution viewer part 2
08:24:13 User balance
08:33:32 Workflow execution part 4: credit consumption
08:43:30 Executions history page
09:15:52 Workflow publishing
09:30:50 Workflow unpublishing
09:30:50 Workflow unpublishing
09:40:33 Execution scheduler
10:50:18 Duplicate workflow button
11:00:00 Real world scraper implementation
11:02:32 Fill input task
11:10:50 Click element task
11:15:26 Wait for element task
11:28:50 Fix phase details
11:30:54 Deliver via webhook task
11:39:38 Credentials system
12:14:04 Extract data with AI task
12:33:56 Read property from Json task
12:41:16 Add property to Json task
12:46:58 Navigate to Url task
12:51:02 Scroll to element task
12:57:26 Bypass scraping protections
13:07:22 Home page
14:01:41 Fix dark theme editor
14:02:39 User account setup
14:08:46 Billing page part 1 
14:23:51 Stripe integration
14:48:20 Billing page part 2
15:05:50 End

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

This post provides a detailed video tutorial on building a full-stack SaaS platform called ScrapeFlow with a variety of technologies, including Next.js, React, TypeScript, React-Flow, Prisma, and ReactQuery. The platform allows users to visually create, modify, and execute web scraping workflows powered by AI. Key features include a credential system, workflow scheduling, stripe integration for billing, and more. The tutorial also covers how to handle workflow validation, execution monitoring, secure storage of sensitive information, and setting up a responsive UI.

Full stack SaaS ScrapeFlow: NextJs course with React, Typescript , React-Flow, Prisma, ReactQuery