How to build a scheduling and booking app with cloud data storage and real-time updates in Nuxt.js

A reservation and booking system is a software application that allows businesses to manage their bookings and reservations. This can include anything from hotel rooms to restaurant tables to doctor's appointments. Reservation and booking systems can be valuable tools for businesses of all sizes. They can help to improve efficiency, reduce errors, and improve customer satisfaction.

Appwrite Cloud is an extension of the open-source version of Appwrite. It comes with all the services included in the open-source version but now with a fully-managed service and minimum friction.

This post demonstrates how to build a simple reservation system with Appwrite Cloud's database and real-time updates on bookings and schedules.

GitHub

The project's GitHub repository can be found here.

Prerequisites

To follow along with this tutorial, you should have a working knowledge of the following:

• Vue, Nuxt.js, and CSS
• An Appwrite cloud account (you can request access to Appwrite Cloud here)

Setting up the project

You need to create a Nuxt.js starter project by navigating to the desired directory and running the command below in your terminal.

npx nuxi@latest init booking-app

The command creates a Nuxt.js project called booking-app.

Next, you need to install Nuxt.js dependencies by running the command below in your terminal.

npm install

Next, go to the project directory and start the development server on localhost:3000 with the commands below.

cd booking-app && npm run dev

Installing dependencies

Installing Pink Design
Pink Design is an open-source system from Appwrite used to build consistent and reusable user interfaces. It enhances collaboration, development experience, and accessibility.

To install Pink Design, open the terminal in the project directory and run the following command.

npm install @appwrite.io/pink

To use Pink Design in your project, import it into your project's files like this:

import '@appwrite.io/pink';
import '@appwrite.io/pink-icons';

Installing Appwrite
Appwrite is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications. To install it, run the command below:

npm install appwrite

Creating an Appwrite Cloud project

To get started, log into your Appwrite cloud, click the Create project button, input booking-app as the name, then click Create.

Create a database, collection, and add attributes
With your project created, you can set up your application database. First, navigate to the Databases tab, click the Create database button, input bookings as the name, and then click Create.

Secondly, you need to create a collection for storing your bookings. To do this, click the Create collection button, input booking_collection as the name, and then click Create.

Thirdly, you need to create attributes to represent your database fields. To do this, you need to navigate to the Attributes tab and create attributes for each of the values that collect the bookings information, as shown below:

Finally, you need to update your database permission to manage them accordingly. Navigate to the Settings tab, scroll to the Update Permissions section, select Any, mark accordingly, and then click Update.

After applying the necessary configurations on Appwrite, let's start building the application.

Integrating Appwrite Cloud into the Nuxt.js project

To integrate Appwrite into the UI, create a utils/web-init.js file. The file should look like this.

import { Client } from 'appwrite';
const client = new Client();
client
    .setEndpoint('https://cloud.appwrite.io/v1')
    .setProject('646812a2e22b9fbf08d8');

The code above does the following:

• Import the module Client from appwrite
• Instantiates the Client object
• Uses the client object to set the endpoint and project

Building the booking interface

Let us create a booking page where users will input their schedule which will be stored in the database. To do this, you will create a components/BookUser.vue and add the code below:

The gist above achieves the following:

• Imports the Appwrite Pink Design for styling
• Created a form to accept the name, message, date, and available time for users to book an appointment
• Added the data to return to the database

Next, import the components/BookUser.vue into the pages/index.vue, like so:

<template>
  <div>
   <BookUser/>
  </div>
</template>
<script>
import "@appwrite.io/pink"; // optionally, add icons
import "@appwrite.io/pink-icons";
</script>

At this point, your booking and scheduling page should look like the below:

Creating database documents
Next, you need to add new documents to the database collection. In the components/BookUser.vue file, write a uploadBooking() function to create the document.

async uploadBooking() {
      if (this.blockedDates.includes(this.date)) {
        alert("This date is blocked for booking");
        return; // Stop the execution of the method
      }
      try {
        await databases
          .createDocument(
            "64681868ceef66544a00",
            "64681913b4c68fd83d28",
            "unique()",
            {
              name: this.name,
              message: this.message,
              date: this.date,
              time: this.time,
            }
          )
        alert("booking sent in");
      } catch (error) {
        console.log(error); // Failure
      }
}

In the code block above, the uploadBooking() function does the following:

• Creates a new document using Appwrite's createDocument() function while passing the collection ID and attribute values as parameters
• Checks if the user includes a particular date blocked by the admin, then stops the booking execution

Make sure to add a click event to the Submit button and also prevent the page from reloading, like so:

<div class="u-flex u-main-end u-gap-12">
      <button class="button" type="submit" @click.prevent="uploadBooking">
            Submit
      </button>
 </div>

Building the dashboard interface

This is where the admin user will see the scheduled appointment in real time. In the page directory, create a dashboard.vue file and paste the following code.

This section is a simple table containing all the booking information details: the user's name, message, date, and time. There's also a props object for each of these attributes.

Fetching the bookings

Your page displays the booking information that was entered into the form. With this logic, you want your uploadBooking() function to be responsible for creating the documents to display user booking information.

In the pages/dashboard.vue file, you create a getBookings() function that gets called when mounted on your app, puts all the details in an object, and pushes it to the bookings array.

methods: {
    async getBookings() {
      try {
        let bookingData = await databases.listDocuments(
          "64681868ceef66544a00",
          "64681913b4c68fd83d28"
        );
        console.log(bookingData);
        this.bookings = bookingData;
        console.log(response); // Success);
      } catch (error) {
        console.log(error, "error");
      }
    },
}

Every time the page reloads or when changes occur in the database, you want to fetch all the booking details in real time. To do that, call the getBookings() function on the mounted method like so:

mounted() {
    this.getBookings();
    if (account.get !== null) {
      try {
        client.subscribe("documents", (response) => {
          console.log(response);
          this.getBookings();
        });
      } catch (error) {
        console.log(error, "error");
      }
    }
},

Displaying the bookings

To display the bookings, all you have to do is loop over the bookings array and pass in all the data as props, like so:

<tr
    class="table-row"
    v-for="booking in bookings.documents"
    :key="booking.$id"
>
<!-- table data goes here... -->
</tr>

Fill out the booking form, and on the dashboard, the admin user sees the booking information in real-time, like so:

Conclusion

This article discussed using Appwrite Cloud's database system to store data and display the data in real-time for a booking and scheduling app in Nuxt 3 app.

Resources

• Appwrite
• Appwrite Cloud
• Appwrite's Real-time
• Appwrite Pink Design