Create A Booking App From Scratch | React, Next.js, Appwrite, Tailwind
About
No channel description available.
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
Boost Your Development Setup
AI-recommended products based on this video
NEXPOW Car Jump Starter,Car Battery Jump Starter Pack 1500A Peak Q10S for Up to 7.0L Gas and 5.5L Diesel Engine12V Auto Battery Booster,Jumper Cables,Portable Lithium Jump Box with LED Light/USB QC3.0
Firefly Variety 8 Pack - Fire Starter Accessory for Swiss Army Victorinox Knives (Neon Green-Yellow Glow)
9-in-1 5000A 150PSI Car Battery Booster Jump Starter with Air Compressor (All Gas/9L Diesel), Portable Car Battery Booster Pack, Safe Durable Car Jump Starter with Extended Jumper Cables, Glove, Light
Monster N-Lite 211 Wireless Earbuds， Bluetooth 6.0 Stereo Headphones with Noise-Cancelling Mic and LED Display, Built-in Mic for Clear Calls, Waterproof Design for Sports
Monster N-Lite 211 Wireless Earbuds, Bluetooth 6.0 Stereo Headphones with Powerful Bass, Built-in Noise-Cancelling Mic for Clear Calls, LED Display, 36H Playtime, IPX5 Waterproof Design for Sports
HLDIRECT 47 Inch Gaming Desk with LED Lights, Home Office Gamer Desk, Ergonomic Computer Table with Large Carbon Fiber Desktop, Computer Desk with Cup Holder & Headphone Hook for Home Office, Black
FOYTOKI 2 Sets Rechargeable Hand Warmers Portable with Temperature Levels Ergonomic Design for School Office
IMGadgets 47 x 24 Inches Height Adjustable Electric Standing Desk 2024, 5th Gen Quieter Motor Ergonomic Sit Stand Up Home Office Computer Desk with Height Memory Buttons, Display, 2 Headphone Holders
SEVEN WARRIOR Gaming Desk with LED Lights & Power Outlets, 55" Computer Desk with Monitor Shelf, Home Office Desk with Cup Holder and Headphone Hook, Ergonomic, Carbon Fiber Surface Black
Small Standing Desk Adjustable Height, Mobile Stand Up Desk with Wheels, 32 Inch Portable Rolling Desks for Walking Pad Treadmill Wood Rustic
ERGOMAKER 55-inch Electric Standing Desk, Adjustable Height Stand Desk, Sit Stand Desk with Computer Workstation, Rustic Brown
Portable Rolling Desk on Wheels Small Standing Desk Adjustable Height Desks with Wheels for Small Spaces, 32" Computer Desk with Storage Shelves for Home Office Study,Rustic
