Build and Deploy a Full Stack Notion Clone | NextJS 13, DALL•E, DrizzleORM, OpenAI, TypeScript
Рет қаралды 31,911
Күн бұрынGitHub Repo: github.com/elliott-chong/aide...
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.
🔥 Utilize DALLE AI Image Generation
🎨 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
Timestamp 21.06 globals.css grainy pastebin.com/1Q1tfyFy
Timestamp 1.45.35 TipTapMenuBar.tsx pastebin.com/4dMDEW0B
Timestamp 2.09.12 /api/completion/route.ts pastebin.com/ADU34Ftq
🙏 Credits & Inspirations
A heartfelt thank you to my friends for their unwavering support throughout this project.
📚 Referenced Resources
Vercel AI SDK: vercel.com/blog/introducing-t...
Connect With Me 🔥🚀 :
Email: elliottchong16@gmail.com
GitHub: github.com/elliott-chong
Website: elliottchong.tech
📖 Chapters Overview
0:00 Intro & Demo
3:22 Outline Knowledge
5:10 Set Up Project
7:41 Set Up shadcn
11:16 Set Up Clerk Auth
19:41 Landing Page
29:43 Dashboard UI
35:40 DrizzleORM
48:22 Create Note UI
57:46 OpenAI Generate Image Prompt
1:07:20 Create NoteBook API
1:23:59 Notebook Page UI
1:34:16 TipTap Editor & MenuBar
1:49:18 Debounce Save
2:03:32 AI Autocomplete
2:20:16 KBD UI
2:22:14 Firebase
2:45:31 Delete Note
2:50:29 Deploy & Outro
@elliottchong 8 ай бұрын
📖 Chapters Overview 0:00 Intro & Demo 3:22 Outline Knowledge 5:10 Set Up Project 7:41 Set Up shadcn 11:16 Set Up Clerk Auth 19:41 Landing Page 29:43 Dashboard UI 35:40 DrizzleORM 48:22 Create Note UI 57:46 OpenAI Generate Image Prompt 1:07:20 Create NoteBook API 1:23:59 Notebook Page UI 1:34:16 TipTap Editor & MenuBar 1:49:18 Debounce Save 2:03:32 AI Autocomplete 2:20:16 KBD UI 2:22:14 Firebase 2:45:31 Delete Note 2:50:29 Deploy & Outro
@madycreations8533 8 ай бұрын
at the time stamp of 1:14:41 , I couldn't able to get the "image description" , in my terminal , instead of that , I was thrown with an error saying , "at generateImagePrompt (webpack-internal:///(rsc)/./src/lib/openai.ts:27:47) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async POST (webpack-internal:///(rsc)/./src/app/api/createNoteBook/route.ts:21:31) at async C:\My files\Projects\aidea ode_modules ext\dist\compiled ext-server\app-route.runtime.dev.js:6:61466 ⨯ TypeError: Cannot read properties of undefined (reading '0') at generateImagePrompt (webpack-internal:///(rsc)/./src/lib/openai.ts:27:47) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async POST (webpack-internal:///(rsc)/./src/app/api/createNoteBook/route.ts:21:31) at async C:\My files\Projects\aidea ode_modules ext\dist\compiled ext-server\app-route.runtime.dev.js:6:61466 Please help me to solve this problem , I was doing all same , and even cross checked .
@EdwardBudaza 8 ай бұрын
Your pace is quite fast, just about two weeks ago you put out chatpdf, now this... this got to be the number one channel now. Thank you for the high quality content
@longtang8901 8 ай бұрын
Thank You Elliot for making this project and taking time to explain the process
@bilalnassar6904 8 ай бұрын
Amazing tutorial! mid way through the tutorial I wondered how many subscribers you got and was surprised you only have 8k, you deserved much more than that. Keep up the good work!
@anthonymann7679 8 ай бұрын
Awesome video man, it's basic enough that beginners can follow along and understand what's going on and leaves a lot of room for personal expression and expansion of the project.
@Diego_Cabrera 8 ай бұрын
Amazing video, elliott!
@mohammadayaansiddiqui7125 Ай бұрын
Hey elliott great video, please dont stop keep posting such videos
@Victor-wh9bs Ай бұрын
Thanks. Great explanation. looking forward to more next level tutorials.
@Gallowtown 8 ай бұрын
Ohhh man this is really cool, congrats!
@dalestewart 8 ай бұрын
Another professional tutorial!
@nassersnoop6445 8 ай бұрын
awesome video Mr. Chong
@f41z37 8 ай бұрын
Exactly what I've been looking for!
@parkerrex 8 ай бұрын
Excellent tutorial. Speedrunning these clones. A 3 hour tut took 11 hours to complete according to Waka. I stopped, learned the material, diagrammed. One difference from the Vector DB tutorial that may help students more is doing some diagramming of the systems when you are going. Eg. This mutatation asks this function from here OR a high level system drawing in excalidraw to understand how all the pieces of the puzzle interact with one another. I did this indepedently and it was vastly helpful. Thanks Elliot! Will be stitching this into my project.
@marvinkr 8 ай бұрын
Agreeing with this approach
@uminhtetoo 8 ай бұрын
Thank you so much for sharing your experience and knowledge, Sir.
@Dysfunctional704 8 ай бұрын
Bro has pumped out 3 AI projects this month 💀 Keep going dude
@razexamvs8756 8 ай бұрын
Very good video..will be doing this today itself..
@randerins 8 ай бұрын
Great project again, Elliott! Would be even better if you added timestamps on the video. It makes it easier to follow along. Just a suggestion
@Tomas-te8wq 4 ай бұрын
great tutorial! learned a lot
@hemanthchowdary7150 8 ай бұрын
Awesome 🤩 Thank you :)😊
@egretfx 8 ай бұрын
Bruh you are a masterpiece!
@daxuano8415 8 ай бұрын
love it!
@gilaguilar7130 8 ай бұрын
Thanks for sharing your knowledge with us, it helped me fill in some unknowns about working with NextJS. Drizzle is amazing I've heard about it but never thought about using it. Also the time to live for the image url I didn't know about. You really broke it down so it was easy to follow, and helped to answer questions I had. Lovely work! This was an excellent session, definitely subscribed.
@marvinkr 8 ай бұрын
Great vid! Can you do an Airbnb clone next? Would be cool !
@YassineDorgaa 8 ай бұрын
nice work man
@druvkotwani9643 8 ай бұрын
glad, i found your channel.
@prashlovessamosa 8 ай бұрын
Bro last one hasn't completed yet You came with another. Thanks for sharing.
@razexamvs8756 8 ай бұрын
Hey if you complete the ai saas pdfchat one then please can you share your repo?it will be very helpful
@abdelilahrhazal9398 8 ай бұрын
I like so much your work friend, I hope to see video about ai video creator tool as saas
@itsliquidistic8239 8 ай бұрын
Great tutorial bro
@TgReviewsIndia 2 ай бұрын
Thanks!!
@bakowicz4909 8 ай бұрын
Man, you're boss :D
@moadben5933 8 ай бұрын
Was amazing!! And whats the font name ur using in vscode please ?
@warisamiransari5199 8 ай бұрын
Can I follow this to add this same project in my resume
@starlord7526 8 ай бұрын
Hi Elliott, what are the prerequisites for this project mate?
@biplabmondal-vb5oo 7 ай бұрын
On 47:11 when I push the changes using "npx drizzle-kit push:pg" I'm getting "No config path provided, using default path". Later I copied your code from the github and still got the same.
@pollux_youtubehd1558 8 ай бұрын
Nıce job bro
@parkerrex 8 ай бұрын
How would you speed up the function for creating the notebook?
@taymeedouglas1931 7 ай бұрын
this projext is amazing, thank you Elliot .. So i have been following the step by step proxess of this video but suddenly i keep getting this error :Server Error Error: Cannot read properties of undefined (reading 'bind') This error happened while generating the page. Any console logs will be displayed in the terminal window. what do i do?
@raphaeljaggerd3585 6 ай бұрын
Brother if you could make a milanote clone that would be ridiculously awesome
@gebretnsae 8 ай бұрын
impressive, and could you build a web subscription based chatGPT 3.5 clone ?
@razexamvs8756 8 ай бұрын
Hey Elliott can you please look in the previous tutorial about ai saas pdf chat that you made... it's really giving errors at many places.. please look into the matter..
@sahilsinhmar8891 8 ай бұрын
bro can you share the fonts and themes you are using in the vscode and your terminal thanks.
@user-xy3ec4tu7j 8 ай бұрын
nice bro build metagpt that deployed hugginface ty
@tanw89 3 ай бұрын
Hi Elliot, great work! I have a question though. When I am in the specific notes page with the dynamic url ("..../notebook/3"), and I click the Back button, I go back to a cached version of the dashboard. The new note which I have just created is not shown. I have to manually press F5 in order to refresh the page to see the new note I have just created. Is there a way to make the Next go back to a dashboard that has the most refreshed state of data?
@sanketzambare8238 3 ай бұрын
having same issue, and looking forward solution for the same!! Lemme know if you solved it
@johnubz1989 8 ай бұрын
First comment thank you sir 😊😊
@ilmanmanarulqori5632 8 ай бұрын
Awesome 🎉 but why ur video res just 360? not 1080 or 720
@elliottchong 8 ай бұрын
please wait for youtube to process the video... it will be 1080p in a few hours
@razac_zr 7 ай бұрын
If you don't want to edit the content, How can you use the data and display it as normal HTML?
@JRichens 7 ай бұрын
Thank you - having trouble with typewriter-effect only showing the emoji on first render then just question marks. Any idea? tried on multiple devices, table, phone and pc
@minhchung1669 4 ай бұрын
Did you fix it? I'm getting the same thing
@JRichens 4 ай бұрын
No, didn't get this fixed. Very odd!@@minhchung1669
@khantsithu4383 8 ай бұрын
Can you add a env.example?
@bloomflora1105 Ай бұрын
why dont you write the fetch and user DB query as a server action ?
@rohit_700 8 ай бұрын
Hi guys, does it require chatgpt4 subscription?
@user-fi6po9qm9q 8 ай бұрын
I got error when I was creating a clerk authentication it will show missing api key, pls tell the path of .env file
@maverick456-33 8 ай бұрын
Why don't you use Prisma??
@kunalpradhan8735 7 ай бұрын
How to upload this web application on cloud?
@merrygold9409 8 ай бұрын
Mate yourLive Project Link is not working ?
@warisamiransari5199 8 ай бұрын
Hey i have the mern stack knowledge
@user-hm9rf6dd6l 8 ай бұрын
класс
@biplabmondal-vb5oo 8 ай бұрын
Bro, please try to upload videos at least 720p or 1080p. 360p is very difficult to follow the code.
@starlord7526 8 ай бұрын
its delay in KZfaq processing, now if you see, 1080p is already available Biplab
@pollux_youtubehd1558 8 ай бұрын
can u take vıdoe about roadmap how to come frontend developer ın 2024 :) step by step
@wakibtz7134 8 ай бұрын
Hi! I have problem with openai. I make all like you, create new api key, but when i make prompt i get: { error: { message: 'You exceeded your current quota, please check your plan and billing details.', type: 'insufficient_quota', param: null, code: 'insufficient_quota' } }
@razexamvs8756 8 ай бұрын
Change the key
@wakibtz7134 8 ай бұрын
@@razexamvs8756 i tried different keys. I created new and still same problem
@vedmishravlogging 8 ай бұрын
video quality is not up to the mark plz upload video again
@_vetrivel25 8 ай бұрын
My sincere request can you please add guest login to this project and to all of your projects because sometimes when recruiters see our project and click on the link they are interested in singing in, so it would be useful if there is a guest login button so that when they click on it, it automatically signs the user(ie. the user doesn't have to enter email id and password)
@timmy4463 8 ай бұрын
Clerk provides that, so you’ll just activate the email. And you should be fine.
@anthonymann7679 8 ай бұрын
Do it yourself, it's not hard and its great practice in problem solving especially if you want a job.
@maskman4821 8 ай бұрын
Video quality is only up to 360p, very painful to watch the video 😓😥😑
@elliottchong 8 ай бұрын
please wait for youtube to process the video... it will be 1080p in a few hours
@asadmehboob1300 8 ай бұрын
Quality is very low...😢
@Usq7213 8 ай бұрын
get this error, any help?: ⨯ node_modules\@clerk extjs\dist\esm\app-router\server\utils.js (10:10) @ buildRequestLike ⨯ Clerk: auth() and currentUser() are only supported in App Router (/app directory). If you're using /pages, try getAuth() instead. Original error: Error: Invariant: headers() expects to have requestAsyncStorage, none available. null
@sourabpatil729 8 ай бұрын
Fixed this?
@sanch1t 4 ай бұрын
Any fix?
@sanch1t 4 ай бұрын
any fix ? @Usq72123 @@sourabpatil729
@user-wm8vn5em5c 2 ай бұрын
fixed ??
@dougr-wd4kf 6 ай бұрын
TypeError: Cannot read properties of undefined (reading '0') at generateImagePrompt (webpack-internal:///(rsc)/./src/lib/openai.ts:28:47) Hello friends, I'm having this problem above, where when checking the line in the file I don't find any error in the indicated line. I'm in the Image Prompt part and I ended up stuck. Can anyone help me? Thank you
@sujashbarman6556 6 ай бұрын
I am getting the same error. Have you found a solution yet? If you have, please reach out!
@su-shubhams 6 ай бұрын
if you will do console.log on data of response.json() you will get this message in json 'You exceeded your current quota, please check your plan and billing details.
@user-vp9tc3cd5p 5 ай бұрын
You should add credit balance to use it. Minimum === $5. After that u can use it.
@sanch1t 4 ай бұрын
@@user-vp9tc3cd5p how do i do that? where do i add it?
Programming with Mosh
Рет қаралды 532 М.
JavaScript Mastery
Рет қаралды 1,4 МЛН
Indian Coders
Рет қаралды 25 М.
Jan Marshal
Рет қаралды 27 М.