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

Опубликовано: 31 Январь 2024
на канале: 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