Build and Deploy a Full Stack AI SaaS | Next JS 13, DrizzleORM, OpenAI, Stripe, TypeScript, Tailwind

Welcome to this comprehensive full-stack tutorial where we delve into the latest features of NextJS 13.4. Join me as we build an entire project from the ground up and seamlessly deploy it to Vercel 🚀.

Throughout this journey, you will gain expertise in the following areas:

🌐 Leveraging NextJS 13's cutting-edge App Router.
💳 Managing Payments seamlessly through Stripe.
🎨 Harnessing the beauty of Shadcn and the power of Tailwind CSS.
🧠 Unleashing the capabilities of OpenAI's API for Language Model usage.
🗃️ Interacting with databases with the efficiency of ORMs.

📋 Pastebins for Code Timestamps

🙏 Credits & Inspirations
A heartfelt thank you to my friends for their unwavering support throughout this project.

📚 Referenced Resources

Connect With Me 🔥🚀 :

📖 Chapters Overview
0:00 Intro & Demo
9:26 Set Up NextJS
11:32 Set Up Shadcn
15:18 Set Up ClerkAuth
21:25 Home Page
32:55 DrizzleORM
49:48 File Upload Component
56:44 Set Up AWS S3
1:17:45 AI RAG Explanation
1:30:12 React Query Set Up
1:44:44 Set Up Pinecone DB
2:32:00 Chat Side Bar
2:47:15 PDF Viewer
2:50:16 Chat Component ( Vercel AI SDK )
3:07:32 Pinecone OpenAI Get Context
3:25:49 Persist Chat Logs to DB
3:33:46 Stripe Integration
4:14:29 Deploy and Outro

Join me on this exciting journey to master NextJS 13.4 and unlock the potential of full-stack development. Let's code and create something amazing together! 🚀👨‍💻

#NextJS
#FullStackDevelopment
#WebDevelopment
#StripePayments
#ReactQuery
#saas
#ai
#chatbot
#React
#TailwindCSS
#OpenAI
#DatabaseORM
#GitHubActions
#CI/CDPipeline
#CodingTutorial
#Programming
#VercelDeployment
#Docker
#GitHubRepo
#WebDevelopmentTutorial
#FrontendDevelopment
#BackendDevelopment
#CustomDomain
#SSL
#YouTubeAPI
#Prisma
#CreditIntegration
#GalleryPage
#QuizCards
#PaymentIntegration
#StrictJSONGPT
#CodingInspirations
#GitHub
#Instagram
#Website

[elliottchong]

Hello! Another update due to the fast changing landscape of Javascript Libraries ToT...

I have updated the repository to contain the changes migrating from the AWS-SDK version from v2 to v3.

Thank you everyone!

[pankaj.kumar]

