Build a Complete SaaS Platform with Next.js 13, React, Prisma, tRPC, Tailwind | Full Course 2023
Вставка
- Опубліковано 9 чер 2024
- In this single video, we're building an entire, modern SaaS Platform from beginning to end.
⭐Kinde Auth: link.joshtriedcoding.com/kinde
⭐Discord for questions/answers: / discord
⭐GitHub Repo: github.com/joschan21/quill
Full Feature List:
🛠️ Complete SaaS Built From Scratch
💻 Beautiful Landing Page & Pricing Page Included
🔒 Authentication Using Kinde
💳 Free & Pro Plan Using Stripe
⚡ Infinite Message Loading for Performance
📄 A Beautiful And Highly Functional PDF Viewer
🔄 Streaming API Responses in Real-Time
🎨 Clean, Modern UI Using 'shadcn-ui'
🚀 Optimistic UI Updates for a Great UX
📤 Intuitive Drag n’ Drop Uploads
✨ Instant Loading States
🔧 Modern Data Fetching Using tRPC & Zod
🧠 LangChain for Infinite AI Memory
🌲 Pinecone as our Vector Storage
📊 Prisma as our ORM
🔤 100% written in TypeScript
🎁 ...much more
Copy & Paste list to follow along with the video (optional):
github.com/joschan21/quill/bl...
Thanks so much to Kinde for making this huge project possible by sponsoring this video!
Chapters:
0:00 - What you'll learn & demo
5:38 - Creating the project together
8:16 - The SaaS Process Overview
9:22 - Creating the Landing Page
33:36 - Making the Landing Page Look Awesome
1:11:31 - Creating the Navbar
1:20:37 - Authentication
1:27:13 - Creating our Dashboard
1:41:05 - Syncing our Database
1:49:30 - tRPC Setup
2:06:39 - Creating our Database
2:18:29 - Finishing our Database Sync
2:24:06 - Perfecting our Dashboard
3:12:33 - Let Users Delete Files
3:25:21 - Dynamic Data Fetching in NextJS
3:32:03 - Designing our Product Page
3:44:33 - Creating our File Uploader
4:13:33 - Setting up UploadThing
4:24:45 - Perfecting our File Uploader
4:50:41 - Rendering PDF Files
5:06:41 - Feature Bar for PDF Renderer
5:57:29 - Creating the Messages Section
6:14:17 - Instant Loading States
6:22:12 - Creating our Chat Input
6:31:55 - Make Components work together using Context
6:41:14 - Streaming API Response in real-time
7:26:27 - Receiving Stream on the Client
7:38:38 - Infinite Queries for Performance
7:58:51 - Displaying Messages
8:23:49 - Optimistic Updates for Instant Feedback
8:55:54 - Infinite Queries & Streaming Demo
8:59:17 - Stripe Setup
9:03:31 - Creating our Pricing Page
9:34:55 - Payment Integration
9:39:31 - Subscription Management Page
9:55:37 - Preview Deployment
10:07:04 - Finishing the Navbar When Logged In
10:43:08 - Making Link Previews Look Beautiful
10:51:48 - Give Pro Plan Better Features
11:05:27 - Deployment to Vercel & Final Test - Наука та технологія
Making these videos is so much effort but thanks so much for all your nice comments, really makes it worth it
thanks josh gigitty
Why not use clerk?
You are a great content creator and awesome tutor. Nice work Josh.❤
I dont know Next.js prisma and tailwind can I learn from this
thank you sir you're great motivation hy guys i'm kinda confused for my final year project what should i make please give me the idea note i'm backend intern at the company in node js, but id do have basic react knowledge which allow me to become full stack now the thing is it's difficult for me to built anything but i;m confused what should i make saas build project unique one
This is insane. People are building this project as their startups and Josh just makes a free tutorial out of it🤯
appreciate you man, hell yeah
@@joshtriedcoding Happy to see that you managed to stay under 12h 😁
Exactly. This is really cool
For real kudos man
Seriously people’s building their startups using this source of information. 🫡 to josh
Absolutely insane!!
You guys both are just insane. 🔥
But your saas-ai tutorial was best😁
😅😅
Damn 11 hours Josh! Thanks for working so hard to bring this content to the community and not putting it behind payed JS tutorials and signups. Super clean keep up the good work.
this video is an absolute gem! 😍 It's incredible to see a complete SaaS platform being built from scratch using such an impressive stack of technologies.
I'm really looking forward to build this Josh. I'm very happy to find out a great teacher like you.
Keep them coming.
Josh you are insane man. Those videos are going to be insanely helpful for people like me who have the basics down but don't know exactly how to proceed efficiently with certain things. Much much love bro.
happy to hear that! I've learnt the same way when getting started
Incredible, incredible work man. You're truly a gift to the community.
I really like these videos that are unqiue and advanced at the same time, there are always Netflix, Twitter, Amazon clones out there BUT this one rocks. Thanks Josh, really appreciate it man.❤❤
Great video Josh!
For those building this, an improvement to this is to validate pdf pages on drag enter or click upload and show the error state in the upload input.
Or you could show a message on each upload on the free tier stating that even if they upload a pdf with more than 5 pages only the first five pages will be accepted
The second option is more user friendly and would probably work better.
One of the best tutorials I've come across. Amazing depth!
can't imagine how much effort went into it, this content for free is just insane. you're killing it bro
A true tutorial - The fact that you spent almost an entire chapter explaining why the auth-call back is important/how it works is extremely impressive and helpful.
bro can u tell me which database is useed in this project. im new😒😒
🤯🤯 God this is awesome! Auth + PDFs + Stripe + OpenAI Streaming! Josh you're a legend! This will get me a real job by the end of this year 😆
Thank you so much!!
Appreciate ya man, that would be awesome
Hopefully you get a good job!
However, technologies focusing on the having a REST api and SPA approach rather than tRPC is most likely what you will be doing in a job and that’s what will resonate more with your interviewers, some might not even have heard of tRPC and might pick a candidate that can show they understand the standard web practices betterZ
Nevertheless, best of luck with your job search!
Thanks a lot for the insight! @@ahmadalghali
1:46:38 [React Query issue] As React Query 5 has just been released and the current version of tRPC (v10) still depends on React Query 4, the installation cmd of tRPC would be: pnpm add @trpc/server @trpc/client @trpc/react-query @trpc/next @tanstack/react-query@^4.18.0 zod . And this would be updated in tRPC v11.
2:06:22 React Query 5 has a breaking change that all callbacks have been removed from useQuery. So the use of onSuccess callback here is no longer feasible.
@@edwardchungweb hey then what would be the new code for this
@@amardeep6088Use useEffect if the status is successful or an error
@@bradenstitt4678 Hi! what would the code with useEffect be like?
This is my implementation, I use an useEffect for that
useEffect(() => {
// error code unauthorized :
if (error?.data?.code === "UNAUTHORIZED" ) {
router.push("/sign-in");
}
// success
else if (!isLoading) {
router.push((data !== undefined && data.success && origin) ? `/${origin}` : "/dashboard");
}
}, [data, isLoading]);
@@amardeep6088
Absolutely insane to offer this kind of content for free! You are a true 🐐for doing this Josh! Pushing small business forward is a huge step to tackle the corporate conglomerate landscape we see today. Best of luck to everyone who will start their own side hustles from content like this, let's come up with great ideas 💡
Absolutely love these complete project sessions - awesome work Josh!
cheers man!
This is amazing. Please make more full-stack projects 🎉
Amazing job Josh! You've been a major help in my learning experience.
Imo saving the file after every className would be amazing to show exactly how everything works.
You are a gem - 11hrs of straight valuable content with nothing behind paywall
Josh, you have officially stepped up your game big time
You continue to impress me and the work you put into these videos is trully inspiring
Whaaaaaat,am I dreaming or what 🤯. Josh thank you so much this will help many of us that has Sass ideas but not very good at building pages like this Kickstart it . Thank you so much ❤
I really appreciate your style. The way you explain things is very clear, which is a significant advantage when learning something new like this. Thank you for this excellent tutorial!
Great job Josh. Love how you add explanations and side comments instead of just writing the code. You are great at teaching man! We will now expect one of these full projects every week 🤣🤣🤣🤣🤣
Its an amazing project. I was confused about the t3 stack but it is the best stack for me now. Trpc and prisma makes backend so much easier. Thanks Josh for such quality content !
Hey sir I have one problem after deployment on vercel can you help me . Suddenly my upload button stopped working?
Excellent work! A gentle suggestion would be add the following components as part 2. Feature flags/experimentation using posthog etc., event tracking using umami , and headless CMS for marketing. This would be deadly combo. Most of the tutorials do not cover these components with SaaS. These are very important for product optimization. Thank you
Great tutorial! Josh, you are a legend, so attentive to details and cover a wide range of topics!
Amazing! Congrats on this awesome release!
Number #1 advise nobody ever gives you: To avoid too many conflicts (usually happens due to new versions of a package). Make sure your package.json file matches Josh's file on github. If you run into issues, align the two and write pnpm up. It will update all your packages to the matching versions of Joshs
thanks man
Hey, sooo, I was doing this. However, I noticed that everytime, I try downgrading the @tailwindcss/typography": ^0.5.12" to the same one with Josh. It just does not downgarde and was still like that.
This is the coolest project you did Josh 🚀
Cheers dude!
Incredible project Josh! Tks to share, amazing.
Your content is stellar. We appreciate you, Josh!
Great video,
In the part of getting the user information at the beginning of creating the dashboard, I realised that you have to use 'await' in front of 'getKindeServerSession' and 'getUser' function, and accordingly make the page an async function.
hey, my code still doesn't work and your the only one who commented about a potential fix, but when I put await in front of both the functions instead of getting an error under email, I just get one under the "user" (in user.email)
@@WarTornTales make the function enclosing the "await" keyword an async function by adding it like this:
const page = async () => {
const { getUser } = getKindeServerSession();
const user = await getUser();
if(!user || !user.id) redirect('/auth-callback?origin=dashboard');
return (
{user?.email}
)
}
@@WarTornTales same issue mate. is there any solution? please help
This blew me away. First, it's a fully deployable application, the tech stack used is modern, the teaching was clean and clear, it's very in-depth content; very thorough. Then it's free at the same time. Josh, thank you very much.
I have a question though, seems react-query has deprecated onsuccess from their UseQuery and ultimately trpc follows. Would there be an updated tutorial to improve on this as I got stuck at that point? Still reading up on my way around though.
Nevertheless, thank you, Josh!
were you able to resolve this?
This doesn't bode well for the use of TRPC in production applications.
Either way, the solution is to use the useEffect hook from React.
import { useRouter, useSearchParams } from "next/navigation";
import React, { useEffect } from "react";
import { trpc } from "../_trpc/client";
function Page() {
const router = useRouter();
const searchParams = useSearchParams();
const origin = searchParams.get("origin");
const { data, isLoading } = trpc.authCallback.useQuery(undefined);
useEffect(() => {
if (!isLoading && data) {
// User synced
router.push(origin ? `/${origin}` : "/dashboard");
}
}, [data, isLoading, origin, router]);
}
export default Page;
Just discovered your channel, and I must say, you create some of the best content out there! Keep going at it, I will definitely recommend your videos and I will for sure keep watching!
You really outdone yourself on this one. Congrats man what an amazing tutorial! Please keep these kind of videos up.
Can i use an alternative for planetScale, as it doesn't have any free plan
Hey Josh thank you for making this video... Quick question brother... The current free tier of pinecone does not support namespace so it makes it difficult to group vectors to a single file. Do you know of any other tool similar to pine cone that provides namespaces on its free tier?
Facing the same problem
Woooow, insane man, thank you for the content!
What a legend! Keep it up, Josh. This is insane!
Hey josh, in 2:04:38, you used onSuccess in the useQuery function but as of now it’s deprecated and cannot be used anymore. Can you suggest a workaround to this? Thanks
did you get a workaround? im facin the same issue.
Hello Josh, first of all, I loved the project, so I appreciate your great work. I've been following it, but I'm having an issue with the Pinecone integration. It seems that since you made the video, the way it works has changed a lot. Now, it has a different type of pod, a pod-starter. In your case, you can select the pod-s1, but whenever I try to implement it, I always get an error saying that I exceed the maximum transfer quota. I couldn't find a way to solve it since the documentation doesn't specify how to do this using Lang, as in your video. Besides, I don't understand much about AI things. I wanted to know if you knew of any solution.
I spent a lot of time, but I found a solution for pinecone 1.1.1 and pod type starter.
in pinecone.ts:
import { Pinecone } from '@pinecone-database/pinecone';
export const pinecone = new Pinecone({
apiKey: process.env.PINECONE_API_KEY!,
environment: 'gcp-starter',
});
in api>uploadthing>core.ts:
...
const pineconeIndex = pinecone.Index('quill');
const embeddings = new OpenAIEmbeddings({
openAIApiKey: process.env.OPENAI_API_KEY,
});
await PineconeStore.fromDocuments(pageLevelDocs, embeddings, {
pineconeIndex,
});
...
that works for me...
@@mitol5549 I really need help. How you fix the type error in pineconeIdex? Type 'Index' is missing the following properties from type 'VectorOperationsApi': _deleteRaw, _delete, delete1Raw, delete1, and 16 more.ts(2740)
pinecone.d.ts(8, 5): The expected type comes from property 'pineconeIndex' which is declared here on type 'PineconeLibArgs'
@@mitol5549 I am still getting a typescript error on pineconeIndex.
"Type 'Index' is missing the following properties from type 'VectorOperationsApi': _deleteRaw, _delete, delete1Raw, delete1, and 16 more.ts(2740)"
EDIT: Nevermind, the code you shared does work. I just had to update langchain to get it to work.
I am using:
"langchain": "^0.0.172"
"@pinecone-database/pinecone": "^1.1.2",
I am still able to use the free starter from pinecone.
this doesnt partition the index by pdf so every question will always be answered using all PDFs of all users... @@mitol5549
Found this gem and can't believe you are going to teach all of this for FREE! I am going to watch the whole thing and give an update.
Thank you so much. It is really a gem, so much information available that surpasses even entire courses or tutorials.
For 2:05:35 this might help u
const query = trpc.authCallback.useQuery(undefined, {
retry: true,
retryDelay: 500,
});
// Check for errors in the query result
if (query.error) {
const errData = query.error.data;
if (errData?.code === 'UNAUTHORIZED') {
router.push('/sign-in');
} else {
// Handle other types of errors
console.error("An error occurred:", query.error);
}
}
// Continue with other logic based on the query result
if (query.data?.success) {
router.push(origin ? `/${origin}` : '/dashboard');
}
can you explain how you came up with this solution.
just searching everywhere google , gpt etc
@@SiddharthKumarGope
Hello developers, for anyone having the issue rendering the pdf file, which it does not show up on screen and the network request return a 403 error, this is how you could resolve it, go to core.ts file and under the onUploadComplete change the url from the modified one to file.url, somehow the url that Josh provided is not working, so go with the file.url instead and remember to delete all the files before retrying because the url of the files is already invalid. Hope this help!!
still show Failed to load PDF file. and pop up opens to download that pdf
@@teenageworrior1634 The issue might be with your browser. I get the same issue using Chrome because of the default behavior of the browser when dealing with PDF files; it triggers the download manager instead of displaying it, but even when I change the settings, it does not work. I do not know why, but there is one solution to this issue to my knowledge: using a different browser like Microsoft Edge.
The file.url instead of the Josh url solved the rendering of the file. You saved my mental state. I still have the "Too many pages in PDF" even with small pdfs but probably is another error.
Josh, you are amazing! All these projects are very useful for us 🎉
Josh you are amazing. You turn a startup project to a free video tutorial. Thanks man you are one of the best on UA-cam
Hello. It is the 9 of November 2023. I am doing this course. I am at 1:31:29 and the code works only if I will create async Page.tsx component and if I will call the getUser function using await.
I don't know why. But may be this comment will help somebody
thank you bhai❤
Amazingly done video!, Love these complete long projects.
Instant subscribing. To the up and up!!
Was actually just looking for the next tutorial! These are amazing keep it up ❤
"Great video! Looking forward to more tutorials on Next.js projects, especially ones related to inventory management. Your content is always top-notch!"
I am madly impressed! Cheers mate!
Josh, this is really outstanding work. Thank you !
Hi Josh, thank you for making this, i watched the intro to the course. Its amazing what you are doing.
Well done Josh, thank you. This is top content!
ayyyyyy, shout-out to you !!! needed this
What a video. Golden content. Everyone watched this content should definitely pay for it. This is insane. Subscribed.
Awesome Josh, im subscribing. Keep it up!
This is massive Josh, thank you.
Woahhhh what an effort to teach us end to end saas building. Thank you josh
okay this might actually be the greatest project I've seen on youtube
WTF , This Is Amazing Bro , The Best Saas Project Ever I Seen On The Internet , Thank You For Your Hard Work ....
You are amazing, man! Thank you so much for such a valuable content. Keep on keeping on, brother!
🙂Man, I'm speechless, I am learning so much here. Thank you so much.
Wow. I will definitely ~try~ to watch it all!
Absolutely phenomenal 😮
Love you Josh this is awesome!!! Thanks for making the web better!
Absolutely amazing content I've seen till now. Thanks for sharing your knowledge. Appreciate your hard work 💯
insane value provided, thanks josh you're in another level dude
I've began working on a lot of Next side-projects for my work, and although I follow a lot of the best practices that I've seen and read up on thus far, this video will cement a lot of things, I'm sure of it. I plan on watching this and re-creating it this weekend, thank you Josh! You and Web Dev Cody are saints 🙏
Hey sir I have one problem after deployment on vercel can you help me . Suddenly my upload button stopped working?
just wow man!! keep the good work
You are just awesome JOSH!!
This amazing project video ever seen on UA-cam!!🎉🎉
Wow! Big job. Thank you 👍
That's completely awesome! Amazing work
Thanks for sharing
You've just got a sub
Thanks for all the effort you have put in creating this project. These features are rare to find,even in paid courses
Thank you so much for this!! This is awesome❤
Your coding is an art, thank you
I learnt a lot with it! I take my notes and keep learning.
This really is very helpful. More power to you!! :)
Thank you very much for your dedication, consistency and hardwork.
I haven't watched the video but thank you so much for this hardwork. Appreciated
Thanks a lot Josh 💯 Awesome work.
Wow! so much value in one video
my man, SUPER!!! vielen dank. thank you very much.
Thank you so much for this video. This is amazing!!
Dude thanks for this! Ive been learning coding on my own and have been learning WAY more through this than just random projects. Thanks again!
also being new to this - how do you change from npm to pnpm? do you use the terminal to change this before you open the code in VSL?
this man is MVP. never disappointed !
much love and success for you bro, i do not have words
Awesome work by the way bro, thanks so much
Thank you so much man I am so glad for the youtube algorithm for suggestion you to me in that day ❤
These complete project sessions are 🔥🔥🔥
I liked the video just for the effort. Great work man!
daaayyummmnn !! bro your content is super good !!!
Great job, thanks so much for sharing.
Josh, you are undoubtably the best
love you content men, keep it up!
Great job, thank you! 👑