Build a Client Scheduling App with WeWeb and Xano

In this live building workshop, our Education Lead, Matthew, demonstrates how to create a complete booking management platform using WeWeb for the frontend and Xano for the backend.

The tutorial covers the setup of:

Public booking pages,
An admin dashboard, and
The use of AI for design features.

Matthew also breaks down Xano's backend setup, covering table schema, endpoint structure, and key API workflow setups.

Watch the full workshop here, and find the prompts, wireframes and backend boilerplate below👇

‍‍

Assets used in the video

What are the key features of the scheduling app?

Client booking portal.
Key metrics and appointment tracking dashboard.
Easy client appointment management system.
Interactive tables to centralize data.
Visual planner to stay organized.

What role restrictions are needed?

Unauthorised users can only book appointments.
Authorised users can interact with the appointment management interface.

What steps users need to take to book and manage appointments?

Client booking flow

User access management flow

Data access and reporting flow

What pages would the appointment management app need?

Page	Purpose	Key Features
Public Booking Portal	Let clients (non-logged-in) see available slots, fill in their info, and book an appointment.	Calendar or date/time picker for available slots. Form to capture client details (name, phone, email, notes). Success/confirmation screen after booking.
Login	Internal users log in to see the management interface.	Simple username/email + password form.
Dashboard / Home	Provides a quick overview of key stats, upcoming bookings, or any important announcements.	Display basic metrics such as number of appointments scheduled for today/this week, cancellations, etc. Quick links to bookings table, calendar view, etc.
Bookings Management	Allows any logged-in user to view, add, edit, or delete appointments in a centralized table.	Full CRUD on appointments (change date/time, client info, status). Sort/filter by date, status, service type (if applicable). Search by client name or phone.
Clients	Any logged-in user can view, add, edit, or delete clients in a centralized table.	Full CRUD on clients. Search by client name or phone.

What would the database schema look like?

A database schema is a blueprint that defines how data is stored, organized, and related within a database. The schema outlines the tables, columns, data types, and relationships between them.

A well-structured database schema is crucial for managing appointments and client data effectively.

Here’s the database schema for the booking management system:

📌 users Table

Stores internal user accounts (for users who need to log in and manage the system).

Column	Type	Description
id	INT (PK)	Primary key, auto-increment
email	VARCHAR	Unique email used for login
password_hash	VARCHAR	Stores password hash (never plain text)
name	VARCHAR	(Optional) User’s name
created_at	DATETIME	Timestamp when the record was created
updated_at	DATETIME	Timestamp when the record was last updated

📌 clients Table

Stores information about clients who book appointments but do not log in.

Column	Type	Description
id	INT (PK)	Primary key, auto-increment
first_name	VARCHAR	Client’s first name
last_name	VARCHAR	Client’s last name
email	VARCHAR	(Optional) Email, can be unique if required
phone	VARCHAR	Client’s phone number
created_at	DATETIME	Timestamp when the record was created
updated_at	DATETIME	Timestamp when the record was last updated

📌 services Table (Optional)

If multiple appointment types exist (e.g., massage, haircut), store them here. Omit this table if only one type of service is offered.

Column	Type	Description
id	INT (PK)	Primary key, auto-increment
name	VARCHAR	Name of the service (e.g., "Haircut")
description	TEXT	Description of the service
price	DECIMAL	Price associated with the service
created_at	DATETIME	Timestamp when the record was created
updated_at	DATETIME	Timestamp when the record was last updated

📌 bookings Table

Central table that stores all appointment information.

Column	Type	Description
id	INT (PK)	Primary key, auto-increment
client_id	INT (FK)	References `clients.id` to identify who booked
service_id	INT (FK)	References `services.id` (optional if multiple services)
appointment_date	DATE	Date of the appointment
appointment_datetime	DATETIME	(Optional) Use this if date and time should be combined
status	VARCHAR	Status of the appointment (e.g., "Scheduled", "Completed", "Canceled", "No-show")
notes	TEXT	Special instructions or internal notes
created_at	DATETIME	Timestamp when the booking was created
updated_at	DATETIME	Timestamp when the booking was last updated

✅ Note: If you prefer a single DATETIME column for both date and time, replace appointment_date with appointment_datetime in the bookings table.

To easily visualize your database schema, copy the database schema provided above and ask ChatGPT or Claude to convert it into DBML (Database Markup Language). Then, paste the generated DBML code into DbDiagram.

How to organize the Xano API endpoints?

An API endpoint is where the magic of data exchange begins.

Xano API Endpoints serve as gateways that allow app users access and interact with app related data through the frontend built in WeWeb.

Below are some endpoints that will power the booking system:

Public-facing endpoints (no login required)

