Havi Dock Booking - A warehouse dock booking app that prevents conflicts

Project Showcase
1

Hi guys, hope you are all well.

Today I want to show my application that I have been working on with a friend for the past week. His company provides warehouse services and he needs a dock booking app for clients, one which would include different, pre-defined booking durations and of course, prevent conflicts.

The link of the app

A little video to show you the process, including the email confirmation. The link is here if the video embedded below doesn’t work.

If you want to read about the app, here, I go through each part of it.

1/User Profiles screen

Users can configure their profile, which consists of profile image & name, using text entry & image picker.

When they have made a booking, their active bookings will be showed under the title, like in the screenshot below.

image
image751×676 100 KB

2/Booking screen

Includes various choice components that reflect the type of dock the user needs. There are 4 unique types of dock based on the combinations of temperature & small/big dock type.

  • The truck type will be dynamically generated based on the choice of dock type.
  • The dock choices will be dynamically generated based on the choice of temperature & dock type.

image
image433×661 29.9 KB

Once a date & dock choice have been chosen, bookings from that same date and same dock will be shown to the user before the pick a start time. If the user still persists to choose a slot that conflicts, the app will prevent them from booking.

image
image429×667 32 KB

image

Inside the form, the choices from the previous screen will be showed in a basic table. The last 2 information users are asked to enter are the PO number and the truck license plate number.

image
image281×544 32.1 KB

Once the booking is confirmed, a nice little mail will be sent to the user’s email address, with an automatically generated image of the booking details.

3/Admin screen

If you’re not the admin, you can’t access this screen.

image
image278×587 31.2 KB

The admin tab has 2 functions: availability & dock calendar.

The availability part allows the admin to click checkboxes of which docks are available for next week (booking is only allowed for next week due to business set up). Only available docks will be shown to the user in the booking tab.

image
image284×539 32.9 KB

The dock calendar part allows the admin to check the bookings based on a date choice.

image
image283×585 22.2 KB

5 Likes
2

The image confirmation after each booking would look like this:

image
image1920×2160 792 KB

It’s the same concept that I used here:

4 Likes
3

Special thanks to @Jeff_Hager for the 0.1, 0.2, etc. concept, sorry I forgot which post it was to link it here.

Thanks to @Robert_Petitto for testing it a while ago, I wanted to make sure it works with another country’s datetime format because we struggled for a while with that. If you test this and find out that you can still make conflict bookings please let me know.

4 Likes
4

Wow!!! This app rocks. @ThinhDinh You covered a lot of angles to get this app functioning the way it does. Nice work!

I did a test booking and selected a particular date/time slot (from the USA) and after the booking has been confirmed it prevents me from booking again using the same date/time slot. So it appears to work properly and not allow conflicting schedules to be created.

1 Like
5

Did you receive the email as well? Thank you for taking time to test it. :smile:

6

Just to make it clearer it would block multiple slots from being booked so that a truck won’t show up when one is still in the dock.

For example: If your truck is booked from 10AM to 11AM, then I want to book a slot from 9.45AM to 10.30AM in the same dock, it will be blocked as well because it conflicts with the 10AM to 10.30AM part.

7

Very nice! Can I ask how you’re sending emails? It doesn’t seem to be coming from Zapier, so I assume it’s using a script?

1 Like
8

Yes it’s using a script I wrote. In the future if clients want to change the message that comes along with the image I can just modify it in the script.

The image was done using Cloudinary.

1 Like
9

Yep, I received the email confirmation…

email
email677×682 164 KB

My initial booking was scheduled for 8:00 AM, Monday, June 8th
(and it should last 30 minutes, 8:00 AM - 8:30 AM)

When I attempt another booking starting at 8:15 AM, Monday, June 8th
(it prevents the booking and says the slot is taken)

prevention
prevention1191×981 73.6 KB

1 Like
10

Thank you, so it works as intended!

1 Like
11

I’ve got a very similar booking app for rooms in my building, but I’ve been using Zapier to send the emails (which is causing an issue as we reach the limits of the free tier — we’re a non-profit). Can you share the script you used to do this? I’m not super familiar with scripts so would appreciate a template of sorts to get me started in automating emails like this (without Zapier). Thanks!

1 Like
12

Hi @kyleheney, I have sent you a personal message.

1 Like
13

I’d love to see this as well @ThinhDinh if you could share.

1 Like
14

This is amazing! Any specific time lag from the form submission to receival of the email?
I have used google scripts in the same way as you for whatsapp messages but the image confirmations looks so much better than a basic text. Loved the idea.

1 Like
15

Should just be seconds. However in some cases the mail has been sent from my side but it takes the client a while to receive, happens randomly.

1 Like
16

Love it! You have made me want to dive into cloudinary all over again!

1 Like
17

Hi i can’t duplicate the app can you fix it please. Thanks

18

Sorry but this app was not intended to be copyable.