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 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:
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 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
source