Build a React dashboard for any database backend (full tutorial)

Subscribe: https://lwj.dev/newsletter — Build an internal dashboard to view and moderate comments in this full tutorial. Plus, learn how to use OpenAI to automatically flag the worst comments.

- source code: https://github.com/learnwithjason/airplane-content-moderation
- written tutorial: https://lwj.dev/blog/comment-moderation-ai-airplane

Thanks to Airplane.dev for sponsoring this video. Check it out to learn how you can build internal tools for your team faster than you can explain the copy-pasted queries your team is currently running in production: https://airplane.dev

Chapters:
00:00 What are we building?
00:10 Why it matters to learn this
00:26 Airplane lets your team build internal tools fast
00:43 Project scope and tools
01:02 Get set up with Airplane
01:21 Local dev setup
01:55 Overview of Airplane studio
02:44 Create your first task (reset the comments database)
03:32 How UI changes show up in code
03:54 Running tasks via UI
04:09 Create a task to list all comments
04:38 Create tasks to view flagged and approved comments
04:58 Build views (dashboards) in Airplane
05:27 The component library for building internal tools
05:50 How custom view code works
06:41 Show approved comments with task backed tables
07:27 Show flagged comments
07:37 Add a checkbox to toggle visibility of flagged comments
08:41 Add tasks to allow flagging, approving, and deleting comments
09:56 Testing the tasks
10:37 Reset the database whenever you want
10:49 Add inline moderation with task backed row actions
12:36 Refetch data when it changes elsewhere
13:38 Add new comments with a TypeScript task
15:16 Why moderation is so important (and why it's so hard)
16:14 Be aware of the ethical concerns with AI!
16:44 Get an OpenAI API key
17:11 How to store API keys in Airplane config
18:03 Check for abusive comments with AI
19:23 Testing the AI moderation
20:04 Deploy your dashboard
20:49 Get the example app running for testing
21:25 Try out the moderation flow in the example app
21:45 Moderation of an abusive comment
22:16 Next steps