Create A Booking App From Scratch | React, Next.js, Appwrite, Tailwind
In this 4-hour project-based course, we will build a booking app for meeting/conference rooms. We will beryllium utilizing React/Next on wth Appwrite, which is an open-source, all-in-one level pinch databases, authentication, retention and more. Visit Appwrite: https://appwrite.io Final Code & Theme Files: https://github.com/bradtraversy/bookit-app Check Out My Courses: https://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 successful 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