The number of customers at the store has increased, and the staff is having trouble processing orders. Let's create a kiosk for customers to order ice cream. A kiosk is a simple interface that allows customers to order ice cream.

There is some missing information in the current schema to allow customers to order directly from the kiosk. We need to add serve type and contact information. Let's expand the schema to add these features.

Let's understand the new schema additions:

Next, we need to add dictionary entries for the new fields and enum values:

Next, let's add serveType and phone selection to the order form template.

Finally, let's display serveType on the order card to clearly show whether the customer's order is for here or take out, etc.

The first thing customers see when they approach the kiosk is the landing page. Think of it like the welcome screen at a fast-food restaurant kiosk - it should be inviting, easy to understand, and guide customers to their first choice: "For Here" or "Take Out".

Let's create an attractive landing page that makes ordering feel like a delightful experience:

Let's break down the key features of this landing page:

After customers complete their order, they need a confirmation page. Let's create a success page that reassures them:

The success page provides important feedback to customers:

The heart of the kiosk is the order form page. This is where customers actually customize their ice cream - choosing size, toppings, and entering their phone number for pickup notifications. Think of this page like the main ordering screen at a bubble tea shop where you select your drink size and add-ons.

The page needs to handle query parameters from the landing page and provide an intuitive form experience:

Let's understand the key components of this order form page:

Now let's style the Template component for a beautiful kiosk experience. Each section is wrapped in a card with icons:

The Template component uses these Field components for kiosk-friendly input:

When building customer-facing pages like kiosks, following UX best practices ensures a smooth and enjoyable experience. Here are the key principles we applied:

In the next tutorial, we'll explore how to use Scalar for computed values and aggregations. This will allow you to display dynamic information like order totals, wait times, and statistics in real-time.