00:00 Build an AI PDF chat platform
03:37 💻 Introduction to development technology stack
05:26 Edge Runtime and Global Deployment
08:04 📚 Retrieval Augmented Generation (RAG) Framework
11:10 🎨 Configure ChatCn and interface components
16:02 🔐 Configure Clerk Authentication
18:48 📦 Setting up cloud providers and middleware
21:31 🎨 Create homepage UI
26:53 🔒 Set up user authentication and route navigation
32:49 🛢 Setting up the Neon database and DrizzleORM
39:17 🛠 Setting up Drizzle ORM and PostgreSQL database tables
44:25 📦 Install and configure Drizzle Kit
49:14 📂 Create file upload component
55:12 ☁ Configuring AWS S3 bucket
01:00:07 📤 Upload files to AWS S3
01:00:23 📦 AWS S3 Configuration
01:02:12 🔄 Initialize AWS S3 client
01:03:08 📤 Upload files to AWS S3
01:07:21 🌐 Get the publicly accessible S3 URL
01:17:58 🧠 Understanding embedded vectors and generation
01:21:28 🔍 Overview of text vector embedding
01:22:12 Use text vectors to query
01:23:22 📋 Store text in vector
01:24:34 📄 Processing PDF documents
01:26:54 🌐 Search for text similar to the query
01:28:55 ⚙ Use Lang Chain to split PDF documents
01:30:17 🔄 Create a chat room
01:34:57 📢 Notification using React Hot Toast
01:41:45 📥 Prepare to upload files to S3
01:42:28 ⏳ Show upload progress
01:44:22 🌐 Create Pinecone features
01:57:32 📄 Extract text from PDF
02:02:09 🧠 Solved Node.js memory issues
02:02:23 📄 Overview of PDF document processing
02:04:40 Document segmentation and processing
02:18:12 🌲 Document embedded into Pinecone database
02:23:56 📚 Pinecone tool function and data upload
02:25:07 📊 Create chat history and upload to Pinecone
02:26:00 💬 Create chat records using Json ORM
02:26:54 🗝 Get the user ID and return the inserted chat record ID
02:28:42 🎉 Pinecone upload is completed and ready to create a chat page
02:45:23 🚀 Start creating chat sidebar
02:47:13 📜 Complete chat sidebar
02:47:24 📄 Start creating PDF viewer
02:50:54 🤖 Start creating chat component
03:00:10 💬 Create message list component
03:01:54 🖥 Create chat GPT API endpoint
03:06:40 📜 Get PDF content context
03:08:06 📊 Query Pinecone database
03:09:15 🗃 Get file keywords
03:19:36 🔄 Automatically scroll messages
03:27:29 🛠 Save user messages to the database
03:28:11 🚀 Access saved messages
03:33:54 💳 Integrate Stripe payment
03:49:52 🤖 Create Webhook to handle Stripe transactions
03:56:21 🛡 Test Stripe Webhook local environment
04:07:46 💼 Create user subscription button
04:12:40 🎈 Updated Pro subscription button in chat sidebar
04:13:18 🔧 Project completion and deployment preparation
04:17:06 🌐 Project deployment and testing

[TheMessiah]

being a beginner in web dev, your courses make the most sense among the countless out there. keep lighting the way for lost souls like me brother ✨

[elliottchong]

Hi Everyone, just an update to the Pinecone library, they recently released their 1.0 version, while in the video I was using a 0.x version.


Basically instead of doing pineconeclient.init(), you can skip that step and pass the configuration keys directly during the constructor of the pinecone cliene as so:

// v1.0.0 initialization

const pinecone = new Pinecone({
apiKey: 'your-api-key',
environment: 'your-environment',
});

[julianbritto]

Very little people know the power of AI and I think with your consistency and powerful message your gonna change so many peoples view on it. Keep up the absolutely amazing work brother. Words cannot express how proud I am of you for where you are!!!! Keep the amazing and useful content coming hehe!!!!

[neilmerchant]

Dude are you really 18?? That's crazy, you are super knowledgable and a great teacher. Keep it up!!

[lesleykampinda]

i was actually trying to find tutorials for chatting with PDF. You just made my day

[EdwardBudaza]

this is a ton of value, your channel should be number one on web development period after this app. I am going to be presenting this app to lawyers and investment analysts. Thank you so much for doing this!!!!

[dindustack]

Your level of consistency is amazing!!

[youneshenni]

Well done Elliot. All this knoweldge at 18 !! I can't imagine what you'll achieve in 10-20 years from now. Keep it up :)

[swastikpatel]

the quality of education you are providing for free is increadible Elliot, keep up your good work and more & more people will get connected, you will gain huge numbers of subscribers and will be appreciated by many.

[mariooliver]

We did it! Project finally complete. Thanks so much for all the knowledge you've imparted my friend! Best of luck on all your endeavors.

[hemanthchowdary]

Awesome 🤩
Need more SaaS applications 😀

[prompt_luxe]

This project is so cool! I hope there can be a one-click deployment command for Vercel.

[kcsypij]

🎯 Key Takeaways for quick navigation:

