Create a B2B AI SaaS with Next.js, React, Arcjet, Kinde, oRPC, Prisma, Tailwind (Part 1/2)
Ever wanted to build a SaaS, and not just any SaaS, but a B2B SaaS with AI functionality included? Well, I have news for you, because in this video, we are doing exactly that. We are creating a team communication software with organizations, channels, fancy infinite scroll, oh, did I already mention billing? Of course, we will have billing implemented. Not only that, but we have thread support baked in, reactions, and of course, all of this is done in real-time using Cloudflare Durable Objects. But wait, we set out to create a B2B AI SaaS, and therefore, it's infused with AI. Not only can users easily summarize threads, but we also have a full-on AI composer. Need help with your message or just want to fix the grammar? The composer is there to help with one click of a button. This is literally the most in-depth tutorial I have ever created, and I am excited for you to get started on this project!
🚨 Arcjet: https://launch.arcjet.com/teiuKfN
🔐 Kinde ($50 USD Free Credits): https://dub.sh/HZ8cQcX
Part 3: • TeamFlow Part 3
📸 Screen Recording Software: https://dub.sh/eDa47SO
👨🏻💻 GitHub Repo: http://localhost:3000/free-tutorials/create-a-b2b-ai-saas-with-nextjs-react-arcjet-kinde-orpc-part-12
👀 Public Assets: https://dub.sh/5VnAS0L
🌍 My Website: https://marshalcode.com
👋🏻 Discord: / discord
✅ Follow me on X: https://x.com/janmarshaldev
📧 Business ONLY: [email protected]
Features:
🌐 Next.js 15
🎨 Tailwind CSS & Shadcn UI
🔒 Authentication with Kinde (OAuth & Magic Links)
🛡️ Arcjet Security - protects against XSS, SQL injection, and other common attacks
🧠 Organizations
💵 Billing with monthly tiers
🚫 Rate limiting
👾 Custom rich text editor
🚀 AI thread summarization & composer
👨🚀 Thread support
🏎️ Realtime with Cloudflare Durable Objects
🫣 Emoji reactions
🖼️ Image uploads with presigned URLs
🦾 Channels
✅ Realtime presence
👥 Invite members
📜 Reverse infinite scroll
🖊️ Edit messages
💂 Self-serve customer portal
🧮 Neon Postgres database
💾 Prisma ORM
🚀 Deployed on Vercel
Additional Features:
✅ Performance-optimized architecture
✅ Clean, secure and maintainable codebase
✅ Data Access Layer & DTO
Installation Command for Shadcn/UI:
pnpm dlx shadcn@latest add tooltip toggle sonner skeleton popover label input form dropdown-menu dialog collapsible card button avatar
Rescourses used:
Next.js: https://nextjs.org
Arcjet: https://launch.arcjet.com/teiuKfN
Kinde: https://dub.sh/HZ8cQcX
Tailwind.css: https://tailwindcss.com
Shadcn/UI: https://ui.shadcn.com
Prisma: https://prisma.io
Neon: https://neon.tech/
Vercel: https://vercel.com/.
Zod: https://zod.dev/
Partykit: https://www.partykit.io/
oRPC: https://orpc.unnoq.com/
Uploadthing: https://uploadthing.com/
Timestamps:
00:00 Intro
06:50 Installation
30:00 Landing Page
01:02:00 Authentication & Billing
01:50:00 Workspace Sidebar
03:06:00 API Layer (oRPC)
04:58:00 Securing Our Application (Rate Limiting, Bot Protections, WAF, etc.)
05:53:00 Channel Sidebar
06:45:00 ORM & Database Setup
07:11:00 Continue with Data Fetching and Mutation Logic
07:40:00 Main Messages Page
08:00:00 Rich Text Editor Setup (TipTap)
09:26:00 Multi-Layered Authorization
10:09:00 Fetching Messages
10:40:00 Reverse Infinite Scroll
11:40:00 Theme Customization