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

Anja Petry

HTML

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn to build a comprehensive booking app for meeting rooms using Next.js, React, Appwrite, and Tailwind CSS. The tutorial covers UI design, authentication, image storage, database integration, and preventing double bookings. Step-by-step, you'll implement features like adding rooms, booking forms, and managing bookings, all while utilizing Appwrite for backend services.

Create A Booking App From Scratch | React, Next.js, Appwrite, Tailwind