Building the Kanban Page Structure in Svelte

Welcome to our first lesson on building a Kanban board application with Svelte 5! In this course, you'll learn how to create a fully functional task management system from scratch. A Kanban board is a visual tool that helps you track work progress across different stages - typically "To Do," "In Progress," and "Done."

Svelte 5 is the perfect framework for this project because of its simplicity and powerful reactivity system. Whether you're new to Svelte or web development in general, this course will guide you step-by-step through building a modern web application with clean, maintainable code.

This course will guide you through building a complete Kanban board application using Svelte 5. Before diving into code, let's explore how our application will be structured and the journey we'll take to build it.

Our application follows a component-based architecture that separates concerns and promotes reusability. The file structure reflects this approach:

/src
├── app.html                     # Main HTML template for the app
├── components/                  # Reusable UI components
│   ├── Board.svelte             # Main kanban board container
│   ├── Column.svelte            # Individual column (To Do, In Progress, Done)
│   ├── TaskCard.svelte          # Individual task card component
│   └── TaskForm.svelte          # Form for adding new tasks
├── lib/                         # Shared logic and utilities
│   └── taskStore.svelte.js      # State management for tasks
└── routes/                      # SvelteKit routing system
    └── +page.svelte             # The main page we're building today

• app.html: The main HTML template where our Svelte app gets mounted
• components/: Contains all reusable UI pieces
  • Board.svelte: Manages the layout of columns and facilitates drag-and-drop
  • Column.svelte: Displays a list of tasks for a specific status
  • TaskCard.svelte: Shows task information with interactions like expand/collapse
  • TaskForm.svelte: Handles task creation with validation
• lib/taskStore.svelte.js: Central place for managing task data using Svelte's runes
• routes/+page.svelte: Today's focus - the entry point for our application

Throughout this series, we'll follow the natural progression of application development:

1. Core UI Layer: Building the basic user interface components and layout
2. State Management Layer: Adding data models and reactive state handling
3. Interaction Layer: Implementing user interactions and event handling
4. Persistence Layer: Adding data persistence and synchronization
5. Enhancement Layer: Polishing with animations, accessibility, and advanced features

This layered approach mirrors how real-world applications are developed, starting from the visual elements and gradually adding functionality while maintaining separation of concerns.

This kanban board will help you visualize your work with columns like "To Do," "In Progress," and "Done." We're using Svelte 5 because it simplifies building interactive interfaces with its new reactivity system using runes. Unlike previous versions, we won't need complex store setups or the $: syntax — everything will be more straightforward.

By the end of this first lesson, you'll have created the foundation of our application: the main page structure. This will serve as the container where we'll later add our kanban board components. The skills you learn here will apply to every Svelte component you build going forward.

In SvelteKit, every route has a +page.svelte file that serves as its entry point. For our kanban board, we'll start with the root route. Here's what the basic structure looks like:

<script>
  // JavaScript logic will go here
</script>

<!-- HTML template goes here -->

<style>
  /* Component-scoped CSS */
</style>

This three-part structure is fundamental to Svelte components. The <script> tag contains our component's logic, the HTML template defines what renders to the screen, and the <style> section contains CSS that only applies to this component. We'll explore each part as we build our page.

Let's implement our kanban board's main page. We'll create a centered container with a heading that clearly identifies our application:

<script>
  // We'll add logic here in future lessons
</script>

<div class="container">
  <h1>📝 My Kanban Board</h1>
  <!-- Board component will go here in the next lesson -->
</div>

<style>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }

  h1 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #2d3748;
  }
</style>

The container div uses CSS to center itself on the page with margin: 0 auto and limits its width to 1200px for better readability on large screens. The heading includes an emoji for visual appeal and uses semantic HTML (h1) for accessibility. Notice how the styles are scoped to this component — they won't affect other parts of your application.

A few important Svelte 5 features to note in our code:

1. Scoped Styles: The CSS in the <style> block only applies to this component. If you use h1 in another component, it won't inherit these styles unless you explicitly make them global.

2. Modern Reactivity: While we're not using reactivity yet, remember that in Svelte 5 we'll use runes like $state. For example, later we might use:

   <script>
     let count = $state(0);
   </script>
   
   <button onclick={() => count++}>
     Clicks: {count}
   </button>

3. Clean Template Syntax: Notice how we can use regular HTML attributes like class instead of className (as in React) — Svelte keeps templates simple and familiar.

You've now created the foundation of our kanban board! In your practice exercises, you'll:

• Recreate this page structure
• Experiment with different styling approaches
• Prepare for adding the Board component

In our next lesson, we'll build the Board component that will live inside the container we created today. This is where the real kanban functionality will begin to take shape as we add columns for different task states. The clean structure you've built today will make that expansion smooth and organized.