ðŸ”ī Let’s build an AI NOTION Clone with NEXT.JS 14! (Realtime Collab, Cloudflare, Clerk, Firebase)

āđāļŠāļĢāđŒ
āļāļąāļ‡
  • āđ€āļœāļĒāđāļžāļĢāđˆāđ€āļĄāļ·āđˆāļ­ 23 āļŠ.āļ„. 2024

āļ„āļ§āļēāļĄāļ„āļīāļ”āđ€āļŦāđ‡āļ™ • 55

  • @Renardcorreajr
    @Renardcorreajr āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +5

    Its been a while since I sat through one of your crazy dev sessions.
    So much growth since and amazing build!
    Just banged this one out and loving it man! Keep it up Sonny!

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

      Thank you so much and it’s awesome to have watching once again!!! #PAPAFAM

  • @yoJuicy
    @yoJuicy āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +6

    Cloudflare workers was a great idea. This is instantly one of the best examples for workers+next.js. very applicable for astro frondends too.

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +2

      Incredible right!! They are so fast & powerful I’m super impressedðŸ’Ŋ

    • @yoJuicy
      @yoJuicy āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

      4:43:30

  • @thekingsident
    @thekingsident 8 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    I started working on this build on July 18. I ran into some issues with OpenAI API request quota, I will get a paid subscription later to ensure it works. Anyway, I just now deployed. I have really learned a ton from this video. Thanks Sonny, you are a real one

  • @HafizMuhammadUsmanNasim
    @HafizMuhammadUsmanNasim āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

    Amazing, your energy and commitment is off the roof. You are so underrated.

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

      Thank you so so much I appreciate you!

  • @ooweew
    @ooweew 24 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    Thanks again for this awesome video!
    For those wondering why "doc" in breadcrumbs navigated to "/doc", and not (for example) "localhost:3000/doc":
    In Breadcrumbs.tsx, the "path"-const is "const segments = path.split('/')", but can instead be "const segments = path.split('/').filter(Boolean);".
    Sonny mentioned this earlier before removing "... .filter(Boolean)" 👍

  • @user-ow8bi4ut4k
    @user-ow8bi4ut4k āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

    This is crazy and toppest ðŸ”Ĩ As usual u've made highly qualitative content, thank u✊
    Please could u consider of making a video about how u came to this level, ur roadmap, experience journey 🙏 that would be very interesting & informative for ur subscribers

  • @aryanapardeshi
    @aryanapardeshi āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    Seeing you motivated to sit down for long sessions now have changed my opionion and got focused

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

      Love this!

  • @sophia_castillo___
    @sophia_castillo___ āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    Thank you for creating this challenging but exciting build ~ 1st hour done, 4 hrs more to go !

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

      Awesome!! I’m glad you’re enjoying it!

  • @julissacotillo
    @julissacotillo 25 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    Cloudflare workers +1!! thanks for the great build video

  • @abdu1wahid105
    @abdu1wahid105 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    Nice collab feature: Big-Up Jay in the booth!

  • @webprodigies
    @webprodigies āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

    This is mad crazy! Great stuff âĪ

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

      Thanks dude! Keep smashing with your builds too - they’re ðŸ”ĨðŸ”ĨðŸ”Ĩ

  • @johngill-ck1ri
    @johngill-ck1ri 10 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    Hey Sonny
    Finished the build for this, its really great and I've demoed it to a lot of people now!
    Please you do a video on the cloudflare workers, as mentioned in the video, it would be greatly appreciated :)
    I've build a knowledge base feature and this would be amazing to reference for our teams learning etc...

  • @mtdmashigo876
    @mtdmashigo876 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    Thanks for build, been confused on what are the benefits of using server actions and this build put things in perspective for me

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

      Awesome im glad to hear that!!!

  • @katkat_01
    @katkat_01 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

    Unreal!! Thank you so much!! ðŸ”Ĩ

  • @oone_piece
    @oone_piece āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    i like the way you explain the topic you made it look so easy. thanks mate

  • @DigitalAlchemyst
    @DigitalAlchemyst āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    Have not done this one yet, Ill be hammering this one out during down time on the 5 day AI challenge !!

  • @traggerosbourne6877
    @traggerosbourne6877 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

    Great job bro

  • @nicholasbazzoni7084
    @nicholasbazzoni7084 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    incredible build

  • @jdhshs12
    @jdhshs12 24 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    I would like to see a Whimsical Clone

  • @FMAMCLOCKRADIO1
    @FMAMCLOCKRADIO1 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    Great video!
    Quick question: What tool do you use when you draw and write on the screen, such as at 31:14?

    • @SonnySangha
      @SonnySangha  29 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē +1

      Screen brush

  • @enriquegrageda
    @enriquegrageda āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    Thanks bro 😊

  • @hooho491
    @hooho491 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +2

    Dude, awesome video! I just finished the video, but I'm a little discouraged when I think that it's impossible to do this project by myself without coding along with you. I've been learning web dev by myself for almost 2 years, I started learning react 6 months ago at a company as an intern, now my internship is finished, so I have free time until I find a new job. I want to improve myself and build these kinds of cool projects by myself, like without a tutorial, but there's a lot to learn, though, and I feel like I'm still a beginner. How can I achieve this?

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +2

      First off thank you so much for the support & good on you for tagging along! Don’t worry about this feeling its totally natural, keep exposing yourself to this content whether it be smaller videos on specific topics or practical larger builds - over time you’ll recognise the patterns and fundamentals and I’ve found this really helps students concrete in their knowledge especially on the basics! As for overcoming problems, I personally recommend you find a mentor, I mentor students inside our community/course Zero to Full stack hero: www.papareact.com/course, this is a great place to start with platinum and diamond for different coaching programs BUT either way just make sure you keep on progressing 1% each day and don’t compare to others, I’ve been coding for 13 years now and I still have moments of struggle its totally normal and its part of the process - embrace it and love it, here if you need that mentorship bud. Happy coding!

    • @hooho491
      @hooho491 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

      @@SonnySangha Thank you so much man! I really appreciate it

  • @mayankk2800
    @mayankk2800 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    What is the song at the start. Nice tutorial

  • @ilikerice2003
    @ilikerice2003 17 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    is the openai implentation part free?

  • @inv1ctu_545
    @inv1ctu_545 26 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    i just got done with setting up the cloudflare worker part. Now when I try to do "npm run dev" it gives me an undefined cause error. Is this supposed to happen because as you said the DNS propagation takes time?

  • @HafizMuhammadUsmanNasim
    @HafizMuhammadUsmanNasim 23 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    can't find the git repo for this any links please

  • @user-xy5vg7gs6z
    @user-xy5vg7gs6z āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    This is good
    Pls how can I get the playlist for free

  • @faisal8936
    @faisal8936 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    Hey sonny you content is ðŸ”Ĩ watching you from past 4 years,
    I wanted to ask about the server actions.
    Like I am creating a Full Stack application, used api routed with nextauth for authentication and all the different operations are done through server actions.
    So Is this a correct approach or is there any good practice I should implement?
    What do you think which is the best practice used in market!

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +2

      Thank you so much for the support!
      You can use either option here, Server actions can simplify things massively, you may consider different strategies based on caching mechanisms however even this is now primarily based on the fetch API etc.
      Whatever you do just remain consistent in a build with the approachðŸ’Ŋ

    • @faisal8936
      @faisal8936 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

      @@SonnySangha Thanks for the suggestion it means a lot for me.

  • @RahulGupta-dm2gr
    @RahulGupta-dm2gr 8 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    Where is the github repo

  • @Ninja_bit
    @Ninja_bit 2 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    from Saadia Arabic thank you

    • @SonnySangha
      @SonnySangha  2 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

      ðŸ”ĨðŸ’ŊðŸ’ŠðŸ―
      Thank you!!

  • @ankushladani496
    @ankushladani496 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

    Are you from India? Because your name is similar to Indian.

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

      This questionâ€Ķ lol
      Family roots go back to Punjab yes - let’s focus on the video now

    • @ankushladani496
      @ankushladani496 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

      @@SonnySangha Great to hear that. 😄🚀

  • @usmanmarkaz
    @usmanmarkaz āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

    can you please make it also with React native or Please make Full stack apps with react native plz plz sir love from pakistan

  • @Devaratha6823
    @Devaratha6823 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

    Hey Want projects on web3 please âĪ

    • @SonnySangha
      @SonnySangha  āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™ +1

      There are many on the channel!

    • @Devaratha6823
      @Devaratha6823 āļŦāļĨāļēāļĒāđ€āļ”āļ·āļ­āļ™āļāđˆāļ­āļ™

      @@SonnySangha Can you please make an more advanced Project with nextjs and Firebase..!

  • @bankbane123
    @bankbane123 4 āļ§āļąāļ™āļ—āļĩāđˆāļœāđˆāļēāļ™āļĄāļē

    hello sonny i've some problem on deploy on vercel it's about service_key.json that we assign to .gitignore so i got error
    Module not found: Can't resolve '@/service_key.json' on firebase-admin.ts
    how to fit it ? vercel not support include json file