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

Traversy Media October 7, 2024
Video Thumbnail
Traversy Media Logo

Traversy Media

View Channel

About

Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python and PHP

Video Description

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

You May Also Like