Introduction and demo: Build an Appointment Booking System With Livewire

00:01

a fully functioning appointment booking system with Laravel and Livewire. So we're going to take this introduction episode just to go through pretty much everything

00:11

that we are going to build. And I'm also going to give you a behind the scenes into the database as well, so you can see how these kind of things are set up,

00:20

how we assign availability to each of these employees, and then how we give them things like lunch breaks or holidays. OK, so you can see here we've got two sections. Either choose a professional, which is just an employee,

00:34

or choose a service first. Now, this is really important, because sometimes when we book something, we might just want a haircut, for example, and we don't really

00:42

care who the particular service is with. So when we click through to this particular service, we go through to the checkout, but this lists for any employee.

00:53

Now, as soon as we go ahead and choose a date and a time slot here, it will automatically assign us the first available employee who's able to perform that service.

01:03

Now, let's go through the standard booking flow, where we click on a professional and then choose the service first of all. And let's just see how this looks,

01:11

and then we'll dive into the database. OK, so we've got this booking calendar here, which we can really heavily customize. If you wanted to change this around, you could.

01:19

And the first thing you'll notice is a lot of these days are grayed out. Now, the reason for this is obviously the ones in the past are grayed out,

01:26

because we can't book in the past, but also the weekends are booked out. So my schedule runs from Monday to Friday, and it runs from 9 till 5.

01:35

That is heavily customizable, and it's heavily customizable per day as well. So if I didn't want to work on Fridays, I could just set that to a null value in the database.

01:44

OK, let's go through with the booking. You can see that we've got four slots available from today, and I can go ahead and just choose any of these slots and just change this around if I need to.

01:54

So the booking details, again, heavily customizable. I've only included two fields here, but you can go ahead and add more in here if you want. And let's go ahead and enter some details

02:04

to quickly make a booking. OK, so I'm going to click Make Booking. And yeah, sure enough, we're booked in. Now, as we click that button, behind the scenes,

02:11

what actually happened was we checked availability again. Imagine if two people were on the checkout at the same time wanting to book the same time slot. Someone gets there first, and then someone else

02:21

clicks that Submit button. It will alert the user if that slot has been taken while they were in the checkout. That's a really important part of this.

02:30

Or, of course, we're going to end up with duplicate bookings. OK, so we can go ahead and cancel the appointment. We won't look at that yet. But let's go back again to here.

02:37

And you can see that the slot that I've just booked has, of course, disappeared. And as you can see on the calendar, the slot count here for this particular day

02:44

has changed as well. So we're displaying how many slots are for particular days so we can look into the future and see what's the best chance of getting an appointment.

02:52

OK, let's just really quickly preview the thing that I spoke about before, which was when we just want to choose a service. So if I just click on here, for example,

03:01

and I want to book this, say, for the 16th of May, quite a few time slots available here. When I click it, this switches over to the employee that can perform that service.

03:10

We enter our details. We make the booking. It works in exactly the same way. OK, let's jump over to the database

03:15

really quickly and just talk about schedules. Employees and stuff is pretty obvious. We just insert some records there with a profile photo URL.

03:23

But the schedules are interesting. So we've got this starts at and ends at date, which we'll be talking about this entire database schema in a lot of detail throughout the course.

03:33

Now, the starts at and ends at date runs from a long period. So you can see this runs from 2024 to 2025. So I've blocked in a year worth of availability for these specific days.

03:45

Now, this might look a little bit strange where we have Monday starts at, Monday ends at. It might seem a little bit over the top. But what this means is we can have fine-grained control

03:55

over which days we work and also the times on which days we work as well. So for example, if we didn't want to work Friday, we would just set these two values to null.

04:03

Same for any of these days. Now, this makes it really interesting because what we could do is we could set availability for, say, six months.

04:09

And then if we know in six months' time we're not going to be working some days, we can just create a new record. And this will all be taken into account.

04:17

So we'll be going through all of that throughout the course. It's a really important concept. But this makes it incredibly flexible. Now, we also have schedule exclusions.

04:25

I haven't inserted any. But what we would need to do here, let's say that we wanted to book a week off for a holiday. We could just add the employee, the starts at date

04:33

and the ends at date. And that would cut out any of the availability directly within the calendar. And we would not be able to book for that specific employee.

04:42

And of course, we've got the standard appointments table and all of that kind of stuff as well. But we're going to be speaking about all of this in incredible detail as we go through the course,

04:51

as we build up all of the core functionality for this. OK, I think we're just about done having a look at how this works. Let's go over to the next episode.

04:59

If you are new to Laravel, we'll set up a fresh project. And then we'll go on to get everything set up so we can start building out an entire appointment booking system for Livewire.

Episodes

Transcript

Episode summary

Episode discussion