Construye el Núcleo de BookIt

Toda aplicación de reservas necesita un lugar para explorar lo que está disponible. En esta lección, crearás la página de servicios — el corazón de BookIt donde los clientes descubren qué pueden reservar.

Lo Que Aprenderás

Crear una nueva ruta agregando una carpeta y +page.svelte
Construir una página de listado de servicios simple
Verificar que tu ruta funcione en el navegador

El Problema

BookIt actualmente solo tiene una página de inicio. Los clientes necesitan una página dedicada para explorar todos los servicios disponibles — corte de césped, poda de setos, consultas y más. Necesitamos una ruta /services.

Crear la Ruta de Servicios

Crear una nueva página en SvelteKit es sencillo: crea una carpeta, agrega +page.svelte.

Paso 1: Crear la Carpeta

Dentro de tu directorio src/routes, crea una nueva carpeta llamada services:

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

Paso 2: Agregar el Archivo de Página

Dentro de la carpeta services, crea +page.svelte:

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

Eso es todo. Has creado una ruta.

Paso 3: Ver en el Navegador

Con tu servidor de desarrollo en ejecución (npm run dev), abre tu navegador en:

http://localhost:5173/services

Deberías ver "Our Services" mostrado en la página.

Agregar Listados de Servicios

Una página que solo dice "Our Services" no es muy útil. Vamos a agregar algunos servicios reales. Por ahora, los codificaremos directamente en el componente — módulos posteriores te enseñarán cómo cargar estos datos desde un servidor.

<!-- 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>

El bloque {#each} recorre el arreglo de servicios y renderiza cada uno. No te preocupes por entender cada detalle todavía — cubriremos el flujo de control a fondo en el Módulo 5.

Lo Que Has Construido

Recarga tu navegador en /services. Ahora deberías ver:

Un encabezado "Our Services"
Una lista de tres servicios
Cada servicio mostrando nombre, descripción, precio y duración

Todavía no tiene estilos (eso viene después), pero la funcionalidad está ahí.

La Estructura de Tu Proyecto

Tu carpeta de rutas ahora debería verse así:

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

Errores Comunes

Ubicación Incorrecta de la Carpeta

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

La carpeta services debe estar dentro de src/routes. Si la creas en el nivel equivocado, SvelteKit no la reconocerá como una ruta.

Error Tipográfico en el Nombre de Archivo

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

El archivo debe llamarse exactamente +page.svelte (en minúsculas). SvelteKit distingue entre mayúsculas y minúsculas para estos archivos especiales.

Resumen

Crear una nueva página en SvelteKit requiere dos pasos: crear una carpeta con el nombre de la ruta, agregar +page.svelte dentro de ella. Tu página de servicios ahora está activa en /services.

Puntos clave:

Las carpetas de rutas van dentro de src/routes
+page.svelte debe estar en minúsculas y ser exacto
Puedes incluir un bloque <script> para la lógica del componente

Próximos Pasos

Las páginas estáticas son excelentes, pero BookIt necesita algo más poderoso: páginas individuales para cada servicio. Continúa con Rutas Dinámicas para aprender cómo una definición de ruta puede manejar cientos de URLs diferentes.