How to build a reservation app with Vue?

Learn

Managing reservations is an essential part of business in the service industry, where scheduling and customer capacity are critical, such as restaurants.

With Back4app, the Twilio API, and Vue, you can build a simple restaurant reservation app with features such as making reservations, receiving confirmation messages, and viewing reserved slots.

In this article, you will build and deploy a reservation app with Vue on the front end, Back4app to handle your backend and deployment needs, and Twilio to communicate with users through Whatsapp.

Contents

1 Project Overview
2 Building Your Vue Application
3 Creating a Back4app Backend
- 3.1 Creating the Reservation Class and Cloud Functions Using the AI Agent
4 Integrating your Cloud Functions in Your Vue Application
5 Testing the Application
6 Deploying your Application with Back4app’s AI Agent on Back4app Containers
7 Conclusion

Project Overview

In this guide, you will build a simple reservation application with Vue. The reservation application will have a ReservationForm view and a ReservationList view.

Guests interact with the ReservationForm view to input their reservation details, such as name, email, date, time, and phone number. They also see all reservations made in the ReservationList view.

You will make use of the following:

Back4app Backend: You will create a Back4app backend to store and manage reservation data from your Vue application in a database.

Twilio API: You will integrate the Twilio API into your Vue application to send WhatsApp confirmation messages to guests who have booked a reservation.

Back4pp’s AI Agent: You will create four cloud functions with the Back4app AI agent, which you will integrate into your Vue application to handle:
- Storing the reservation details on a Back4App database
- Checking the availability of the date and time to be reserved
- Sending a WhatsApp success message with the Twilio API telling the guest that their reservation has been made.
- Viewing reservations that guests have already made in your database.

Back4app Containers: You will deploy your Vue application to a Back4app container to make it accessible online.

Building Your Vue Application

This section will guide you through setting up your development environment and building the boilerplate of your reservation application.

Setting Up Your Development Environment

To create a Vue application, run the following command in your terminal:

npm create vue

The command above will prompt you to name your application and enable certain features for your application, such as adding TypeScript, JSX support, etc. Select no for all the options except “Vue Router”. You will need it to navigate between views.

Next, cd into the created directory and run the command below to install the required dependencies:

npm install

Next, install the Parse SDK by running the command below:

npm install parse

The Parse SDK allows you to communicate between your Vue application and your Back4app backend.

After setting up your development environment, proceed to create your reservation application views.

Creating the Views of Your Application

Create the ReservationForm and ReservationList views in your application’s views directory.

Then, enable routing between these two views by adding the code below in the index.js file in your router directory:

// index.js
import { createRouter, createWebHistory } from "vue-router";
import ReservationForm from "@/views/ReservationForm.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "Home",
      component: ReservationForm,
    },
    {
      path: "/reservations",
      name: "Reservations",
      component: () => import("@/views/ReservationList.vue"),
    },
  ],
});

export default router;

The code block above sets up routing within your Vue application. It defines a / route and a /reservations route. When guests access the app’s URL, the code block directs them to the ReservationForm view as the Home route.

The /reservations route directs the users to the ReservationList view. This route is lazily loaded, meaning your app only loads this route when necessary, which helps improve your app’s performance.

Next, to enable users to navigate between the two routes, configure your App.vue file to render a navigation bar displaying the route links:

//App.vue
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="wrapper" id="app">
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/reservations">View Reservations</RouterLink>
      </nav>
    </div>
  </header>
  <RouterView />
</template>

The code block above displays the App.vue file, which acts as your application’s main layout. The code block imports the RouterLink and RouterView components from the Vue Router library, representing each route with a RouterLink component.

The RouterLink component takes a to prop to specify the route the link directs to. The RouterView component acts as a placeholder, dynamically rendering the content of the current route.

In your ReservationForm.vue file, add the code block below to create a form for users to input their reservation details:

// ReservationForm.vue
<template>
  <div>
    <form>
      <input v-model="reservation.name" placeholder="Name" required />
      <input
        v-model="reservation.email"
        type="email"
        placeholder="Email"
        required
      />
      <input
        v-model="reservation.date"
        type="date"
        placeholder="Date"
        required
      />
      <input
        v-model="reservation.time"
        type="time"
        placeholder="Time"
        required
      />
      <input
        v-model="reservation.phoneNumber"
        type="tel"
        placeholder="Phone Number"
        required
      />
      <button type="submit">Create Reservation</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";
const reservation = ref({
  name: "",
  email: "",
  date: "",
  time: "",
  phoneNumber: "",
});
</script>

The code block above creates a form element with required fields to capture inputs for various details like the user’s name, email, date, time, and phoneNumber.

