Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023

Поділитися
Вставка
  • Опубліковано 26 гру 2024

КОМЕНТАРІ • 1,9 тис.

  • @SushilKumar-yb5ou
    @SushilKumar-yb5ou Рік тому +379

    Being in the IT industry for 19+ years I have never seen someone so organized and really have the mindset of a true developer. Hats off!

    • @codewithantonio
      @codewithantonio  Рік тому +25

      Thank you for your kind words, hope it was helpful!

    • @fullstackprojects
      @fullstackprojects Рік тому +2

      Boss, Salute from Finland
      @@codewithantonio

    • @ceejta7938
      @ceejta7938 10 місяців тому

      ​@codewithantonio you available for a similar scope?

    • @Ash-yd8bl
      @Ash-yd8bl 6 місяців тому

      19+ years and never seen anyone organized this much and have the mindset of a true developer?

  • @chihhaolin8771
    @chihhaolin8771 Рік тому +46

    .env setting temp note:
    1:36:40 DATABASE_URL from mongoDB
    2:32:59 social login for github
    2:38:01 socail login for google
    4:19:12 upload_images

    • @kevin-mv6qf
      @kevin-mv6qf Рік тому +2

      thank you, was trying to find these

    • @codesera9416
      @codesera9416 Рік тому +1

      Bro that is what I looking for 🤡🤜🤛

    • @raoufgul5604
      @raoufgul5604 11 місяців тому +1

      Images not uploaded

    • @frankvidal8672
      @frankvidal8672 7 місяців тому

      Thank you so much bro

  • @janekostov7674
    @janekostov7674 11 місяців тому +8

    The main reason I started to work with Next.js is YOU Antonio. You are so well organized and smooth with the your skills to make this brilliant project. Najveci pozdrav iz Makedonije, prijatelju. Produzi sa ovaj brilijantan posao !

  • @arikedada
    @arikedada Рік тому +59

    24:45- -Day1 (setup & navbar UI (in progress)
    47:20--Day2 (styling the Modal with logic)
    56:23 Day3(styling the Button component)
    1:03:33 Day4(started creating the useRegisterModal)
    1:08:04 Day5(creating the RegisterModal)
    (recap 36:37) Day6
    (recap 54:50) Day7
    1:18:54 Day 8(created the input component)
    1:32:00 Day 9 (added the footer to the registerModal)
    ** life happenned, almost gave up but I am back again, I want to grow and get better **
    2:19:15 Day 10 (db setup and created the login Modal)
    2:34:38 Day 11(google and github sign in)
    2:57:33 Day 12(category ui)
    3: 01: 40 Day 13 (category ui)

  • @jackhuang9690
    @jackhuang9690 Рік тому +241

    I am highly impressed with the clean code architecture that you have utilized in your coding. Despite using quite some third-party libraries (which are necessary), you have customized most of the components, even small ones like buttons, from scratch based on the specific project requirements. I particularly appreciate how you have abstracted commonly used components and utilized them throughout the entire application. Your code reflects the true fundamental concepts of React which shows how beautiful it can be. Thank you for sharing your valuable content and appreciate your great effort!

  • @binfuwong8859
    @binfuwong8859 Рік тому +50

    I started this tutorial almost right after it was released, and it took me almost a week because there were so much advanced content to digest. I totally enjoyed this masterclass of yours, which gave an insight on the kind of things developers at big corporations do. This is the second tutorial that I'm doing after the Netflix one, and again thank you so much for walking through the nitty-gritty details step-by-step which is immensely valuable for self-taught developers like myself. I'll dig deeper into the concepts that I'm still weak at, and I look forward to learning from your tutorials again! God Bless!

    • @codewithantonio
      @codewithantonio  Рік тому +7

      Thank you for the detailed review, glad you like it!

    • @yusufnusrat
      @yusufnusrat Рік тому +1

      hey man, please i would really appreciate if you helped me, the error is when connect to the MongoDB, and when I did the user test sign in while opened the network in developers tool, at 2:09:00 I get error API,register is highlighted red in mine, and when I checked the monogdb database it didn't register the user, could you please help me, the error it says in the network, api.register is, Status code: 🔴404 not found.

    • @Ismail-wi3cj
      @Ismail-wi3cj Рік тому

      @@yusufnusrat I think you haven't successfully connected to the atlas cluster, can you give me more insights ?

    • @Hasanbas-rv3vm
      @Hasanbas-rv3vm Рік тому

      Can this project technically be deployed? Like is it use ready for?

  • @abdullahkarahan61
    @abdullahkarahan61 Рік тому +21

    I've been improving myself by watching and doing project videos for a long time. I've learned a lot of new things.
    But Antonio you're amazing man. You've taken me to a higher level and opened my vision.
    Please continue with your projects and briefly explain every step you take.

    • @codewithantonio
      @codewithantonio  Рік тому +2

      Very happy to hear that, thank you for the nice comment!

    • @blendx__x9153
      @blendx__x9153 Рік тому +1

      should i start this tutorial having 0 knowledge in backend ?

    • @abdullahkarahan61
      @abdullahkarahan61 Рік тому +1

      @@blendx__x9153 of course you should start

  • @SingTingz31
    @SingTingz31 Рік тому +36

    so far, 32 minutes in, and this is by far one of the cleanest tutorials ever for learning web development. congrats!

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Thank you a lot for the kind words!

    • @codingjogo
      @codingjogo 10 місяців тому

      is the code of next js 13 is the same as 14?

  • @이원일-l8r
    @이원일-l8r Рік тому +4

    There is no UA-cam like this in Korea, so I am studying while looking up foreign videos.
    It's so convenient to study because it's cleaner and more systematic than any UA-cam I've looked up.
    It's amazing that there are four videos like this. I hope you film the next video quickly. please please please please ㅠㅠㅠㅠ

    • @codewithantonio
      @codewithantonio  Рік тому

      Thank you for watching and leaving a nice comment! New video is coming soon!

  • @richierob62
    @richierob62 Рік тому +33

    I've been a developer for over 15 years, and decided to switch to NextJS recently. I decided to create a boilerplate that utilized my favorite techs, proper auth, image upload, etc. I am halfway through the build while following your video (I only have a half hour here and there), but I couldn't wait to share that this is quite possibly the best video tutorial I've invested time in following. Great job, and thank you.

  • @AminurRahman-tj3sp
    @AminurRahman-tj3sp Рік тому +5

    took me a little over 2 weeks to finish this tutorial :) i made sure to learn and understand effectively without just following along. thank you so much :) i'm looking forward to following along with your other tutorials

  • @dongyuexu4823
    @dongyuexu4823 Рік тому +4

    This full stack app is really comprehensive and functional, and includes the final deployment! Thank you so much Antonio! Keep making great tutorials like this!

  • @julia_rodrigo
    @julia_rodrigo Рік тому +2

    I am on timestamp 1:12:50 , and this is the most informative tutorial ever ! xD now I know what's going on behind those react hooks and understand reusable components in the most comprehensive way. And I don't fully understand everything unless I go back over what was said. But this is the tutorial I'd definitely recommend to actually making a full stack app from complete scratch. The hooks part was so interesting. And when we actually make the registerModal and use it, it was so cool to see how all those preparation over one small simple component works. I'm looking forward for the rest of the tutorial. Thank you so much for this :)

  • @ofwoodfalegnameria1107
    @ofwoodfalegnameria1107 Рік тому +3

    Antonio, your tutorial is simply the best I founded till now on the net. I passed my last 6 month studing and having problem to understand completely the processes envolved. But your teaching approach is simply awesome. Completed 3 hours by now, reading the documentation of each new command I never used. Tanks a lot. Your efforts are surely helping many people

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Very happy to hear that, thank you for watching!

  • @lucianohorta5976
    @lucianohorta5976 Рік тому +1

    I just stared watching, just hit 1:23 and I'm loving, you are very good at it, I'm trying to follow you but you are amazing. Good job man!!

  • @MikeBertelsenDK
    @MikeBertelsenDK Рік тому +5

    I have not watched the video but the almost 9 hour tutorial for free is amazing.
    Kudos to you Antonio for the work behind all of this. I hope you'll live a long healthy life.

  • @santanu29
    @santanu29 9 місяців тому +2

    Completed. Some of the things I learned in this video are Zustand, Next-Auth, Prisma, how to keep the code clean and organised. The project structure is amazing.

    • @Sky-yy
      @Sky-yy 9 місяців тому

      How was the experience, I'm thinking to start ,any problems faced ?

  • @hipposhark
    @hipposhark Рік тому +1

    dam what the heck man, so clean! free tutorial! you da best !!! cant believe people actually make this stuff
    the dedication, hope you get to 1 mil subs bro this is quality content

  • @sulemanmughal5397
    @sulemanmughal5397 Рік тому +4

    A very underrated channel on youtube, great job bro, i learned alot.

  • @betterbehappythannot3605
    @betterbehappythannot3605 Рік тому +2

    I have watched tons of great videos, but this one is the best and I am saying this as someone who has watched hundreds of projects.

  • @snivels
    @snivels Рік тому +6

    What an incredible course. You are an amazing teacher! Please keep doing what you're doing, it's hard to find this kind of quality content, even in paid format.

  • @AnsisPlepis
    @AnsisPlepis Рік тому +2

    The fact that you dont overwhelm with a 300 NPM package installation at the beginning is very nice, rather you install them when you actually need them. Nice video

  • @abdelrahman.abdelaal
    @abdelrahman.abdelaal Рік тому +18

    Wow, what an amazing video! Antonio, you really have a gift for explaining complex topics in a way that's easy to understand. I learned so much. However, while it's tempting to just copy what Antonio does in the video, it's important to remember that true learning comes from actually working with the frameworks and tools yourself, so don't just rely on this video as a crutch. Thank you, Antonio, for the incredible tutorial and for inspiring us to take our skills to the next level!

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Thank you for the nice words, glad it helped you :)

    • @codingjogo
      @codingjogo 10 місяців тому

      is the code of next js 13 is the same as 14?

  • @omarimai7428
    @omarimai7428 Рік тому +2

    To be honest, I watched the video to see how others code, and I was fascinated by how efficient and clean the code was. I also discovered some new things . Thank you.

  • @pjoandet
    @pjoandet Рік тому +4

    Suddenly I have great weekend plans! Will watch it and follow along.
    Thank you so much!🤠

  • @machezadzabala4985
    @machezadzabala4985 Рік тому +3

    This is hands down the best code along video I've ever come across. 3 days in and I've learned so much. Excellent work! 🔥🔥🔥🔥🔥🔥

  • @kushalsaini8095
    @kushalsaini8095 Рік тому +12

    Started this on
    Jul 25 and end this on
    Sept 1st.
    Amazing Amazing Experience 🖤

  • @oscargm1979
    @oscargm1979 Рік тому +8

    I really suggest you whenever you have common or global components like Avatar,Button,EmpyState,etc wrap them in a folder too(like commons or shared).Besides that I am impressed with your level,explanations and speed of typing :)). Really amazing job

  • @shahnawaz-7827
    @shahnawaz-7827 Рік тому +2

    Thanks a lot Sir Antonio. You are the best teacher I ever met with. After Netflix and Twitter Projects, I also finally competed Airbnb project today.

  • @pablopenia
    @pablopenia Рік тому +7

    for those having problems with mongo string, you had to add the name you want to your first database at the end (where antonio uses 'test'). I was struggling searching the name but in fact mongo creates the database with the name you specify on first push.

    • @malebolanga3099
      @malebolanga3099 Рік тому

      i dont understand

    • @PorkopekPeres
      @PorkopekPeres Рік тому

      @@malebolanga3099 he is referring to ua-cam.com/video/c_-b_isI4vg/v-deo.html

    • @PorkopekPeres
      @PorkopekPeres Рік тому

      This is in minute 1:39:30, or ua-cam.com/video/c_-b_isI4vg/v-deo.html

    • @haha-eg8fj
      @haha-eg8fj 11 місяців тому

      ​@@malebolanga3099 He is not explaining it very clearly. In MongoDB atlas, the default database name is test. But you can give it your customized database name by simply put any name you want at the end of the slash "/". So that MongoDB will create a database with that name for you. From then on every time you use the connection string it will know you want to access that database.

  • @SoverignBeing2023
    @SoverignBeing2023 3 місяці тому

    Hey Antonio, thank you so much for this amazing tutorial. It took me 4 days of non-stop coding but I finally completed it and it works flawlessly. TYSM!

  • @crypt0nerd621
    @crypt0nerd621 Рік тому +3

    A server component can have a client component as a child. There is no need to mark a server component as a client if there is no need. Very nice tutorial!

    • @codewithantonio
      @codewithantonio  Рік тому

      Thanks! I was still figuring out server / client components here and wanted to explictilty mark stuff just in case it changes in the future so people dont get errors!

  • @coding-with-bob
    @coding-with-bob Рік тому +1

    I just start learning about react but i can understand 50-60% your code, keep working man ur code was so fr good af. Huge love

  • @otaviobarros7102
    @otaviobarros7102 Рік тому +10

    Your content is awesome Antonio. Thanks for all the knowledge acquired, best ever development channel. So complete and easy to learn along. Also, greetings from Brazil

  • @egoiisticprince7977
    @egoiisticprince7977 Рік тому +1

    Keep them coming, I m going to subscribe as I have read comments, people are appreciating everything about you. I ll start with it, in a week. ThANKYOU

  • @mikedev4673
    @mikedev4673 Рік тому +4

    The most impressive project I have seen on UA-cam, liked your coding and teaching style! gave me inspiration to try create some website clone myself.

  • @pikusionexio
    @pikusionexio Рік тому +2

    Thank you Antonio for the tutorial, just finished it having done bits and bobs here and there for a week - it was my first large scale project from a youtube video and I can finally see why it's so helpful.
    I've never even heard of some of the React hooks like Callback and Memo but it forced me to readup about it. You made everything so simple, thank you for that - I'm excited to integrate some of these into some of my future projects!

    • @codewithantonio
      @codewithantonio  Рік тому

      Glad you like it!

    • @codewithrockzz
      @codewithrockzz Рік тому

      hey hi bro, i had a small issue while adding fav listings have you an any idea about it?

  • @codewithantonio
    @codewithantonio  Рік тому +92

    Want to get mentored by me? Apply at www.codewithantonio.com/mentorship
    Hello everyone! Happy to share a new tutorial with you. This time we explore the next Next 13 App Router and create a functionality-packed Airbnb clone! As always, if you get stuck in this very long tutorial, feel free to pop into Discord and we will help you out! discord.gg/SPEBvAz4Vd

    • @codewithantonio
      @codewithantonio  Рік тому +3

      @@SmartWizzard Hi, I explain what happens at 11:29 Because we add a "fixed" classname to the navbar, the body is hidden underneath it. We fix that later with padding when we start creating listings

    • @nothinginsideme
      @nothinginsideme Рік тому +1

      I am very grateful to you for providing us the project tutorial to keep ourselves upto date with the latest technologies.Thank you

    • @Kisuke777
      @Kisuke777 Рік тому

      ​@@codewithantonio please help me I'm having a problem while deploying the project it says 'next build' exited with 1

    • @syncsteve
      @syncsteve Рік тому

      I have a question not related to the code or problem with the code. Just want to ask about the tech stack used here. Can I join the discord?

    • @bphil4859
      @bphil4859 Рік тому

      can you integrate payments? tks sir!

  • @agustinfodrini
    @agustinfodrini Рік тому +3

    Hi Antonio I started this build a few days ago and so far am loving it! Learning A LOT. As a suggestion for a future video, I'd really love to see your take on a Letterboxd clone (as much as you can of course, I am aware that it is a very complex and vastly functional site). I feel like a build like that would add massive learning value to the community. Cheers man have a wonderful blessed day and thank you so much for everything you do you have no idea how life-changing these videos are.

    • @codewithantonio
      @codewithantonio  Рік тому +2

      Thank you for the nice words and a great suggestion!

  • @SimPwear84
    @SimPwear84 Рік тому +2

    I have never been so hyped over a tutorial. This looks very cool and I probably spend the rest of the weekend on my laptop coding along.

  • @dinhoangduy
    @dinhoangduy Рік тому +6

    You deserve more sub, thank you and hope you will bring to us something amazing like this one ❤

  • @FajarAndiPatappari
    @FajarAndiPatappari Рік тому +2

    1 minute in and realized it is almost 9 hours. Glorious 👏

  • @adrianolesniewicz392
    @adrianolesniewicz392 Рік тому +6

    Antonio, wow! I've always relied on UA-cam tutorials to self-learn web development and your video is incredible. I love how you structured and laid out each component, the tech stack is very modern, and you did well to stop and explain certain snippets that are somewhat abstract or more complicated. Your experience definitely shows, and it is truly inspiring.
    For future videos, it would be awesome if you could explain the reasoning behind using this tech stack and perhaps even areas that would require changes if one were planning to use such a tech stack for a medium-load production project. For example, some questions to just briefly bring up or consider could include whether these queries are efficient and performant, what data could be cached, whether one should use this many dependencies? Overall, such an amazing tutorial, you deserve all the love coming your way, and I hope to see your channel grow even more! Love from Poland and Canada

    • @codewithantonio
      @codewithantonio  Рік тому +3

      Thank you a lot for the nice comment and detailed suggestion, I will for sure try to improve in that way!

    • @shaileshgehlot9002
      @shaileshgehlot9002 Рік тому

      bro, is this responsive application?

    • @brothersamproduction7917
      @brothersamproduction7917 Рік тому

      Yes, check the intro@@shaileshgehlot9002

    • @haha-eg8fj
      @haha-eg8fj 11 місяців тому

      The video would be even longer if he explains the rationale behind choosing the tech stack. 😂

  • @vtv4373
    @vtv4373 Рік тому +2

    You just pop out of nowhere with some of the best dev content out there. Wow!

  • @dayrosieee
    @dayrosieee Рік тому +4

    Bravo!! thanks for your tutorial.
    If there is anyone who encounters 500 error like myself: trying this tutorial anywhere around this point: Jul, 2023, you may get the mongodb url without '/test'.
    If that happens to you, you can simply go to the main page of your mongodb atlas, and create the set of database by clicking (...) and name it 'test' : if you want to use the same url as this tutorial or use your own name and put it right at the end of the mongodb url.

  • @taylorpdavis
    @taylorpdavis Рік тому +1

    About to start knocking this bad boy out, but I wanted to just give a genuine thank you for a full 9-hour tutorial. You just got an immediate like and subscriber.

  • @rahul-in8vb
    @rahul-in8vb Рік тому +3

    Hi Antonio. Thank you so much for this valuable content. You are providing so much value and knowledge in this course.❤

  • @leandro198511
    @leandro198511 Рік тому +2

    The way to learn with this tutorial is incredible!!! I always wondered what practices those who made high-level code used! Thank you so much!!!

  • @defabc2648
    @defabc2648 Рік тому +5

    I love the fact that he explain his decision or his thoughts on almost all the decision, it makes learning so much more intuitive and comprehensive. Thank you so much!

  • @sebastiancastillo3560
    @sebastiancastillo3560 Рік тому +2

    Wow!!, Antonio, I have no words to thank how incredibly valuable your tutorials are. This project has a ton of useful knowledge that I haven't seen in other courses, your way of programming is so clean, I really enjoyed it! I'm about 5 hours away and the app works wonderfully. I am very grateful!!👏👏👏👍

  • @edwardj4454
    @edwardj4454 Рік тому +3

    Still can't believe this is all for free 😲! You just earned a sub. Hope you keep dropping cool builds like this 🙏

  • @sercanyildirimtugcann
    @sercanyildirimtugcann Рік тому +1

    You are great Antonio!! You know what? You are helping many poor people from undeveloped countries to improve theirselves. You are good man.

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Thank you, very happy to hear that and glad it helped you!

  • @shorts_faceless
    @shorts_faceless Рік тому +19

    Have you ever thought about using some pre-made Tailwind components for your videos? In the tutorials you do, we go over tailwind, nextjs, react, typescript, prisma, mongodb and other stuff, but I feel like a significant amount of time is spent on tailwind and just designing the app/website. Nothing wrong with that, but understanding tailwind is probably the easiest of all the things you cover, so I feel like it's a missed opportunity to spend time on some more complex stuff.
    On another note, I thought of one thing that would be immensely helpful to me. Your tutorials are broken down into several parts, such as buidling the navbar, auth and so on. Howerver, it feels like you kinda go from one part to another in a very linear fashion. This might be the result of the fact that you've already coded the entire thing once privately, and now you're redoing it for the second time on video. Again, nothing wrong with that, but it 'strips' some of the abstract/conceptual thinking that you likely went through the first time. Here's what I imagine: let's say you're about to starting coding the navbar. Before you do, you show the already completed navbar and give a little overview. 'So, we're going to be building this navbar. As you can see, it's your typical navbar with a logo, a bunch of buttons, and some icons. We're gonna have a wrapper div with three divs inside -- one for the logo on the left, another for the three buttons/columns in the middle, and one for the 'airbnb your home' and profile on the right. Clicking on the profile will open a dropdown menu.' I'm not saying you should go over the entire .tsx structure and classnames, but to maybe give some top-level breakdown of how it's structured and what it'll do. This is a simple example because building a navbar is probably the least complicated thing you do in this tutorial, but I hope you understand what I mean.
    Why would this be helpful? I think many people watching already have some experience with many of the tools you're using. Oftentimes we might want to try to code whatever you'll be coding next first, and then 'compare' your output versus ours because that helps us learn better than just copy-pasting every line of code you write. There are tutorials out there where someone is clearly just looking at their second monitor and manually rewriting everything they've already coded before, and so you end up watching them create 6 divs (from outmost to innermost) that have 40 class names in total before you see any content displayed on the page. I'm not saying that's your case, but it's an example of a tutorial that I struggle to follow/learn from. Sure, you go over the entire project in the beginning, so I could just pause the video and look at the navbar I know we'll be building later, but this back-and-forth rewinding would be quite suboptimal.

    • @codewithantonio
      @codewithantonio  Рік тому +2

      This is probably the most comperhensive feedback I've gotten, thank you so much for that. I started this channel barely month and a half ago, and I did not expect this kind of growth. Im still learning about what to focus in on in a tutorial, how much do I assume people know and how granular I should be in my tutorials. I will slowly start to experiement with your suggestions to see where I can save time if it is not main focus on the video. All of your suggestions are 100% correct! Thank you so much!

    • @shorts_faceless
      @shorts_faceless Рік тому +2

      @@codewithantonio I think that growth simply demonstrates the fact that you're good at what you do, and pepole find your tutorials helpful and learn a lot from them (myself included). Considering that you've been doing this for around a month, the overall quality of your content is higher than that of many channels that have been doing this for years. I also appreciate that you read all the comments and give comprehensive, meaningful replies. Keep up the good work :) Looking forward to your next video!

    • @illmatic08
      @illmatic08 Рік тому

      To be fair to your last point for back and forth rewinding that's not necessary. He has a live demo version of the app deployed so you could have that in a separate tab or monitor. and look at what your building. Nothing against anything you're saying at all though.

    • @shorts_faceless
      @shorts_faceless Рік тому

      @@illmatic08 I failed to notice that he's a got live demo of the website in the github repo -- thanks for that. That definitely addresses a lot of what I said in my last point. The slight drawback here is that the vast majority of what he does in the tutorial does not live in isolation. If you're building something like this step by step and use the completed website/app as a reference point, some parts may be difficult to replicate because they're connected/dependent upon other things that you haven't gotten to in your code.

    • @lewyathan
      @lewyathan Рік тому

      @@codewithantonio I back his comment! Great tutorial also!

  • @pgncreations
    @pgncreations Рік тому +2

    This is really a great tutorial I am following it along, right now at 38 Mins, I hope I will continue and finish the entire thing ;) eagerly looking to finish it

  • @matheusferreira5600
    @matheusferreira5600 Рік тому +6

    To anyone who might be facing issues while deploying on vercel: If appears an error of prisma, in the setup page for deploy, override and use 'npx prisma generate && next build".
    Also, I faced some errors of "app/ Static to Dynamic Error". Just add "export const dynamic = 'force-dynamic'" to the top on layout page and that's it!!

    • @yeahitsmejayyy
      @yeahitsmejayyy Рік тому

      I spent a few hours trying to debug this Static to Dynamic Error. I came to the comments and found this gem! Thanks for sharing your fix. Worked like a charm. 👍

    • @МирославБондик-ш1ь
      @МирославБондик-ш1ь Рік тому

      it's working but my apis isn't loading

    • @flafio
      @flafio Рік тому

      Im facing the "DynamicServerError: Dynamic server usage: request.url" error when I try to build the application. The get routes works but the post routs do not works. I tried to put "export const dynamic = 'force-dynamic'" to the top on layout page and not worked. I did not found any solution for this problem, maybe I will create a backend API instead of using app/api.

    • @raf-fonseca
      @raf-fonseca 3 місяці тому

      I've been on this exact error for 2 weeks, you saved my life.

  • @rajkumarkhatua9817
    @rajkumarkhatua9817 10 місяців тому

    Here's a compliment for the UA-cam video with your message embedded:
    Wow, such a great video! I really appreciate you taking the time to create such an amazing tutorial. I learned a lot from it . if anyone facing problem while deploying with this "Dynamic server usage" error you encountered while deploying. Adding the export const dynamic = 'force-dynamic' line to top of page.tsx a clever solution" .☺

  • @mikejakusz1493
    @mikejakusz1493 Рік тому +2

    Awesome video! I learned a lot, I'll probably have to rewatch this later and try to build this on my own. This is a beast of a project. Thank you for taking the time to build it, you are a legend!

  • @snookandrew
    @snookandrew Рік тому +3

    This is super impressive. Well done to you for putting it together

  • @bacalekevin8763
    @bacalekevin8763 Рік тому +1

    I'm just from completing this tutorial thanks you Antonio!, Next 13 is amazing and it changes the way state management use to be done everything to be much more simpler and cleaner.

  • @jhjhjh3931
    @jhjhjh3931 Рік тому +4

    Hi Antonio, thank you so much for this tutorial. I want to add a bit of critique if that is okay, with the goal of improvement in mind of course.
    Most of this tutorial felt like I was just following whatever you were typing, and trying to think of the logic afterwards myself. It would have been nice to know 'what are we going to do', 'what do we need for this', 'what is the logic going to be and what are the dependencies'. Think of a quick sketch of the situation and interactions between components.
    So basically instead of just copying the code, explain to us what it is we are going to do in this part, and what the thought process is behind these things. Now it felt more like 'import component, do this, do that', without understanding why I am doing it. There are some sections where the code is quite hard to grasp and I can follow along yes, but I would not be able to understand in what situation we will want to use this and why. Maybe this is because I am new to react (I code primarily in C#) but it would've been a nice addition.
    Again thank you for the tutorial as I've still managed to grab bits and pieces of information, and you definitely showcase the beautiful component usage of react.

    • @gradientO
      @gradientO Рік тому +1

      he probably needs to bring down the video time, (yet its 8hrs, so yeah). How was the project? I'm thinking of starting this

    • @jhjhjh3931
      @jhjhjh3931 Рік тому +1

      ​@@gradientO I stopped around the 5 hour mark because I started feeling like i was really just typing whatever he was telling me to, copying his work. Started my own project now (i have a background in programming) and for example now that I read about prisma and how I should go about using it it makes more sense why he wrote some things as he did.
      However, it wouldve helped immensely more if for example he showed a database scheme and explained why, and then translated that into prisma code instead of 'type this'

    • @gradientO
      @gradientO Рік тому

      @@jhjhjh3931 thanks for echoing my thoughts as well! I'm around 1.5 hours into the video (which took 3 days in reality). I'm just following this video as a general guide, and trying to implement it in better ways (or at least easier to me), like using Radix UI dialog instead of creating one from scratch, change in Auth flow (sign in with email instead of passwords), changing the db. Gotta say, I learnt more in these 3 days than anything lol

    • @jhjhjh3931
      @jhjhjh3931 Рік тому

      @@gradientO yeah since I'm creating my own app right now I'm coming back to the video for bits and pieces and when singling them out you can really focus on why something is implemented in a way, the second time watching is definitely better for learning and understanding :) good luck with your app!

  • @judevector
    @judevector Рік тому +1

    Wait wait what did I just see now ,thank you UA-cam for bringing this to my feed and thank you so much for making this video ,you just got a new subscriber. Wow all these knowledge for free . This is the best time to be a web developer

  • @VeeHeeOfficial
    @VeeHeeOfficial Рік тому +10

    GREAT tutorial videos!!! PLEASE KEEP THEM COMING!!! Also, would be great if you can make a full webapp project that combined with ChatGPT API (for example, making a trip planner web app with Next JS + Tailwind + ChatGPT API) :)

    • @codewithantonio
      @codewithantonio  Рік тому +2

      Thank you a lot! Will consider this suggestion for sure!

    • @businessuser5146
      @businessuser5146 Рік тому +1

      @@codewithantonio not another post on chatgpt pls :D ... internet is filled with these and is oversold

    • @kdot78
      @kdot78 Рік тому +1

      @@businessuser5146 agree

  • @J_Shreyash
    @J_Shreyash 9 місяців тому +1

    You're such a great UA-camr who explains fantastic projects. I've subscribed, and I've also told my friends to support and subscribe to your channel. Keep up the great work! 👍

  • @handa1780
    @handa1780 Рік тому +1

    Subscribed! I was searching for next 13 tutorial and found this great video, awesome

  • @Imlearningtoo
    @Imlearningtoo Рік тому +5

    Really nice tutorial! Kudos for using middleware instead of authorization on every page :)

    • @codewithantonio
      @codewithantonio  Рік тому

      Yes, learned that from last tutorials where I put authorization on every page 😅 Thank you!

  • @heavenlyren
    @heavenlyren Рік тому +1

    I can't believe this is on UA-cam for free. amazing amazing amazing job.

  • @koeraaaa
    @koeraaaa Рік тому +7

    10:00 Day1 (setup)
    34:26 Day2 (nav bar ui)
    53:14 Day3 (auth ui)
    1:35:20 Day4 (auth ui) done

  • @smokerscope
    @smokerscope Рік тому +1

    Antonio, Iam not kidding. You are the best teacher I've ever met in my life. I learnt a lot from you. The way you are coding is pretty professional and mangnificient. Expecting a lot from you. Thank you 😊🙏

  • @ivan2365
    @ivan2365 Рік тому +9

    Hey Antonio. Thank you so much for this free content. You are providing so much value and knowledge in this course. This channel is a real revelation, just what I've been looking for. I am only missing one thing. It would be nice if you show what are we building next ,in the finished application, before each new section.
    Also, I would like to ask, why aren't you using other HTML elements besides div? Like h1, h2, section, p, etc.

  • @logicmonster6197
    @logicmonster6197 Рік тому +1

    writing clean code and fast, u master it bro hopefully one day i will be at this level.

  • @yanDev
    @yanDev Рік тому +4

    I just discovered your channel recently and sincerely your videos are just incredible, especially the last three on Next Js!
    Could you make others but which would use for example GraphQl or TRPC which is quite popular?
    I thank you in advance for these requests and thank you again for this very high quality content!

    • @codewithantonio
      @codewithantonio  Рік тому +2

      Thank you a lot for the nice words! I will certianly explore other technologies as well in the future, but right now im focused on Next 13 since it has a lot of new things coming almost every month, so its interesting to explore. TRPC is very interesting to me so i can guarantee that that will happen sometime

  • @Grishopping
    @Grishopping Рік тому +1

    Thank you ANTONIO for the video, congratulations for those more than 10,000 subs, I'm glad they are uploading very quickly, soon there will be 100,000, then 1,000,000 and many more, as I told you in one of the previous videos. Greetings from Jose Grillo from Venezuela. .. SUCCESSES and many blessings

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Thank you a lot for your constant support Jose!

    • @Grishopping
      @Grishopping Рік тому +1

      Returning today 8/11/23 to record that: antonio, TODAY received his youtube plaque for having reached the first 100,000 subscribers. Congratulations champion... let's go for the next goal and cho more

  • @gabrielschaldach401
    @gabrielschaldach401 Рік тому +2

    I JUST LOVE YOU, NOTHING ELSE, OK? Your content is awesome bro

  • @kuldeepsingh-mm4lc
    @kuldeepsingh-mm4lc Рік тому +10

    you are the best

  • @code.cosmos
    @code.cosmos Рік тому +1

    Hello, I usually watch videos at night, I see everything in white thanks to the white theme, and the video is excellent. I wish you continued success.

  • @pulsechainalltheway1845
    @pulsechainalltheway1845 3 місяці тому +3

    As of today onUpload property of the CldUploadWidget is deprecated and would not work again, You have to use onSuccess property instead.

  • @egoiisticprince7977
    @egoiisticprince7977 Рік тому +1

    This is by far the best video I have code along with. Keep them coming LOVE IT

  • @RandomGuy34-j1u
    @RandomGuy34-j1u Рік тому +10

    Can i watch and follow this if i dont know typescript and prisma ??

    • @codewithantonio
      @codewithantonio  Рік тому +10

      absolutely! I go step-by-step doing absolutely everything and do not skip over any details, so regardless of your knowledge about this technologies you can easily follow along.

    • @RandomGuy34-j1u
      @RandomGuy34-j1u Рік тому +1

      @@codewithantonio Thanks a lot !!!

    • @LangitBiru-07
      @LangitBiru-07 Рік тому

      gas aja mas e 😁

  • @franklinmayoyo
    @franklinmayoyo Рік тому +1

    This is the best tutorial on Next 13. Moving my business from to Next. Thanks.

  • @thekartiks
    @thekartiks Рік тому +4

    Thanks for the amazing content sir. these are best project but can you create some basic and simple projects for beginner too

    • @codewithantonio
      @codewithantonio  Рік тому +1

      Thank you, yes of course, it is a pretty new channel so im just figuring out my audience and what to make :)

    • @borebardha38
      @borebardha38 Рік тому

      ​@Code With Antonio please create some begginer friendly courses

  • @onlysparsh
    @onlysparsh 7 місяців тому

    Amazing amazinggg project Antonio ! Like it was literally so close to perfect with practicing most optimal approaches ! Love it

    • @nishankkankas7195
      @nishankkankas7195 6 місяців тому

      hello, can you tell what are the prerequisites for this video?

  • @harshdarji1122
    @harshdarji1122 Рік тому +3

    Im facing this weird bug with next auth while trying to sign in. No matter what I do, I am always redirected to a 404 page. I have looked this problem up and tried all the fixes available on the internet, however, none of them seem to work. I would love to hear some insights as to why this happens and how to fix it. Thanks.

    • @fullenglish3
      @fullenglish3 Рік тому

      Same for me, did you fix it in the end?

    • @verloren7004
      @verloren7004 9 місяців тому

      create api/auth/[...nextauth]/route.ts with following:
      import { authOptions } from '../[...nextauth]'
      import NextAuth from 'next-auth'
      const handler = NextAuth(authOptions)
      export { handler as GET, handler as POST }

  • @Jp_codes
    @Jp_codes Рік тому +2

    This is highly impressive. I think we can not appreciate the conveyer enough for this help

  • @yunyang6267
    @yunyang6267 Рік тому +3

    Great video! I have a question, so every time you use the getCurrentUser function, you have to search for the user in the database. Would it be more efficient if you store the extra data in the session and use the session? I am a bit confused with what is the best way to implement authentication. Could you expand on topics like authentication for different roles(admin/user) and middleware in the next video?

    • @codewithantonio
      @codewithantonio  Рік тому +1

      That is a great catch! I am relying on currentUser rather than session because I do not know how much session is updated, so I dont want it to have outdated data. I will for sure make videos specific for auth in the future :)

    • @yunyang6267
      @yunyang6267 Рік тому +1

      @@codewithantonio thank you!

  • @bharath2508
    @bharath2508 Рік тому +1

    this is one of the best booking app on UA-cam.
    Your explanations is too good.

  • @pixelsquirrelstudios
    @pixelsquirrelstudios Рік тому +2

    If anyone is getting issues with the 'world-countries' import not being recognised, there seems to be an issue with the latest version (4.1.0), so install the previous version (4.0.0) and the import will work. It may be fixed by the time you read this, but as of September 10th 2023, version 4.1.0 isn't working correctly.

  • @dennisagyekum9555
    @dennisagyekum9555 Рік тому +1

    Amazing , i just finished and deployed it. I drew so much inspiration from this tutorial to work on my own project. Thank you so much for such quality content.

    • @codewithantonio
      @codewithantonio  Рік тому

      Great job!

    • @KkrDs97
      @KkrDs97 Рік тому

      Did you faced SignIn error or bug at 2:15:00. I was facing an insue where I always get status code 200 for both invalid and valid credentials

    • @dennisagyekum9555
      @dennisagyekum9555 Рік тому

      @@KkrDs97 No i didn't , try checking your code against the finished project's repository

  • @Saldymedis
    @Saldymedis 7 місяців тому +5

    34:42 There is no hydration bug in Next 14

  • @IN-Factory
    @IN-Factory 10 місяців тому

    There are a lot of tutorials on youtube but this one is by far the best!

  • @Soranosuke2001
    @Soranosuke2001 Рік тому +3

    I was trying to do the deployment part for the project on Vercel, but I'm getting a Error: Dynamic Server Usage: searchParams.userId in getListings. I was comparing my code with your repository and I can't seem to find differences. Would you be able to help me solve this?

    • @romanmerkulov830
      @romanmerkulov830 Рік тому

      I still have the same error:( @codewithantonio do you know smth about it?

    • @mvinito
      @mvinito Рік тому +3

      add this one to the top on layout
      export const dynamic = 'force-dynamic'

    • @asishmahapatra9332
      @asishmahapatra9332 Рік тому

      @@mvinito Dude you are a fuckin life saver man. This comment needs to be up top for real. Actually Antonio is using NextJS 13.2 which was beta. It has become stable now with NextJS 13.4 and gives this error.
      Thanks man. May you get into your dream company. Cheers🍻

    • @matheusferreira5600
      @matheusferreira5600 Рік тому

      @@mvinito as the man above just said, you are a real life saver man. Thanks for the help. Indeed adding this to the top of the layout page fixed the issue. Cheers

    • @VukDukic
      @VukDukic Рік тому

      @@mvinito Thank you!

  • @yasseralsaidi
    @yasseralsaidi Рік тому +1

    nice i waited to learn new app dir with NExt 13.. thank you Antonio .. wait for more!

  • @ADHDOCD
    @ADHDOCD Рік тому +1

    Antonio is insane for giving us this tutorial free of cost. What!?!

  • @itoromfon2448
    @itoromfon2448 Рік тому

    Antonio this is the best video have ever seen on Next JS. You are the best man. Thank you so much 🙏🏻

  • @oamarkanji3153
    @oamarkanji3153 Рік тому +1

    Wow I have been struggling to find examples with the new app dir, this is very helpful! Amazing! Thank you

  • @ryanalcova5931
    @ryanalcova5931 Рік тому +1

    Thanks Antonio!!! What a great video, buddy. Greetings from Brazil!

    • @codewithantonio
      @codewithantonio  Рік тому

      Very happy to hear that, thank you for watching!

    • @ryanalcova5931
      @ryanalcova5931 Рік тому +1

      @@codewithantonio Your spotify video is even better with Next 13.4! ❤️ As a suggestion for a next video: add some multi-language feature in your apps with Next 13.4 :) It will help a lot of people, including me hahaha Right now I’m struggling to find the best alternative to create and set an entire App with en-US, es-ES, pt-BR that the user can also choose a preferred language and change it 😫 Anyway, thanks for all this incredible content. Cheers Buddy!

  • @darelbvcr687
    @darelbvcr687 Рік тому +1

    svaka čast! ja sam junior dev, ovo mi je nezamislivo još sam napraviti from scratch! samo nastavi 🔥

  • @NavyCrack1
    @NavyCrack1 Рік тому +1

    Ajmoo balkan :) bravo Antonio.
    Pozz od Makedonija

  • @Iynkaraa
    @Iynkaraa Рік тому +1

    Thank you for the wonderful full stack tutorial about React, Tailwind, Prisma, MongoDB and NextAuth doing in 2023. Helped alot of learning on the typescript syntax and looking forward with doing more of your java script tutorials along with all the cool tutoring you have brought in your channel. Good luck with your venture and thanks again. Also I have completed all material with lots of scratching my head lol. Tho its all working as intended (all modules). Planning the last step of getting it over to gitthub. Again great work, and thank you.

  • @Santon-Motho
    @Santon-Motho Рік тому +2

    Let me dedicate my Sunday to finishing this project. Currently at 3:20:33 . Sorry if I spam the comment section today, Antonio 😅.

  • @alpolcaymis
    @alpolcaymis 10 місяців тому +1

    I spent +8 hours with you. THANK YOU.