Full Stack Tutorial – Hotel Management Site w/ Next.js, React, Sanity.io, Tailwind, Stripe
3,348Learn how to build and deploy a hotel management system with Next.js, React, Sanity.io, Tailwind CSS, and Stripe.
Features:
- Hotel Room Management CRUD with Sanity.IO
- Hotel Room Review
- Room Booking
- Checkout with Stripe
- Stripe webhook
- Light / Dark Mode with React Context
- Search (Room Type / Name)
- Authentication with Auth.JS
- Typescript
- useSwr Hook
- Deployment to Vercel
- And lots more...
💻 Code: https://github.com/laribright/hotel-management
✏️ Course created by @codewithlari
⭐️ Contents ⭐️
0:00:07 Intro and Demo
0:09:07 New Project
0:14:42 Layout
0:35:02 Dark / White Theme
0:47:37 Authentication Page Setup
1:02:01 Sanity CMS Integration
1:13:57 Environment Variables
1:16:47 Sanity Schemas (user, account, booking, hotelRoom, verificationToken)
1:52:37 Authentication with next auth (Github, Email, Google)
2:12:02 Toast Notification
2:14:18 Fixing Api folder error
2:15:35 Authentication Continued
2:20:29 Complete Schema
2:25:22 Authentication Test
2:31:07 Configuring jwt
2:40:37 Custom classnames using tailwind directives
2:42:07 Hero Section
3:07:35 Search Feature
3:23:52 Gallery Component
3:25:47 NewsLetter Component
3:27:22 Featured Room
3:56:37 Nextjs Loading Component
3:58:33 Nextjs Error Component
4:02:27 Rooms Page
4:31:07 Room Details Page
6:03:28 Create Booking API
6:13:58 Middleware
6:16:07 Stripe Integration
6:38:45 Test Booking Payment
6:42:37 Webhooks
7:25:37 User Details Page
8:37:10 Rate Hotel Room
9:28:22 Display Hotel Room Rating
9:54:26 Git / Vercel / Deployment
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news