The above code block then creates a reactive reservation object to store the user details with the ref function from the vue library.

Next, add the following code block to your ReservationList.vue file to display the list of reservations users have made:

// ReservationList.vue
<template>
  <div>
    <ul v-if="reservations.length" class="wrapper">
      <li
        v-for="reservation in reservations"
        :key="reservation.objectId"
        class="card"
      >
        <p>Name: {{ reservation.name }}</p>
        <p>Date: {{ new Date(reservation.date).toLocaleDateString() }}</p>
        <p>Time: {{ reservation.time }}</p>
        <p>Phone: {{ reservation.phoneNumber }}</p>
      </li>
    </ul>
    <p v-else>No reservations found.</p>
  </div>
</template>

<script setup>
import { ref } from "vue";

const reservations = ref([]);
</script>

The code block above uses a vue conditional statement directive, v-if, to display existing reservations, if any.

If reservations exist, the code block iterates through each reservation in the reservations array with the v-for directive and displays the made reservations.

Styling the Views of Your Application

Add the following scoped style block to your ReservationList view to control the appearance of the list and other elements:

// ReservationList.vue
<style scoped>
h1{
  margin-block-end: 2rem;
}

.card{
  background-color: #D99858;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 12px;
  padding: 2rem;
  align-items: center;
}

li{
  color: #FFFFFF;
}

.wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

div{
  padding-inline-start: 1rem;
}

</style>

Add the scoped style block below to your ReservationForm view to control the appearance of the form:

// ReservationForm.vue
<style scoped>

  form{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

</style>

Finally, define global styles for your Vue application by adding the following CSS styles to your main.css file in the assets directory:

/* main.css */
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: "Montserrat", sans-serif;
  background-color: #333333;
  color: #FFFFFF;
}
nav {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
nav a{
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  color: #888888;
  margin-block-end: 3rem;
}
nav a:hover{
  color: #D99858;
}
header{
  padding: 1rem;
}
button {
  background-color: #FFFFFF;
  color: #D99858;
  border: none;
  padding: 0.7rem 0.9rem;
  font-size: 14px;
  border-radius: 7px;
  font-weight: 500;
}
button:hover {
  background-color: #D99858;
  color: #FFFFFF; 
}
input{
  inline-size: 100%;
  border: none;
  border-radius: 5px;
  outline: none;
  padding: 1rem;
  font-family: "Montserrat", sans-serif;
}
.container{
  inline-size: 60%;
  margin: auto;
}

After building the boilerplate of your reservation application, create a Back4app Backend to store reservation details in a database.

Creating a Back4app Backend

Creating your Backend on Back4app requires a Back4app account. If you do not have one, you can sign up for free.

Log in to your account and click the “NEW APP” button at the top right corner. This will lead you to a page where you will choose the “Backend as a Service” option.

Clicking “Backend as a Service” will prompt you to give your app instance a name and select the database type for your application. Select the PostgreSQL database and hit the “Create” button.

After Back4app sets up your application, you will be directed to your application instance, as shown below.

Retrieve your “Application ID” and “JavaScript Key” from the “Security & Keys” section. You can locate this section by clicking “App Settings” in the sidebar.

Next, create a .env file and add your “Application ID” and “Javascript Key” to load them as environmental variables within your application:

VITE_BACK4APP_APPLICATION_ID = <YOUR_APP_ID>
VITE_BACK4APP_JAVASCRIPT_KEY = YOUR_JAVASCRIPT_KEY>

Now, modify your main.js file to initialize Parse in your Vue application. Like so:

//  main.js
import "./assets/main.css";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Parse from "parse/dist/parse.min.js";

Parse.initialize(
  `${import.meta.env.VITE_BACK4APP_APPLICATION_ID}`,
  `${import.meta.env.VITE_BACK4APP_JAVASCRIPT_KEY}`,
);

Parse.serverURL = "<https://parseapi.back4app.com/>";

const app = createApp(App);

app.use(router);

app.mount("#app");

The code block above imports and initializes the Parse SDK in your Vue application, allowing your application to communicate with your Back4app backend.

Now, you need to store reservation details on your Back4app database. To store a guest’s reservation details, you will create a class within your database using Back4app’s AI agent.

The class will store reservation details, such as the name, email, date, etc.

Creating the Reservation Class and Cloud Functions Using the AI Agent

Locate the “AI Agent” tab on the top left side of your screen and feed the agent with the prompt below to create the class in the database:

Create database tables in my Back4app app with the following information.

1. Reservation Class:
Class Name: Reservation

Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
date (Date, Required)
time (String, Required)
phoneNumber (String, Required)

Populate the database tables with test data.

My Parse App ID: <Your Parse App ID>