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