Create the Services Page | Build BookIt with Svelte 5

Build the Core of BookIt

Every booking app needs a place to browse what’s available. In this lesson, you’ll create the services page — the heart of BookIt where customers discover what they can book.

What You’ll Learn

Create a new route by adding a folder and +page.svelte
Build a simple services listing page
Verify your route works in the browser

The Problem

BookIt currently only has a homepage. Customers need a dedicated page to browse all available services — lawn mowing, hedge trimming, consultations, and more. We need a /services route.

Create the Services Route

Creating a new page in SvelteKit is straightforward: create a folder, add +page.svelte.

Step 1: Create the Folder

Inside your src/routes directory, create a new folder called services:

src/routes/
├── +page.svelte          (existing homepage)
└── services/             ← Create this folder

Step 2: Add the Page File

Inside the services folder, create +page.svelte:

<!-- filename: src/routes/services/+page.svelte -->
<h1>Our Services</h1>
<p>Browse our available services and book your appointment.</p>

That’s it. You’ve created a route.

Step 3: View in Browser

With your dev server running (npm run dev), open your browser to:

http://localhost:5173/services

You should see “Our Services” displayed on the page.

Add Service Listings

A page that just says “Our Services” isn’t very useful. Let’s add some actual services. For now, we’ll hardcode them directly in the component — later modules will teach you how to load this data from a server.

<!-- filename: src/routes/services/+page.svelte -->
<script>
  // Hardcoded services for now — we'll load these from a server later
  const services = [
    {
      id: '1',
      slug: 'lawn-mowing',
      name: 'Lawn Mowing',
      description: 'Professional lawn mowing service for residential properties.',
      price: 50,
      duration: 60
    },
    {
      id: '2',
      slug: 'hedge-trimming',
      name: 'Hedge Trimming',
      description: 'Expert hedge and shrub trimming to keep your garden tidy.',
      price: 75,
      duration: 90
    },
    {
      id: '3',
      slug: 'garden-consultation',
      name: 'Garden Consultation',
      description: 'One-on-one consultation for garden planning and advice.',
      price: 100,
      duration: 60
    }
  ];
</script>

<h1>Our Services</h1>
<p>Browse our available services and book your appointment.</p>

<ul>
  {#each services as service}
    <li>
      <h2>{service.name}</h2>
      <p>{service.description}</p>
      <p><strong>${service.price}</strong> · {service.duration} minutes</p>
    </li>
  {/each}
</ul>

The {#each} block loops through the services array and renders each one. Don’t worry about understanding every detail yet — we’ll cover control flow thoroughly in Module 5.

What You’ve Built

Refresh your browser at /services. You should now see:

A heading “Our Services”
A list of three services
Each service showing name, description, price, and duration

It’s not styled yet (that comes later), but the functionality is there.

Your Project Structure

Your routes folder should now look like this:

src/routes/
├── +page.svelte          → / (homepage)
└── services/
    └── +page.svelte      → /services (what you just built)

Common Mistakes

Wrong Folder Location

src/
├── routes/
│   └── +page.svelte
└── services/                 ← Wrong! Outside routes folder
    └── +page.svelte

The services folder must be inside src/routes. If you create it at the wrong level, SvelteKit won’t recognize it as a route.

Typo in Filename

src/routes/services/
└── +Page.svelte             ← Wrong! Case matters

The file must be named exactly +page.svelte (lowercase). SvelteKit is case-sensitive about these special files.

Summary

Creating a new page in SvelteKit takes two steps: create a folder with the route name, add +page.svelte inside it. Your services page is now live at /services.

Key takeaways:

Route folders go inside src/routes
+page.svelte must be lowercase and exact
You can include a <script> block for component logic

Next Steps

Static pages are great, but BookIt needs something more powerful: individual pages for each service. Continue with Dynamic Routes to learn how one route definition can handle hundreds of different URLs.