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

[@tommyVCE]

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]

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

[@udaykulkarni5639]

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

[@niteshprajapat7918]

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

[@junsgk]

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]

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...

[@ifeanyiosi]

Please make more tutorials like this. Im a huge fan

[@smartdriver2990]

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

[@marroos5440]

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. :}

[@irugooprime]

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

[@thiagosullivan]

What a nice project! Thank Jan for share!

[@dreamsachiever212]

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

[@dungmanh843]

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

[@Muzafar.A]

absolutely excellent, top notch content in free. ❤

[@SantosEnoque]

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

[@AjaySingh-jz8qx]

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

[@ilan117]

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

[@dalestewart]

A top notch professional application.

[@Deus-lo-Vuilt]

Thanks for the project, I like prism with Next

[@jniyaz]

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

[@FahadKiani1]

wow legend Jan Marshal

[@raymondyeoh5676]

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]

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

[@floppyBE565]

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

[@janmarshalcoding]

It will be good spent 6 hours 🤝

[@roydejong2326]

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

[@King111-l6t]

Wow wow thanks 🎉🎉

[@rheavictor7]

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]

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

[@sladewashington2709]

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

[@patrickmotaung5866]

Great tutorial. Thank you so much

[@markus_dev_cwb]

Amazing project Man! Tks to share.

[@hichamali9987]

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

[@janmarshalcoding]

Thank you 🙏

[@JRReal]

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

[@liebebilder3529]

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

[@wibbs88]

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]

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

[@natab282]

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

[@yj4105]

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

[@youneverknow7096]

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

[@orangecoating]

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]

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

[@rohitranjan-cse]

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

[@JDUDEadventure]

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?

[@LucaForti-dn2zg]

can you make the the system for add the content?

[@glennmakhandia8637]

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

[@OmarFaruk-bz4gw]

❤❤❤❤ thank to hard work

[@MentolateeTV]

sos crack amigo!

[@cosgravehill2740]

Excellent video! What editor theme are you using?

[@janmarshalcoding]

Thanks, aura theme

[@mocambiquemaputomatola8238]

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

[@elsayeda1204]

Thanks Jan

[@janmarshalcoding]

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.

[@josephikinda7174]

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

[@Kmkn308]

Jan Please Explore Framer-motion ..

[@janmarshalcoding]

I will at some point in the near future!

[@stahlmandesign]

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]

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...

[@Kmkn308]

Great

[@EmblazNOR]

Why use kinde auth instead of supabase auth?

[@mrkanata7696]

nice, what is your theme in vscode ?

[@janmarshalcoding]

Aura theme

[@mrkanata7696]

@@janmarshalcodingthx buddy

[@lordhakim9534]

if possible can u build something with mern stack

[@janmarshalcoding]

I don't like MongoDB so probably not

[@junsgk]

serverless is the main stream bro

[@Flaaain]

reservation without payment? looks unsafe

[@ahyaredukasi4373]

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]

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)

[@nocturno7887]

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]

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 @

[@loredoramirezdaviddejesus2775]

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]

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/*".

[@nogafouz2174]

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]

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]

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

[@saadmalik899]

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]

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

[@saadmalik899]

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

[@saadmalik899]

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

[@Fang_Yuan88]

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

[@mattl7599]

Same here

[@nutnut4868]

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]

Did you disable rls as shown in the vid?

[@nutnut4868]

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

[@nutnut4868]

@@janmarshalcoding yes I did

[@MeerUzairWasHere]

Theme name? please

[@janmarshalcoding]

aura theme

[@yazidthedev4281]

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

[@artistejiro]

How so?

[@yazidthedev4281]

@@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]

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]

I don't understand what you mean, lol

[@adarshrathi8265]

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

[@ОлегБаранчиков-ф5у]

it's not working.

[@janmarshalcoding]

What is not working

[@junsgk]

your brain is

[@LuisBlancoAustin]

Amazing!

[@cs12345]

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]

same error

[@wheazzyfinesse]

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

[@nobody124...]

is there admin panel

[@aminereus4653]

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').

[@sainbayarurtnasan.2699]

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]

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

[@janmarshalcoding]

Haha, happens sometimes

[@JorgeOA]

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]

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

[@KB-tl1rq]

@@JuanSebastian-nq9gw Me too, Thanks

[@nogafouz2174]

Great tutorial. Thank you so much