Build an Appointment Booking System With Inertia
Playing
01. Introduction and demo

Episodes

0%
Your progress
  • Total: 5h 0m
  • Played: 0m
  • Remaining: 5h 0m
Join or sign in to track your progress
01. Introduction
01. Introduction and demo
5m 45s
0%
02. A fresh Inertia project with Pest
3m 4s
0%
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
20. Employee and service resources
9m 7s
0%
21. Listing employees and services
8m 58s
0%
22. Showing services for an employee
8m 7s
0%
23. Scaffolding the checkout
8m 37s
0%
24. Making an employee optional
3m 38s
0%
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
33. Hooking everything up to a form
4m 42s
0%
34. Setting an employee for the service checkout
7m 30s
0%
35. Adding booking details
3m 55s
0%
36. Storing an appointment
8m 28s
0%
37. Handling appointment collisions
8m 37s
0%
38. Showing the confirmation page
8m 39s
0%
39. Cancelling an appointment
3m 49s
0%

Transcript

00:00
In this course, we're going to be building out a full booking system with Inertia using Laravel and Vue.
00:06
This includes a really nice availability calendar, the ability to choose slots, and of course, make a booking and cancel it and stuff like that. There's a little bit more to it than that,
00:16
and I'm going to show you how this works now. Now, we're going to take this course in several sections. The main big section is going to be the core functionality of what we're building.
00:26
What this is going to allow us to do is take a bunch of employees and services, have certain employees only allowed to perform certain services,
00:36
calculate their availability, and of course, build in stuff like checking if appointments are already in the database and not showing them slots.
00:44
It's much easier to show you how this works, so let's go ahead and do that now. Okay, so you can see on the main screen here, it's just very basic.
00:51
We've got the ability to either choose an employee or a professional or choose a service first. Let's go ahead and click on a professional first and we'll look at how this works.
01:01
So obviously, when we go over to here, we now choose any of these services and these all have different durations. So I'm going to go ahead and choose here.
01:09
Okay, so the time right now is 1041, so the next available slot here is 1115, and we can either choose for today or of course, we can open up our availability calendar
01:19
to see more, and you can see that not only does this blank out any of the unavailable days like weekends that the employee doesn't work, it also shows us how many slots are available for that day,
01:29
and of course, that will go down as people make bookings. So I'm going to choose for tomorrow and let's choose nine o'clock tomorrow, and you can see that this just gives us a really basic form
01:39
where we can enter our details, and you can add more to this later if you need to. So I'm going to go ahead and just quickly make a booking here with my name and email address,
01:47
and as soon as we've done that, before we actually create the booking, we're going to check that this slot hasn't been taken. So for example, if someone has just booked this
01:57
a minute before we have chosen this and we're still on this page, if I click make a booking now, this is also going to check the availability
02:03
so that you're never going to end up with an appointment collision. So let's click make booking and you can see that it's booked and it gives us who it's booked with, when,
02:12
and of course, we can go ahead and cancel the appointment as well as if we want to. So let's go back to the main page that we were on and just take a look at the services.
02:23
Now, the beauty of the core functionality that we're building up is we don't need to specify an employee that we want to perform a service. For example, if I just want a haircut,
02:33
I can click on this and it will register this with any employee once we choose a date. So all of the availability calculations are done with all of the employees in mind
02:43
and we'll get these returned in this custom collection that we're going to be building up. So for example, if I want to book this for tomorrow at 945, this is just going to pick the next available employee
02:53
for that particular slot and then it's going to switch it over to show you who it's with. So this is really helpful
02:59
because sometimes customers don't care who they are actually with, they just want to know the next available appointment slot for a service type.
03:07
So again, we can go ahead and book that as well and you'll have noticed as well that the nine o'clock slot has disappeared because I booked that previously for this day
03:15
and of course, we can only book the slot after that. Now, aside from this, when we're putting together the booking UI, we're going to do stuff like look at the availability
03:24
into the future within this calendar. Now, the system that we're going to be building is incredibly fast when we refresh the page, it doesn't take long to calculate all of this availability
03:34
regardless of how many employees you have but what we don't want to do is load a date on this calendar way into the future. So if we just took a quick look at the database,
03:43
you can see the appointment here that I've just booked. If we look at the schedules over here, this is the schedule for myself. So I have got this running from the 8th of January
03:54
all the way up to a year in advance. So that is my schedule, my just overall schedule and then what I can do is I can set individual days that I do work and times that I work as well.
04:05
So I can set, I start on Monday, Tuesday at certain different times and if you have a look here, you can see that Saturday and Sunday just don't work at all so we can do that.
04:14
Now, as well as that, what we're also going to be doing is adding in the ability to add schedule exclusions. So we can add in holidays,
04:21
we can add in certain days or times that we're not going to be working and that will cancel out all of the slots for that particular employee.
04:29
So for example, if Alex isn't working on a certain day and we choose that service first option, that would just give the next available employee which would be Mabel.
04:38
We've just got another one in here as an example. So back to the availability calendar, this is very, very quick but if we just navigate next, what this is doing is it's continuously loading
04:49
in more dates. So what we can do is we can go really far into the future without slowing this down by making one request for all of these dates.
04:57
So this is just making an AJAX request all the way in and you can see that as we get to past the overall schedule that I've defined, there isn't any availability and of course you can change that,
05:07
it just depends on what you want to do. So the entire database is set up so it's very easy to go in and add these records either manually or within some sort of admin panel
05:17
and yeah, you can just bring the entire system together and this is just gonna be the basic UI that we're building for this that you can expand on if you need to.
05:25
Okay, so now that we've looked at this, we're pretty much comfortable with how this works. Let's go over to the next episode, set up a really basic project with Inertia
05:34
and really importantly, get PEST up and running so we can write some tests for the core functionality that we're gonna cover in the next section. So let's go over and set everything up.

Episode summary

Welcome to the course! In this intro episode, we kick things off by talking about what we're going to build together: a complete booking system from scratch using Laravel, Inertia, and Vue. You'll see that the booking system is pretty feature-rich — it has an availability calendar, lets you pick time slots, make and cancel bookings, and even handles more advanced stuff like making sure slots don't get double-booked.

We start with a guided demo of the finished app, showing both the user flow and some of the logic behind it. You’ll see how users can book with a specific employee or let the system pick the next available professional, and how the available time slots update in real time as people book. The calendar blanks out unavailable days (like weekends or holidays), shows how many slots are left, and is super quick to navigate even far into the future (no slow loading!).

We also take a quick look at the database structure — for example, how employee working schedules and "exclusions" (like days off or holidays) are managed. The system is designed so all this can be changed easily, either directly or through an admin panel.

Finally, we finish up by talking about what's next: setting up our project and getting PEST set up for testing, which is important for keeping our code solid as we build the main functionality.

So by the end of this episode, you’ll know exactly what we’re building and how it works, and you’ll be ready to jump into the hands-on setup in the next part!

Episode discussion

No comments, yet. Be the first!