Create A Booking App From Scratch | React, Next.js, Appwrite, Tailwind
Traversy Media
View ChannelAbout
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
Latest Posts
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
Boost Your Development Setup
AI-recommended products based on this video

NOCO Boost GB40: 1000A UltraSafe Jump Starter – 12V Lithium Battery Booster Pack, Portable Jump Box, Power Bank & Jumper Cables - for 6.0L Gas and 3.0L Diesel Engines

Funny Cute Mouse Pad with Wrist Rest, Dumpster on Fire Ergonomic Mouse Pads Wrist Support for Desk, Mousepad for Wireless Mouse Gaming Laptop Work Home Desk Accessories Office Supplies Decor



























![Learn The MERN Stack [5] - Implementing Redux](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/iI5h4-pChho/hqdefault.jpg)
![Learn the MERN Stack [2] - Express API & MongoDB](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/5yTazHkDR4o/hqdefault.jpg)



![Node.js & Pusher Real Time Polling App [1] - Initial Back End](https://imgz.pc97.com/?width=500&fit=cover&image=https://i.ytimg.com/vi/SSDED3XKz-0/hqdefault.jpg)