Endpoints	Method	Purpose
/booking/availability	GET	Return a list of available slots for a given date or range.
/booking	POST	Create a new booking from the public side.
/booking/confirmation	GET	Display a "Success" or "Confirmation" page after booking.

Authentication endpoints (for internal users)

Endpoint	Method	Purpose
/login	POST	Handle login and create an authenticated session or return a token.
/logout	POST	Destroy the user session or token to log out.

Internal / admin-facing endpoints (requires login)

A) Dashboard & Pages

Endpoint	Method	Purpose
/dashboard	GET	Get the data to be shown on the dashboard.
/calendar	GET	Return or render a calendar view with all bookings.
/reports (Optional)	GET	Get the saved reports data.

B) Bookings CRUD (Admin)

Endpoint	Method	Purpose
/bookings	GET	Return a list of all bookings or filtered list.
/bookings/:id	GET	Get details of a single booking.
/bookings	POST	Create a new booking from the admin side.
/bookings/:id	PATCH	Update an existing booking (e.g., reschedule or change status).
/bookings/:id	DELETE	Delete or cancel a booking.

C) Clients CRUD (Admin)

Endpoint	Method	Purpose
/clients	GET	List all clients in the system.
/clients/:id	GET	Retrieve detailed info for a client.
/clients	POST	Create a new client.
/clients/:id	PATCH	Update a client’s details.
/clients/:id	DELETE	Remove a client record.

D) Services CRUD (Optional)

Endpoint	Method	Purpose
/services	GET	List all services available.
/services/:id	GET	Get details of a single service.
/services	POST	Create a new service.
/services/:id	PATCH	Update an existing service.
/services/:id	DELETE	Delete a service.

How to maintain a branded, consistent look and feel across the app?

Brand name

Slotly

Color palette

Purpose	Color Code	Description
Primary	#4A90E2	Vibrant Sky Blue
Secondary	#2C3E50	Deep Blue-Gray
Accent	#F5A623	Warm Orange
Background	#F4F7F9	Light Cool Gray
Text	#1C1C1C	Almost Black

WeWeb AI page generation prompts & wireframes

Booking page

Prompt:

On this page, please create a booking form.

My app is called Slotly.

For context, I am building a booking platform and this page is where clients can book.

Please make sure to bind the colors of appropriate elements to the colors in my library. Here is a list of the names of colors in my library:

Primary

Secondary

Accent

Background

Text

When choosing a booking, the user must first select the service they need. Then they can select a date, and them will then see all available times for that day. The date and time selects must be separate.

Once these are selected, I need this information I need from the user:

- first name

- last name

- email

- phone number - comments

They can then book their appointment  I have attached an image of the extremely basic skeleton I want the page to be based off. Please ensure it has a minimalistic, modern design.

Wireframe:

Booking confirmation page

Prompt:

On this page I want to show a confirmation of the booked appointment.   I have attached as context the data available.

Please make sure to bind the colors of appropriate elements to the colors in my library. Here is a list of the names of colors in my library:

Primary

Secondary

Accent

Background

Text

User login page

Prompt:

On this page, please create a log in page that has a modern, minimalistic design.

Please make sure to bind the colors of appropriate elements to the colors in my library. Here is a list of the names of colors in my library:

Primary

Secondary

Accent

Background

Text

To log in, the user needs to give their email and password.

Dashboard

Prompt:

On this page, please create a dashboard page.

My app is called Slotly.

For context, here is a summary of what will be on the app:

I want to build an automated booking system app with the following pages:

- dashboard

- bookings

- clients

Please make sure all elements that are interactive have a cool hover state, and that the left side nav bar is a multi page section.

Please make sure to bind the colors of appropriate elements to the colors in my library. Here is a list of the names of colors in my library:

Primary

Secondary

Accent

Background

Text

I have attached an image of the extremely basic skeleton I want the page to be based off. Please ensure it has a minimalistic, modern design.

Wireframe:

Bookings

Prompt:

On this page, please create the bookings page.

Please make sure all elements that are interactive have a cool hover state, and that the left side nav bar is a multi page section.

Please make sure to bind the colors of appropriate elements to the colors in my library. Here is a list of the names of colors in my library:

Primary

Secondary

Accent

Background

Text

I have attached an image of the extremely basic skeleton I want the page to be based off. Please ensure it has a minimalistic, modern design.

Wireframe:

Clients

Prompt:

On this page, please create the clients page.

Please make sure all elements that are interactive have a cool hover state, and that the left side nav bar is a multi page section.

Please make sure to bind the colors of appropriate elements to the colors in my library. Here is a list of the names of colors in my library:

Primary

Secondary

Accent

Background

Text

I have attached an image of the extremely basic skeleton I want the page to be based off. Please ensure it has a minimalistic, modern design.

Wireframe:

Feel free to reach out to us in case of questions.

Happy building!