00:00 🚀 构建 AI PDF 聊天平台
03:37 💻 开发技术栈介绍
05:26 🧩 Edge Runtime 和全球部署
08:04 📚 检索增强生成 (RAG) 框架
11:10 🎨 配置 ChatCn 和界面组件
16:02 🔐 配置 Clerk 身份验证
18:48 📦 设置云提供者和中间件
21:31 🎨 创建主页UI
26:53 🔒 设置用户认证和路由导航
32:49 🛢️ 设置Neon数据库和DrizzleORM
39:17 🛠️ 设置Drizzle ORM和PostgreSQL数据库表
44:25 📦 安装和配置Drizzle Kit
49:14 📂 创建文件上传组件
55:12 ☁️ 配置AWS S3存储桶
01:00:07 📤 上传文件到AWS S3
01:00:23 📦 AWS S3 配置
01:02:12 🔄 初始化 AWS S3 客户端
01:03:08 📤 上传文件到 AWS S3
01:07:21 🌐 获取公开可访问的 S3 URL
01:17:58 🧠 了解嵌入式向量和生成
01:21:28 🔍 文本向量嵌入概述
01:22:12 🧬 利用文本向量进行查询
01:23:22 📋 将文本存储在向量中
01:24:34 📄 处理PDF文档
01:26:54 🌐 搜索与查询相似的文本
01:28:55 ⚙️ 利用Lang Chain进行PDF文档分割
01:30:17 🔄 创建聊天室
01:34:57 📢 使用React Hot Toast进行通知
01:41:45 📥 准备上传文件到S3
01:42:28 ⏳ 显示上传进度
01:44:22 🌐 创建Pinecone特征
01:57:32 📄 从PDF中提取文本
02:02:09 🧠 解决Node.js内存问题
02:02:23 📄 PDF文档处理概述
02:04:40 🧩 文档分割和处理
02:18:12 🌲 文档嵌入到Pinecone数据库
02:23:56 📚 Pinecone工具函数和数据上传
02:25:07 📊 创建聊天记录并上传至Pinecone
02:26:00 💬 使用Json ORM创建聊天记录
02:26:54 🗝️ 获取用户ID和返回插入的聊天记录ID
02:28:42 🎉 Pinecone上传完成，准备创建聊天页面
02:45:23 🚀 开始创建聊天侧边栏
02:47:13 📜 完成聊天侧边栏
02:47:24 📄 开始创建PDF查看器
02:50:54 🤖 开始创建聊天组件
03:00:10 💬 创建消息列表组件
03:01:54 🖥️ 创建聊天GPT API端点
03:06:40 📜 获取 PDF 内容上下文
03:08:06 📊 查询 Pinecone 数据库
03:09:15 🗃️ 获取文件关键字
03:19:36 🔄 自动滚动消息
03:27:29 🛠️ 保存用户消息到数据库
03:28:11 🚀 访问保存的消息
03:33:54 💳 集成Stripe支付
03:49:52 🤖 创建 Webhook 处理 Stripe 事务
03:56:21 🛡️ 测试 Stripe Webhook 本地环境
04:07:46 💼 创建用户订阅按钮
04:12:40 🎈 更新聊天侧边栏的 Pro 订阅按钮
04:13:18 🔧 项目完结和部署准备
04:17:06 🌐 项目部署和测试

Made with HARPA AI

[mohaniya]

what a coincidence that i was exploring AI tools today as well haha! Instead of Pinecone I used Chroma which just uses local sqlite db. Great to see how it can be integrated with React!

[narinderkmaurya]

This is the most awesome video, your channel will reach out so much, Javascript Master, Code with Antonio, and you are pushing so much for us 🙏🙏

[sarthakgupta]

Getting this error "error passing openai embeddings api TypeError: Cannot read properties of undefined (reading '0')" in terminal at @02:31:45 on uploading pdf

[adityakadam]

That's a great video. You are very talented and you come across as a humble person. I wish your channel grows more :)

[masadamsahid]

1:09:34
I think we should use the RegEx /\s/g instead of just a whitespace char ' ' . Because if only using a ' ' it will only replace the first appearance of a whitespace. In the other hand, by using the regex /\s/g will replace all of the whitespace occurrences.

So it should be :
const file_key = 'uploads/' + Date.now().toString() + file.name.replace(/\s/g, '-');