Build a SaaS: AI Companion With Next 13, React, Stripe, Prisma, MySQL, Tailwind | Tutorial 2023

Build a SaaS: AI Companion With Next 13, React, Stripe, Prisma, MySQL, Tailwind | Tutorial 2023

Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord Github & Live Website: https://www.codewithantonio.com/projects/ai-companion Clerk Authentication: https://bit.ly/3Kmyytc Hotpot for AI Character Images: https://hotpot.ai/ Inspiration for the project: https://github.com/a16z-infra/companion-app In this comprehensive tutorial, we'll explore the intricate details of building an advanced SaaS AI Companion using Next.js 13. Our AI Companion taps into the power of embeddings and the Pinecone vector database to ensure long-term memory retention, supplemented by the fast caching abilities of the Upstash Redis database. We will also use MySQL and Prisma for storing companions. Harnessing the revolutionary features of Next.js 13 App Router, our platform will facilitate swift client-side routing, making the user experience seamless and intuitive. Alongside, the integration of Stripe promises a hassle-free subscription system, while Clerk handles user authentication with finesse. Throughout this tutorial, you'll be exposed to a rich array of web development technologies, including React, Tailwind, and Prisma. Every step is meticulously explained, ensuring even those new to the realm of SaaS development can follow along with ease. Whether you're an aspiring developer or a seasoned expert, this tutorial holds gems of knowledge that can benefit everyone. Keen to create a state-of-the-art SaaS AI Companion? Grab your developer toolkit, maybe a cup of your favorite brew, and let's redefine the AI-empowered web universe of 2023 with Next.js 13! Timestamps 00:00 Intro 06:07 Environment Setup 10:31 Folder Setup 18:07 Clerk Authentication 31:51 Navbar 51:43 Sidebar 01:03:46 Search Filter 01:16:14 Category Filter 01:37:12 Companion Creation Form 02:33:41 Companion Creation API 02:51:48 Companion List 03:11:42 Chat Header 03:40:55 Chat UI 04:18:38 Memory Service 04:45:00 Chat API 05:15:35 Stripe API 05:49:26 Stripe UI 06:23:05 Deployment 2023-09-04T21:16:20Z1280 https://www.youtube.com/embed/PjYWpd7xkaM

0 comments

Leave a comment

#WebChat .container iframe{ width: 100%; height: 100vh; }