Build and Deploy a Fullstack Hotel Booking Web App: Next.js 14, React.js, TS, TailwindCSS, Prisma

Published: 31 January 2024
on channel: Chaoo Charles
40,216
1.4k

Creating a FullStack Hotel Booking Web App in Next.js 14, React, Typescript, Shadcn, Clerk, My SQL (planetscale), Zustand, Stripe

✨ Source Codes: https://www.patreon.com/posts/next14-...
✨ Playlist:    • Next14 FullStack Hotel Booking App 🙌 ...  
✨ Follow Me on Twitter:   / chaoocharles  
✨ Join My Discord Server
  / discord  

🤑 Buy Me A Coffee: https://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


On this page of the site you can watch the video online Build and Deploy a Fullstack Hotel Booking Web App: Next.js 14, React.js, TS, TailwindCSS, Prisma with a duration of hours minute second in good quality, which was uploaded by the user Chaoo Charles 31 January 2024, share the link with friends and acquaintances, this video has already been watched 40,216 times on youtube and it was liked by 1.4 thousand viewers. Enjoy your viewing!