Create a Booking App from Scratch - React, Next.js, Appwrite, Tailwind

Overview

Build a comprehensive booking app for meeting and conference rooms from scratch using React, Next.js, Appwrite, and Tailwind CSS in this project-based tutorial. Learn to create a full-stack application with features such as user authentication, room management, booking functionality, and image uploads. Explore key concepts including database setup, API integration, middleware implementation, and route protection. Develop essential components like headers, footers, and custom cards while incorporating React Toastify for notifications. Master the process of setting up Appwrite for backend services, including database collections, storage buckets, and user management. Implement CRUD operations for rooms and bookings, handle session management, and create a global authentication context. Finally, learn how to deploy the finished application to Vercel for production use.

Syllabus

- Intro
- Project Demo
- Create Next App
- Prep & Clean Up
- Header Component
- Footer Component
- Homepage Rooms JSON data
- RoomCard Component
- Heading Component
- Room Details Page
- Apppwrite Project Setup
- Rooms Database, Collections & Attributes
- Add User & Room Data
- Permissions & API Key
- Environment Variables
- Create Appwrite Clients
- Get All Rooms
- Get Single Room
- Login & Register Pages/Forms
- Middleware in Next.js
- Protecting Routes
- Login & Create Session
- React Toastify Setup
- Logout & Destroy Session
- checkAuth Action
- Show/Hide Nav Links
- Global Auth Context
- Auth Wrapper
- Finish Route Protection
- Create User
- Add Room
- Storage Buckets & Image Upload
- Single Room Page Image
- My Rooms Page
- Delete Room
- DeleteRoomButton Component
- Bookings Collection Setup
- Book Room Action
- Booking Form
- Show Bookings
- BookedRoomCard Component
- Cancel Booking
- Check Room Availability
- Deploy To Vercel