Build and Deploy a Full Stack Notion Clone | NextJS 13, DALL•E, DrizzleORM, OpenAI, TypeScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ม.ค. 2025

ความคิดเห็น •

  • @elliottchong
    @elliottchong  ปีที่แล้ว +6

    📖 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
      @madycreations8533 ปีที่แล้ว

      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 .

  • @skhomo
    @skhomo ปีที่แล้ว +22

    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

  • @parkerrex
    @parkerrex ปีที่แล้ว +4

    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
      @marvinkr ปีที่แล้ว

      Agreeing with this approach

  • @Blanden73693
    @Blanden73693 ปีที่แล้ว +2

    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!

  • @longtang8901
    @longtang8901 ปีที่แล้ว +3

    Thank You Elliot for making this project and taking time to explain the process

  • @randerins
    @randerins ปีที่แล้ว +7

    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

  • @Dysfunctional704
    @Dysfunctional704 ปีที่แล้ว +1

    Bro has pumped out 3 AI projects this month 💀
    Keep going dude

  • @moayaan1911
    @moayaan1911 8 หลายเดือนก่อน

    Hey elliott great video, please dont stop keep posting such videos

  • @biplabmondal-vb5oo
    @biplabmondal-vb5oo ปีที่แล้ว +1

    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.

  • @Diego_Cabrera
    @Diego_Cabrera ปีที่แล้ว +2

    Amazing video, elliott!

  • @anthonymann7679
    @anthonymann7679 ปีที่แล้ว

    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.

  • @prashlovessamosa
    @prashlovessamosa ปีที่แล้ว

    Bro last one hasn't completed yet
    You came with another.
    Thanks for sharing.

    • @razexamvs8756
      @razexamvs8756 ปีที่แล้ว

      Hey if you complete the ai saas pdfchat one then please can you share your repo?it will be very helpful

  • @Victor-wh9bs
    @Victor-wh9bs 8 หลายเดือนก่อน

    Thanks. Great explanation. looking forward to more next level tutorials.

  • @Gallowtown
    @Gallowtown ปีที่แล้ว

    Ohhh man this is really cool, congrats!

  • @razexamvs8756
    @razexamvs8756 ปีที่แล้ว +1

    Very good video..will be doing this today itself..

  • @marvinkr
    @marvinkr ปีที่แล้ว +1

    Great vid! Can you do an Airbnb clone next? Would be cool !

  • @nassersnoop6445
    @nassersnoop6445 ปีที่แล้ว

    awesome video Mr. Chong

  • @dalestewart
    @dalestewart ปีที่แล้ว

    Another professional tutorial!

  • @f41z37
    @f41z37 ปีที่แล้ว

    Exactly what I've been looking for!

  • @uminhtetoo
    @uminhtetoo ปีที่แล้ว

    Thank you so much for sharing your experience and knowledge, Sir.

  • @gilaguilar7130
    @gilaguilar7130 ปีที่แล้ว

    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.

  • @warisamiransari5199
    @warisamiransari5199 ปีที่แล้ว +1

    Can I follow this to add this same project in my resume

  • @tlobatowasd
    @tlobatowasd 10 หลายเดือนก่อน

    great tutorial! learned a lot

  • @JRichens
    @JRichens ปีที่แล้ว +1

    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
      @minhchung1669 11 หลายเดือนก่อน

      Did you fix it? I'm getting the same thing

    • @JRichens
      @JRichens 11 หลายเดือนก่อน

      No, didn't get this fixed. Very odd!@@minhchung1669

  • @hemanthchowdary7150
    @hemanthchowdary7150 ปีที่แล้ว +1

    Awesome 🤩
    Thank you :)😊

  • @abdelilahrhazal9398
    @abdelilahrhazal9398 ปีที่แล้ว

    I like so much your work friend, I hope to see video about ai video creator tool as saas

  • @taymeedouglas1931
    @taymeedouglas1931 ปีที่แล้ว

    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?

  • @imalisonnguyenangel3938
    @imalisonnguyenangel3938 2 หลายเดือนก่อน

    Greetings from Vietnam

  • @egretfx
    @egretfx ปีที่แล้ว

    Bruh you are a masterpiece!

  • @anikethend7828
    @anikethend7828 5 หลายเดือนก่อน

    Thanks for great explaination...

  • @daxuano8415
    @daxuano8415 ปีที่แล้ว +1

    love it!

  • @bloomflora1105
    @bloomflora1105 7 หลายเดือนก่อน

    why dont you write the fetch and user DB query as a server action ?

  • @druvkotwani9643
    @druvkotwani9643 ปีที่แล้ว

    glad, i found your channel.

  • @MrFact-e9r
    @MrFact-e9r ปีที่แล้ว

    I got error when I was creating a clerk authentication it will show missing api key, pls tell the path of .env file

  • @moadben5933
    @moadben5933 ปีที่แล้ว

    Was amazing!! And whats the font name ur using in vscode please ?

  • @razac_zr
    @razac_zr ปีที่แล้ว

    If you don't want to edit the content, How can you use the data and display it as normal HTML?

  • @YassineDorgaa
    @YassineDorgaa ปีที่แล้ว

    nice work man

  • @itsliquidistic8239
    @itsliquidistic8239 ปีที่แล้ว

    Great tutorial bro

  • @parkerrex
    @parkerrex ปีที่แล้ว

    How would you speed up the function for creating the notebook?

  • @razexamvs8756
    @razexamvs8756 ปีที่แล้ว

    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
    @sahilsinhmar8891 ปีที่แล้ว

    bro can you share the fonts and themes you are using in the vscode and your terminal thanks.

  • @tanw89
    @tanw89 10 หลายเดือนก่อน

    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
      @sanketzambare8238 10 หลายเดือนก่อน +1

      having same issue, and looking forward solution for the same!!
      Lemme know if you solved it

  • @tropiccoder
    @tropiccoder 3 หลายเดือนก่อน

    the goat

  • @ilmanmanarulqori5632
    @ilmanmanarulqori5632 ปีที่แล้ว

    Awesome 🎉 but why ur video res just 360? not 1080 or 720

    • @elliottchong
      @elliottchong  ปีที่แล้ว +1

      please wait for youtube to process the video... it will be 1080p in a few hours

  • @kunalpradhan8735
    @kunalpradhan8735 ปีที่แล้ว

    How to upload this web application on cloud?

  • @starlord7526
    @starlord7526 ปีที่แล้ว

    Hi Elliott, what are the prerequisites for this project mate?

  • @raphaeljaggerd3585
    @raphaeljaggerd3585 ปีที่แล้ว

    Brother if you could make a milanote clone that would be ridiculously awesome

  • @merrygold9409
    @merrygold9409 ปีที่แล้ว

    Mate yourLive Project Link is not working ?

  • @khantsithu4383
    @khantsithu4383 ปีที่แล้ว

    Can you add a env.example?

  • @maverick456-33
    @maverick456-33 ปีที่แล้ว

    Why don't you use Prisma??

  • @wakibtz7134
    @wakibtz7134 ปีที่แล้ว

    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
      @razexamvs8756 ปีที่แล้ว

      Change the key

    • @wakibtz7134
      @wakibtz7134 ปีที่แล้ว

      @@razexamvs8756 i tried different keys. I created new and still same problem

  • @rohit_700
    @rohit_700 ปีที่แล้ว

    Hi guys, does it require chatgpt4 subscription?

  • @HokDokinz
    @HokDokinz ปีที่แล้ว

    First comment thank you sir 😊😊

  • @gebretnsae
    @gebretnsae ปีที่แล้ว

    impressive, and could you build a web subscription based chatGPT 3.5 clone ?

  • @TgReviewsIndia
    @TgReviewsIndia 9 หลายเดือนก่อน

    Thanks!!

  • @ТүвшинбаярБаасансүрэн
    @ТүвшинбаярБаасансүрэн ปีที่แล้ว

    nice bro build metagpt that deployed hugginface ty

  • @biplabmondal-vb5oo
    @biplabmondal-vb5oo ปีที่แล้ว

    Bro, please try to upload videos at least 720p or 1080p. 360p is very difficult to follow the code.

    • @starlord7526
      @starlord7526 ปีที่แล้ว +1

      its delay in TH-cam processing, now if you see, 1080p is already available Biplab

  • @bakowicz4909
    @bakowicz4909 ปีที่แล้ว

    Man, you're boss :D

  • @pollux_youtubehd1558
    @pollux_youtubehd1558 ปีที่แล้ว

    Nıce job bro

  • @warisamiransari5199
    @warisamiransari5199 ปีที่แล้ว +1

    Hey i have the mern stack knowledge

  • @asadmehboob1300
    @asadmehboob1300 ปีที่แล้ว

    Quality is very low...😢

  • @vedmishravlogging
    @vedmishravlogging ปีที่แล้ว

    video quality is not up to the mark plz upload video again

  • @pollux_youtubehd1558
    @pollux_youtubehd1558 ปีที่แล้ว

    can u take vıdoe about roadmap how to come frontend developer ın 2024 :) step by step

  • @_vetrivel25
    @_vetrivel25 ปีที่แล้ว

    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
      @timmy4463 ปีที่แล้ว

      Clerk provides that, so you’ll just activate the email. And you should be fine.

    • @anthonymann7679
      @anthonymann7679 ปีที่แล้ว

      Do it yourself, it's not hard and its great practice in problem solving especially if you want a job.

  • @Osmanity
    @Osmanity ปีที่แล้ว

    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
      @sourabpatil729 ปีที่แล้ว

      Fixed this?

    • @sanch1t
      @sanch1t 11 หลายเดือนก่อน

      Any fix?

    • @sanch1t
      @sanch1t 11 หลายเดือนก่อน

      any fix ? @Usq72123 @@sourabpatil729

    • @Anishkumar-w2l5x
      @Anishkumar-w2l5x 9 หลายเดือนก่อน

      fixed ??

  • @someddd-s2w
    @someddd-s2w ปีที่แล้ว

    класс

  • @maskman4821
    @maskman4821 ปีที่แล้ว

    Video quality is only up to 360p, very painful to watch the video 😓😥😑

    • @elliottchong
      @elliottchong  ปีที่แล้ว

      please wait for youtube to process the video... it will be 1080p in a few hours

  • @romanregins_0754
    @romanregins_0754 2 หลายเดือนก่อน

    Is it free??

  • @dougr-wd4kf
    @dougr-wd4kf ปีที่แล้ว +1

    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
      @sujashbarman6556 ปีที่แล้ว +1

      I am getting the same error. Have you found a solution yet? If you have, please reach out!

    • @su-shubhams
      @su-shubhams ปีที่แล้ว

      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.

    • @조동준-o8q
      @조동준-o8q 11 หลายเดือนก่อน +1

      You should add credit balance to use it. Minimum === $5. After that u can use it.

    • @sanch1t
      @sanch1t 11 หลายเดือนก่อน

      @@조동준-o8q how do i do that? where do i add it?