Build and Deploy a Fullstack Hotel Booking Web App: Next.js 14, React.js, TS, TailwindCSS, Prisma
Vložit
- čas přidán 27. 07. 2024
- Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe
✨ Source Codes: www.patreon.com/posts/next14-...
✨ Playlist: • Next14 FullStack Hotel...
✨ Follow Me on Twitter: / chaoocharles
✨ Join My Discord Server
/ discord
🤑 Buy Me A Coffee: www.paypal.com/cgi-bin/webscr...
Sections:
00:00 - App Intro
11:50 - Creating Next 14 App
22:35 - Clerk Auth
40:08 - NavBar
01:01:00 - DarkMode
01:14:50 - Prisma and My SQL
01:40:18 - Hotel Form Initial SetUp
01:53:11 - Form Schema in Zod
02:04:22 - Form Fields
02:24:57 - Image Upload in Uploadthing
03:07:07 - Select Location
03:38:17 - Hotel CRUD Operations
04:19:30 - Room Model
04:44:34 - Create Room
05:22:01 - Room Card
06:00:47 - Hotel List
06:34:07 - Hotel Details
06:56:30 - Zustand Global State
07:09:12 - Shad/cn Date Range Picker
07:30:14 - Create Booking and Payment Intent
08:09:19 - Update Booking and Disable Dates
08:28:58 - Stripe Payment Form Elements
09:10:48 - Check for Date Overlaps
09:30:26 - List My-Hotels and My-Bookings
10:08:08 - Search Logic
10:23:37 - Location Filter
10:48:51 - Deploy to Vercel
SUPPORT MY CHANNEL
📍SUBSCRIBE: / @chaoocharles
📍Become a Channel Member: / @chaoocharles
📍Join My Fun Channel: / @chaaoo
GET IN TOUCH:
📍 Twitter: / chaoocharles
Disclaimer: This video is not sponsored - Věda a technologie
Planetscale no longer supports the hobby plan. Please try Neon database!
Excellent! Thank you for using ShadCn UI
Great work! Awesome project. Thank you!
Amaizing man, can't wait to start. You are a great teacher.
Awesome 👌
Thank you sooooo much, I had to go through a few videos before I found yours, and finally got drag and drop to work without any bugs and understanding everything. Perfect :)
at 8:04:56 trying to push to book-room page, caught this " SyntaxError {
stack: 'SyntaxError: Unexpected token \'i\', "internal s"... is not valid JSON',
message: 'Unexpected token \'i\', "internal s"... is not valid JSON'
}" error, everything is exactly the same, don't know where went wrong. Would you be able to help, please!!!
Thanks, man just completed the tutorial, this has been so helpful in my career growth as a full-stack developer.
Wazi bro
Oooh man your killing it! Am going to start with the ecommerce store then i will be back for this
Awesome 👌
Super Project Man, Next Time Lets Use Next Auth
Excellent
Dear Brother , I Love Your Projects , Let's Create a Fiverr Clone With Next Js , Prisma , TS , MYSQL , NEXT AUTH next time
Awesome man ❤
Thank you man!
@@ChaooCharles Welcome bro, keep it up ❤
Nice project one more thing to do Create a Management System for this project like
Admin
Receptionist
Hote staffs
Restaurant and more panels for this hotel
That would be a complete project ❤
Great💪
Cool 🎉 ❤
This is wonderful brother Chaoo,👌
I have a question,
pls on my courseId form I have an imageUrl and audioUrl field which gets uploaded to uploadthing.
Question is, How do I delete them when I want to delete the courseId??
Thanks!!
What's the extension name. You use in your vs code gives. Sparkling effect
at 8:04:56 trying to push to book-room page, caught this " SyntaxError {
stack: 'SyntaxError: Unexpected token \'i\', "internal s"... is not valid JSON',
message: 'Unexpected token \'i\', "internal s"... is not valid JSON'
}" error, everything is exactly the same, don't know where went wrong. can anyone help, please!!!
Awesome project man
Are you using latest server actions?
I have not used server actions
Man, this is golden....i cannot belive people can have this for as little as $3 dollars
Woah, this is huge
A very generous offer indeed 😁
Could you do a video building an online tutoring or appointment booking platform like preply or classgap? Thanks!!
pls can i add this project to your previous project in one place under one domain
Hey i made this project by your playlist but some errors r coming nd project is not running can you please help me in solving those errors
no back end dashboard?
If I may ask, your previous project turotial "FullStack e-commerce tutorial" was it with next js 13 or 14 ?? I remember I followed it and I remember it was 14, now I see it 13, thats why I am confused
It was 13 but dont worry, here I used 14. But I dint use server actions which is the main feature in 14. But app router is more stable
@@ChaooCharles understood, thank you, great job in both tutorials ♥
Hey bro pelasse tell me Is This Project Complete ?
same man I keep writing costn🤣
Bro planet scale is showing that hobby database are currently not available for your country what to do
Try Neon Bro
Can you develop project also for React Native
I can try, I've never worked with react native
Just found your video here and Channel, I apologize as I have only watched the first 12-minute introduction and fell in love ASAP and this question is important to me to be able to FILTER down to the smallest detail, please. Is it also possible to SEARCH or FILTER by the Amenities or other selections listed? I might want to Filter for a hotel that let us assume there are not many around the world, so I only start with a SEARCH for Overlooking a "VOLCANO VIEW" (instead of a Mountain View) and maybe only 4 hotels are returned. Are these options searchable, if not here in this project, maybe it would not be difficult to develop these options and amenities into a list similar to a Country or State drop down listing, etc. I am a bit familiar with SQL queries so maybe anything within the MY SQL database is searchable. If I know how to create a proper query in the URL, can I search directly from the address bar? Thank you for your kind attention, Sir.
It's possible to create queries for any of the properties,
has admin dashboard mate?
No admin dashboard mate!
@@ChaooCharles But the functionality is there with the dropdown-menu, just need to make another dropdown page called dashboard where you can place the create edit and overview in big sections and tabs ect
@@jannickpedersen4620 Yeah, but I let people add more features if they want to because software projects can become endless. As in, I am already burnt out from the 11hrs of content, lol
@@ChaooCharles Yep, as long the funcs working the UI is up to your own imagination 😆
40:12
Build mini zoho clone
Where Is Source Code Broo
Patreon
naezakutafuta we talk kiasi
Haha, uko wapi?
@@ChaooCharleshaya waswahili tukutane hapa Tz dar es salam i real love your work bro najitahidi nipambane na hio ecommerce hadi nimalize thanks so much
I think planetscale is no longer free
Damn 🤦♂️
Hello Sir, Thank you for this complete tutorial, please tell me how you contact me?
chaoocharles@gmail.com
Let me remind you that I sent you an email recently, but I have not yet received a response. My request is quite urgent, and I would greatly appreciate it if you could take a moment to let me know what you're saying.
Your answer would be of great importance to me. Thank you very much for your understanding and responsiveness.@@ChaooCharles