Home /Tracks /Build BookIt

Build BookIt

Tracks8 topics48 articles
Getting Started with SvelteKit

BookIt project running locally with custom homepage.

6 articles
  1. 00 What is Svelte?
    8 min
  2. 00 Create the BookIt Project
    10 min
  3. 00 Explore the Project Structure
    12 min
  4. 00 Understanding .svelte Files
    10 min
  5. 00 Run Your First Dev Server
    8 min
  6. 00 Make Your First Change
    10 min
Basic Routing

Navigate between Home → Services → Service Detail → About → Contact.

6 articles
  1. 00 How File-Based Routing Works
    8 min
  2. 00 Create the About Page
    6 min
  3. 00 Add a Contact Page
    8 min
  4. 00 Create the Services Page
    10 min
  5. 00 Dynamic Routes
    12 min
  6. 00 Link All Pages Together
    10 min
Layouts

All pages share header/footer, services section has sub-navigation

6 articles
  1. 00 The Problem: Repeating Code
    6 min
  2. 00 SvelteKit Layout
    10 min
  3. 00 Understanding {@render children()}
    8 min
  4. 00 Add a Site Header
    10 min
  5. 00 Add a Site Footer
    8 min
  6. 00 Nested Layouts
    10 min
Reactivity Basics

Booking form that shows live preview of entered data

6 articles
  1. 00 Static vs Reactive
    10 min
  2. 00 Create a Booking Form Component
    10 min
  3. 00 Track Form Fields with $state
    10 min
  4. 00 Display Live Form Preview
    10 min
  5. 00 Handle the Submit Button
    10 min
  6. 00 Reset Form After "Submission"
    8 min
Control Flow

Services page displays categorized list with proper empty states.

6 articles
  1. 00 Introduction to Control Flow in Svelte
    8 min
  2. 00 Conditional Rendering with {#if}, {:else}, and {:else if}
    14 min
  3. 00 Handle Empty States
    10 min
  4. 00 Render Service List with `{#each}`
    12 min
  5. 00 Why Keys Matter
    10 min
  6. 00 Filter Services by Category
    12 min
Data Binding

Fully functional booking form with all fields bound to state

6 articles
  1. 00 Two-Way Binding with bind:value
    10 min
  2. 00 Customer Name and Email Fields
    10 min
  3. 00 Date Picker Input
    10 min
  4. 00 Time Selection Dropdown
    10 min
  5. 00 Service Selection with bind:group
    12 min
  6. 00 Add Optional Notes Textarea
    8 min
Component Communication

Clean component architecture with ServiceCard, BookingForm, PriceBadge

6 articles
  1. 00 Why Components?
    8 min
  2. 00 Create ServiceCard Component
    10 min
  3. 00 Pass Service Data with $props
    12 min
  4. 00 Create BookingForm Component
    12 min
  5. 00 Create PriceBadge Component
    10 min
  6. 00 Spread Props
    10 min
Styling

Polished, professional-looking booking app.

6 articles
  1. 00 How Scoped Styles Work
    10 min
  2. 00 Style the ServiceCard
    12 min
  3. 00 Dynamic Classes
    10 min
  4. 00 Style the Booking Form
    14 min
  5. 00 Add Hover States
    10 min
  6. 00 Global Styles
    12 min

The Hackpile © 2026