Building the Kanban Page Structure in Svelte

Welcome To Svelte & Kanban

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.

Project Overview: Understanding Our Target Structure

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

What Each File Does

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

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Svelte

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

<!-- HTML template goes here -->

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

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

<!-- HTML template goes here -->

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

Svelte

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

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

Svelte

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicks: {count}
</button>

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicks: {count}
</button>

Svelte

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

<!-- HTML template goes here -->

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

Svelte

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

Svelte

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicks: {count}
</button>

Welcome To Svelte & Kanban

Project Overview: Understanding Our Target Structure

What Each File Does

Join the 1M+ learners on CodeSignal

Our Building Path

Let's build a task management board using Svelte.

Your First Sveltekit Page

Coding The Layout

Svelte-specific Tips

Next Steps