Traversy Media | Create A Booking App From Scratch | React, Next.js, Appwrite, Tailwind @TraversyMedia | Uploaded October 2024 | Updated October 2024, 1 hour ago.
In this 4-hour project-based course, we will build a booking app for meeting/conference rooms. We will be using React/Next along wth Appwrite, which is an open-source, all-in-one platform with databases, authentication, storage and more.

Visit Appwrite and claim $50 in free Appwrite Cloud Pro credits:
https://apwr.dev/traversymedia50

Final Code & Theme Files:
github.com/bradtraversy/bookit-app

Check Out My Courses:
traversymedia.com

Timestamps:
0:00 - Intro
1:30 - Project Demo
5:00 - Create Next App
6:40 - Prep & Clean Up
10:18 - Header Component
18:32 - Footer Component
19:53 - Homepage Rooms (JSON data)
22:32 - RoomCard Component
27:48 - Heading Component
28:49 - Room Details Page
38:20 - Apppwrite Project Setup
40:26 - Rooms Database, Collections & Attributes
44:10 - Add User & Room Data
47:03 - Permissions & API Key
48:15 - Environment Variables
51:16 - Create Appwrite Clients
57:52 - Get All Rooms
1:04:44 - Get Single Room
1:06:53 - Login & Register Pages/Forms
1:11:39 - Middleware in Next.js
1:15:21 - Protecting Routes
1:18:07 - Login & Create Session
1:26:00 - React Toastify Setup
1:34:36 - Logout & Destroy Session
1:43:18 - checkAuth Action
1:47:05 - Show/Hide Nav Links
1:51:00 - Global Auth Context
1:59:20 - Auth Wrapper
2:05:40 - Finish Route Protection
2:07:15 - Create User
2:16:50 - Add Room
2:32:04 - Storage Buckets & Image Upload
2:44:51 - Single Room Page Image
2:46:06 - My Rooms Page
2:59:04 - Delete Room
3:03:58 - DeleteRoomButton Component
3:08:38 - Bookings Collection Setup
3:11:32 - Book Room Action
3:21:32 - Booking Form
3:25:40 - Show Bookings
3:31:50 - BookedRoomCard Component
3:39:58 - Cancel Booking
3:51:07 - Check Room Availability
4:07:18 - Deploy To Vercel