Let’s build the dashboard for the SaaS in Next.js with React. I’ll show you how it is structured, how a user connects their YouTube channel, and how the different option components set flags in the database, while showing the correct value in the client.

I built this app as a side project, and got around 300 users for it. After closing it down, I thought I would share everything about how it works, so you can build your own SaaS with what you've learned, or clone mine.

What the tool does is that you connect your YouTube channel once, and then it clips you podcast episodes, and post your podcast highlights to YouTube Shorts on autopilot. So YouTube Shorts will just appear on your channel every day, without you lifting a finger. AI is used for viral clip detection, face tracking and active speaker detection.

Technologies covered in this series: Next.js, NextAuth.js / Auth.js Stripe, AWS lambda, AWS S3, AWS SQS, AWS IAM, PlanetScale, Prisma, PyTorch, FFmpeg.

Source code:
Frontend: https://github.com/Andreaswt/useshort...
Backend (AWS Lambda functions): https://github.com/Andreaswt/useshort...

Timestamps:
0:00 - Database Prisma.db file
2:45 - Dashboard layout file
4:40 - Menu component
7:06 - Dashboard page file
9:22 - Free limit reached overlay
10:54 - Query message reciever
13:09 - YouTube OAuth login
15:34 - Posting options
18:38 - Posting frequency component
24:58 - Select channel component
32:50 - Select playlist component
33:55 - Post public or private component
35:00 - Notify subscribers component
37:10 - Scheduling order component
38:17 - Autoposted videos display

About me:
I have a Bachelor's degree in Software Engineering, and have 5 years of experience working as a developer in the industry.

Socials:
Follow me on X: @Andreaswt21

Business inquiries: [email protected]