Playing
02. A fresh Inertia project with Pest
Episodes
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
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
Transcript
00:00
Okay so before we move into the next section where we're going to build the entire core functionality for this, let's get a very basic project set up and test running so we can run some tests. Okay so I'm going to go ahead and use the Laravel installer here and we're going to
00:13
go ahead and create out a Laravel booking system inertia project and I'm going to use the dev flag here because at the time of release Laravel 11 wasn't released but we want to use Laravel 11. Okay so we're going to go ahead and use Laravel Breeze here, really important, and of course
00:29
we're going to go ahead and use Vue with Inertia, so let's choose that option. We don't need to worry about any of these optional features and of course the testing framework we want to use is Pest. Now we won't initialize Git and we'll just wait for this to run and we'll also choose
00:43
our database as well. Okay let's go ahead and use MySQL as our database and we'll go ahead and not run the default migrations just yet and just wait for everything to install. Okay now that's done let's first of all go ahead and just run our migrations and we do
00:59
want to create the database so let's do that now. If we switch over to our database here let's just run everything we need for the defaults. So the next thing we want to do is just go ahead and boot this up and make sure everything is working so let's run npm run dev here and pull up another tab for everything else and
01:16
we'll head over to the browser, give that a refresh and yeah sure enough we can register an account and log in. We're not going to be doing that because this is going to be open to the public and we're not going to require that a user has an account to actually create a booking but if you wanted
01:29
to when you are creating a booking you could attach this to a logged in user if you wanted to. Okay so the next thing we want to do is come over to our php unit xml file and we want to come down to these two lines here and uncomment both of these.
01:43
Now when we run our test this is going to run on sqlite so it doesn't interfere with the database that we've already got set up. So if we go and just run our tests now by using pest what we should see is a bunch of tests that already exist within this starter kit.
02:00
Now that's okay what I'm going to do is actually just get rid of these just so we can see the output a little bit more clearly as we're going through the course. You don't need to do this if you don't want to and if we just look under our test directory we've got this auth directory which I'm going to go ahead and just remove we've got an example
02:17
test and we've got a profile test here as well and if we look under unit we've also got an example unit test in here. All of the tests that we're going to be writing are feature tests because these are all going to hit the database even though we're just going to be testing these overall classes
02:32
and what the stuff that we're building. Okay so now that we've done that let's go ahead and just run pest again just to make sure and yeah sure enough we've got no tests found. So we've got our application set up and ready to go it's running in the browser which we
02:47
don't need just yet because we're just going to focus on this core functionality and we're going to dump a few things out inside of our web routes but we've got tests up and running so we can test everything that we build in the next section. So let's head over there and start to build out our core functionality.
39 episodes•5 hrs 0 mins•1 year ago
Overview
Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course.
Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments.
For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots).
To finish up, we’ll create an entire booking flow with Inertia (using Vue), including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment.
Phew. We’ve got a lot to learn — let’s build a booking system with Inertia!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!