Create an Airbnb Clone with Next.js 14, Kinde, Supabase, Prisma and Tailwind

Поделиться
HTML-код
  • Опубликовано: 5 ноя 2024

Комментарии • 115

  • @tommyVCE
    @tommyVCE 8 месяцев назад +17

    I absolutely love these super long tutorials! I'm sure they're hard to make but I really like it when you release long multi-hour videos. keep up the good work!

    • @janmarshalcoding
      @janmarshalcoding  8 месяцев назад +6

      Glad you appreciate them. They take very long to make, even tough it does not look like it.

  • @udaykulkarni5639
    @udaykulkarni5639 8 месяцев назад +3

    effing LEGEND!! Just 15 mins in and the way you're explaining things is phenomenal!! Kudos

  • @niteshprajapat7918
    @niteshprajapat7918 8 месяцев назад +5

    You eyes shows the hard work you put into this 🔥🔥💪💪

  • @junsgk
    @junsgk 8 месяцев назад +4

    I'm doing all the supabase project without prisma. supabase it self has SDK and it is great. easy to use, light weighted. why need for prisma when there is great tool that supabase provides??? great tutorial!!! by the way

    • @janmarshalcoding
      @janmarshalcoding  8 месяцев назад +4

      Thanks,
      I used the supabase sdk in the past, and it was great for relatively simple applications. But as soon it got complex, I always got some sort of issues. So if it works for your then great, but it burned me to many times...

  • @marroos5440
    @marroos5440 8 месяцев назад +1

    Your videos are easy to understand. You are great at explaining things. I am still learning and i personally had problems to read stripe docs, while your videos helped me to implement subscription (for notes) and also purchasing multiple items (eshop). So, now i have a great start and can use these working solutions in my projects. Thanks to your projects i understand the power of CMS when creating eshops, it is very handy. I usually check projects to find certain features i would like to learn. I am going to check this cool project out, but i already see feature i wanted to learn, and it is booking for certain period with making days, that are already booked disabled from calendar. Your projects are helping me a lot, thank you very much. :}

  • @ifeanyiosi
    @ifeanyiosi 8 месяцев назад +3

    Please make more tutorials like this. Im a huge fan

  • @smartdriver2990
    @smartdriver2990 2 месяца назад +1

    Done. Thanks for the tutorial. It worked from development to deployment

  • @dungmanh843
    @dungmanh843 4 месяца назад

    You just make my day, im looking for Prisma + Supabase video for damn long time and your just pop up. The db was async with schema sussesfully, thank you so much, the 999 like r mine people

  • @thiagosullivan
    @thiagosullivan 8 месяцев назад +3

    What a nice project! Thank Jan for share!

  • @dreamsachiever212
    @dreamsachiever212 8 месяцев назад +2

    love the demo. will build strive to complete it this week

  • @Muzafar.A
    @Muzafar.A 8 месяцев назад +1

    absolutely excellent, top notch content in free. ❤

  • @SantosEnoque
    @SantosEnoque 6 месяцев назад

    May you are such a legend! Honestly.... Thank you!

  • @FahadKiani1
    @FahadKiani1 8 месяцев назад +2

    wow legend Jan Marshal

  • @irugooprime
    @irugooprime 5 месяцев назад

    This is amazing, if I can change my life for only six hours, this video going to change my life I will struggle adding chatting system inside this app but I will try my best . Thank you so much, I promise this going to change my life

  • @AjaySingh-jz8qx
    @AjaySingh-jz8qx 6 месяцев назад

    Oh Man you explain complex things like a easy thing I like the way you explain keep going

  • @raymondyeoh5676
    @raymondyeoh5676 6 месяцев назад

    I've learnt many great concepts and workflow from this awesome tutorial. Awesome work Jan and am a fan. I do hope if possible you do a part 2 follow up (using this tech stack) incorporating more Kinde functionailities (like capturing a geolocation property during custom signups), subscription/mailing list widget and user management/organization. Thank you!

    • @janmarshalcoding
      @janmarshalcoding  6 месяцев назад

      Thanks, I will dive deeper into Kinde in the next tutorial I will create.

  • @dalestewart
    @dalestewart 8 месяцев назад

    A top notch professional application.

  • @ilan117
    @ilan117 8 месяцев назад

    Jan, thank you very much for this amazing journey ❤🙏

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 8 месяцев назад +2

    Thanks for the project, I like prism with Next

  • @wibbs88
    @wibbs88 4 месяца назад

    Hey Jan, just finished the stripe connect marketplace project - really enjoyed it, thank you! A question though.. why not just create a video integrating stripe connect to this project - would have saved you a month. Personally I like the modular format rather than just doing tutorials to learn bits here and there.

    • @janmarshalcoding
      @janmarshalcoding  4 месяца назад +2

      Thanks glad you liked it😃. I will try to incorporate both very soon. Currently working on a long tut and once it’s released I plan to make way more videos with modular formats so shorter ones

  • @roydejong2326
    @roydejong2326 6 месяцев назад

    Ah danke Jan! Gans guttes video. Sehr viele dank!

  • @sladewashington2709
    @sladewashington2709 7 месяцев назад

    one of the great videos, keep up the good work man

  • @King111-l6t
    @King111-l6t 8 месяцев назад +2

    Wow wow thanks 🎉🎉

  • @floppyBE565
    @floppyBE565 8 месяцев назад

    so excited, need 6 hours now :D thanks so much for your time

  • @orangecoating
    @orangecoating 6 месяцев назад

    this is totally awesome. need some time to go through it in detail but do you think i should try this tutorial first or the one where you create a SaaS first?

    • @janmarshalcoding
      @janmarshalcoding  6 месяцев назад +2

      So the Saas tutorial is definitely more lower level which means it’s a bit easier to get started with. Nevertheless I think that the Airbnb video is the best tutorial which I have ever created… so If you are a complete beginner then the sass video, if you already know some stuff then this vid

  • @youneverknow7096
    @youneverknow7096 7 месяцев назад +1

    Hey, sorry I just had a doubt at 6:39 regarding your theme on chrome or brave, if your browser is on dark mode how did your shadcn website go in light mode, I want the same thing as well. In tmine the browser also changes the sites theme

  • @glennmakhandia8637
    @glennmakhandia8637 7 месяцев назад

    Thank you Jan for the great video.Wanted to ask is it necessary to protect routes using middleware while using kinde auth. The kinde documentation As of right now the middleware in the app router does not work when trying to redirect to api/auth/login

  • @JDUDEadventure
    @JDUDEadventure 5 месяцев назад

    Hi Jan, usually with Airbnb images they usually upload multiple images to showcase the house. I was wondering how would uploading like 5 images work to use it in a carousel gallery work?

  • @patrickmotaung5866
    @patrickmotaung5866 7 месяцев назад

    Great tutorial. Thank you so much

  • @rheavictor7
    @rheavictor7 8 месяцев назад

    Well, here I go again on more hours with you, pal! Amazing project and thanks for all the work you are putting here, helps us a lot!

    • @janmarshalcoding
      @janmarshalcoding  8 месяцев назад +2

      Watch out or you will get attached to me 😂
      Have fun, it's a pretty cool project in my opinion, especially with the suspense boundaries and filter bar

  • @jniyaz
    @jniyaz 8 месяцев назад +1

    Great, thanks for your hard work and excellent full stack details

  • @liebebilder3529
    @liebebilder3529 8 месяцев назад +1

    Could you please tell how to make the dynamic translation for property listing?

  • @hichamali9987
    @hichamali9987 8 месяцев назад

    thank you so much, your channel got recommanded to me and i'm glad i watched this video i learned so much, i'm a new subscriber and i will be waiting for other high quality videos that you will create

  • @natab282
    @natab282 3 месяца назад

    Could you do a video building an online tutoring or appointment booking platform like preply or classgap? Thanks!!

  • @markus_dev_cwb
    @markus_dev_cwb 8 месяцев назад

    Amazing project Man! Tks to share.

  • @JRReal
    @JRReal 8 месяцев назад

    tks man, great work !!! 👍🏻 👊🏻

  • @stahlmandesign
    @stahlmandesign 7 месяцев назад

    Are there any disadvantages to using Kinde Auth instead of the built-in Supabase Auth? I also like Kinde + Supabase and that's why I found this tutorial. But I wonder if there are downsides

    • @janmarshalcoding
      @janmarshalcoding  7 месяцев назад +1

      Even tough Kinde is the sponsor of this vid I will be totally honest with you!
      I tried Supabase a few times already, before the ssr package came out and once it came out. I never liked it to be honest and there were always features missing that I needed. Also, there were a lot of bugs (maybe this has changed now?). So I would not say there are any downsides, if anything there are only upsides...

  • @rohitranjan-cse
    @rohitranjan-cse 5 месяцев назад

    Hey! Can you create part 2 of it by enabling payment feature for booking using Stripe?

  • @cosgravehill2740
    @cosgravehill2740 8 месяцев назад

    Excellent video!
    What editor theme are you using?

  • @LucaForti-dn2zg
    @LucaForti-dn2zg 3 месяца назад

    can you make the the system for add the content?

  • @nocturno7887
    @nocturno7887 8 месяцев назад

    I am just wondering. If I want only users from a company to log in, from a private company, how can I do that using kinde? Kind regards and thank you for the tutorial. Blessings!

    • @janmarshalcoding
      @janmarshalcoding  8 месяцев назад

      Thank you.
      Do you mean users from only one specific company? If so then you could add a regex statement in the route handler which we create in the video and then check if the email ends with the correct @

  • @OmarFaruk-bz4gw
    @OmarFaruk-bz4gw 8 месяцев назад

    ❤❤❤❤ thank to hard work

  • @josephikinda7174
    @josephikinda7174 7 месяцев назад

    hello, when i save the schema.prisma there is no autocompletion. i also installed the extension

  • @mrkanata7696
    @mrkanata7696 8 месяцев назад

    nice, what is your theme in vscode ?

  • @MentolateeTV
    @MentolateeTV 8 месяцев назад

    sos crack amigo!

  • @elsayeda1204
    @elsayeda1204 8 месяцев назад

    Thanks Jan

    • @janmarshalcoding
      @janmarshalcoding  8 месяцев назад +1

      Just saw that you are a member.
      Thanks a lot 🙏🏻, you are now a certified legend 😂🚀
      Let me know what you would like to see next.

  • @EmblazNOR
    @EmblazNOR 6 месяцев назад

    Why use kinde auth instead of supabase auth?

  • @mocambiquemaputomatola8238
    @mocambiquemaputomatola8238 7 месяцев назад

    Hi can you develop multi school management students with typescript, prisma orm. Please. Can you develop as your next project please

  • @loredoramirezdaviddejesus2775
    @loredoramirezdaviddejesus2775 7 месяцев назад

    I love the content friend, but I have a problem when uploading images, I put in my .env the variables NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY as in the video, I install the dependency and add the bucket with the policy shown in the video, and I can't get the image to upload, any recommendations?

    • @haaramarsch8277
      @haaramarsch8277 6 месяцев назад

      I had the same problem. It worked for me when I set in our actions.ts file for our function CreateDescription the new Date() to string in path & also set the contentType to "image/*".

  • @yj4105
    @yj4105 4 месяца назад

    supabase 2:40:38 / 3:31:27

  • @ahyaredukasi4373
    @ahyaredukasi4373 5 месяцев назад

    This tutorial is good but I get the error 500 Internal Server Error and the image does not show, on Prisma and Supabase it is uploaded but not on the application, any recommendations?

    • @ahyarfatahillah2903
      @ahyarfatahillah2903 5 месяцев назад

      The website server is experiencing problems and cannot provide a more specific error code. Make sure buckets images have right URL, press Get URL (3:31:25)

  • @nogafouz2174
    @nogafouz2174 5 месяцев назад

    I have a problem after deployment when open project in chrome I have that screen red with text sit danger but I can open it easy in edge

    • @janmarshalcoding
      @janmarshalcoding  5 месяцев назад

      That's a safety feature from chrome. Because your domain has some name which corresponds with the Airbnb name, chrome thinks you are a fishing/scam website. So if you change your deployment URL/project name to some gibberish, it won't show any red screen anymore.

    • @nogafouz2174
      @nogafouz2174 5 месяцев назад

      @@janmarshalcoding i do that and it work well thanks so much🙂

  • @Kmkn308
    @Kmkn308 8 месяцев назад

    Jan Please Explore Framer-motion ..

    • @janmarshalcoding
      @janmarshalcoding  8 месяцев назад +1

      I will at some point in the near future!

  • @Flaaain
    @Flaaain 8 месяцев назад

    reservation without payment? looks unsafe

  • @saadmalik899
    @saadmalik899 5 месяцев назад

    I'm getting an vercel edge functions and edge middleware error while using prisma in the nextauth route.ts, If you have any solution for this please let me know

    • @janmarshalcoding
      @janmarshalcoding  5 месяцев назад

      Firstly I don't use next-auth in this vid and secondly prisma does not work on the edge

    • @saadmalik899
      @saadmalik899 5 месяцев назад

      @@janmarshalcoding I'm not talking about this video, I was facing this problem, so I thought I should ask you

    • @saadmalik899
      @saadmalik899 5 месяцев назад

      But I'm not using the edge runtime, then this should be working ?

  • @lordhakim9534
    @lordhakim9534 8 месяцев назад

    if possible can u build something with mern stack

    • @janmarshalcoding
      @janmarshalcoding  8 месяцев назад

      I don't like MongoDB so probably not

    • @junsgk
      @junsgk 8 месяцев назад

      serverless is the main stream bro

  • @Kmkn308
    @Kmkn308 8 месяцев назад

    Great

  • @Fang_Yuan88
    @Fang_Yuan88 4 месяца назад

    i have error:
    Error: this method must be invoked in a node.js environment
    00:41:00

  • @MeerUzairWasHere
    @MeerUzairWasHere 8 месяцев назад

    Theme name? please

  • @nutnut4868
    @nutnut4868 7 месяцев назад

    I can not upload the home photo/image to my supabase :( Supabase tells Me there was a request for upload but when I check the bucket there's nothing :((((( been stuck for 2 days help

    • @janmarshalcoding
      @janmarshalcoding  7 месяцев назад

      Did you disable rls as shown in the vid?

    • @nutnut4868
      @nutnut4868 7 месяцев назад

      Yes my bucket is public and did the policy thing as u shown ;(@@janmarshalcoding

    • @nutnut4868
      @nutnut4868 5 месяцев назад

      @@janmarshalcoding yes I did

  • @yazidthedev4281
    @yazidthedev4281 8 месяцев назад

    You can do the same application with laravel livewire in less than 2 hours.

    • @artistejiro
      @artistejiro 8 месяцев назад

      How so?

    • @yazidthedev4281
      @yazidthedev4281 8 месяцев назад

      @@artistejiro laravel livewire can do ajax request to the server without writting any line of javascript. And if you need javascript for browser action you can use alpine js.

  • @adarshrathi8265
    @adarshrathi8265 4 месяца назад +1

    you are not filter by date , this is incomplete buddy i get too much from your video but date filter search is not you do, what i do next buddy , this is not good

    • @janmarshalcoding
      @janmarshalcoding  4 месяца назад

      I don't understand what you mean, lol

    • @adarshrathi8265
      @adarshrathi8265 4 месяца назад +1

      @@janmarshalcoding in last. When you filter listing by name and location , room count then not filter by date, now understand or not. lol

  • @ОлегБаранчиков-ф5у
    @ОлегБаранчиков-ф5у 8 месяцев назад

    it's not working.

  • @LuisBlancoAustin
    @LuisBlancoAustin 8 месяцев назад +1

    Amazing!

  • @aminereus4653
    @aminereus4653 4 месяца назад

    Failed to compile
    ./node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.mjs
    Attempted import error: 'useLayoutEffect' is not exported from 'react' (imported as 'useLayoutEffect').

  • @nobody124...
    @nobody124... 6 месяцев назад

    is there admin panel

  • @cs12345
    @cs12345 7 месяцев назад +1

    i have an error [
    ⨯ PrismaClientKnownRequestError:
    Invalid `prisma.home.create()` invocation:
    Foreign key constraint failed on the field: `Home_userId_fkey (index)`
    at async createAirbnbHome (./app/actions.ts:36:22)
    ⨯ PrismaClientKnownRequestError:
    Invalid `prisma.home.create()` invocation:
    Foreign key constraint failed on the field: `Home_userId_fkey (index)`
    at async createAirbnbHome (./app/actions.ts:36:22)
    ]
    please tell me how to fix

    • @abhishekgiri013
      @abhishekgiri013 7 месяцев назад +1

      same error

    • @wheazzyfinesse
      @wheazzyfinesse 3 месяца назад +1

      datasource db {
      provider = "postgresql"
      url = env("DATABASE_URL")
      directUrl = env("DIRECT_URL")
      relationMode = "prisma" // Allows foreign key, i.e, disables foreign key constraints
      }

  • @sainbayarurtnasan.2699
    @sainbayarurtnasan.2699 8 месяцев назад

    Great stuff. Thanks! I am getting an error at around 49:00 min time stamp: TypeError: Cannot read properties of undefined (reading 'map') at MapFilterItems (./app/components/MapFilterItems.tsx:17:82) at stringify () It would be great if you could point out. Thanks again!
    6 | return (
    7 |
    > 8 | {categoryItems.map((item) => (
    | ^
    9 |
    10 |
    11 |

    • @sainbayarurtnasan.2699
      @sainbayarurtnasan.2699 8 месяцев назад

      My bad! Forgot to save the categoryItems.ts. Took me 30 min, lol. Keep up with the great work.

    • @janmarshalcoding
      @janmarshalcoding  7 месяцев назад

      Haha, happens sometimes

  • @JorgeOA
    @JorgeOA 6 месяцев назад +1

    At 2:44:20
    ... ${imageFile.name}-${new Date() ...
    error: 'InvalidKey',
    message: 'Invalid key:file.jpg-Sun Apr 21 2024 19:46:53 GMT-0600 (hora estándar central)'
    Changed for:
    ... ${imageFile.name}-${new Date().getTime()} ...

    • @JuanSebastian-nq9gw
      @JuanSebastian-nq9gw 6 месяцев назад

      After placing getTime, the image appears in the database and in Prisma Studio, not before. thank you so much!

    • @KB-tl1rq
      @KB-tl1rq 5 месяцев назад

      @@JuanSebastian-nq9gw Me too, Thanks

  • @nogafouz2174
    @nogafouz2174 5 месяцев назад

    Great tutorial. Thank you so much