Building Your First SvelteKit App

In this tutorial, we'll build a complete SvelteKit application from scratch. You'll learn how to build modern web apps.

Prerequisites

• Node.js 18+ installed
• Basic JavaScript knowledge
• A coding AI tool (optional but helpful)

Project Overview

We'll build a Task Manager with these features:

• Add, edit, delete tasks
• Mark tasks complete
• Filter by status
• Persist to local storage

Step 1: Project Setup

Ask your AI:

Create a new SvelteKit project with TypeScript and TailwindCSS v4.
Include the project structure and initial configuration.

Run the commands the AI suggests:

npm create svelte@latest task-manager
cd task-manager
npm install
npm install -D tailwindcss @tailwindcss/vite

Step 2: Define Your Types

Create src/lib/types/task.ts:

export interface Task {
  id: string;
  title: string;
  completed: boolean;
  createdAt: Date;
}

export type FilterType = 'all' | 'active' | 'completed';

Step 3: Build the Task Store

Create src/lib/stores/tasks.ts:

<script lang="ts">
  import { writable } from 'svelte/store';
  import type { Task, FilterType } from '$lib/types';

  function createTaskStore() {
    const stored = localStorage.getItem('tasks');
    const initial: Task[] = stored ? JSON.parse(stored) : [];

    const { subscribe, set, update } = writable<Task[]>(initial);

    function persist(tasks: Task[]) {
      localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    return {
      subscribe,
      add: (title: string) => update(tasks => {
        const newTask: Task = {
          id: crypto.randomUUID(),
          title,
          completed: false,
          createdAt: new Date()
        };
        const updated = [...tasks, newTask];
        persist(updated);
        return updated;
      }),
      toggle: (id: string) => update(tasks => {
        const updated = tasks.map(t =>
          t.id === id ? { ...t, completed: !t.completed } : t
        );
        persist(updated);
        return updated;
      }),
      remove: (id: string) => update(tasks => {
        const updated = tasks.filter(t => t.id !== id);
        persist(updated);
        return updated;
      })
    };
  }

  export const tasks = createTaskStore();
  export const filter = writable<FilterType>('all');
</script>

Step 4: Create Components

TaskInput.svelte

Create an input component with a text field and add button using TailwindCSS.

TaskItem.svelte

Create a task item component showing title, checkbox, and delete button.

TaskList.svelte

Create a task list component that filters tasks by the selected filter.

Step 5: Build the Main Page

Your +page.svelte should combine all components:

<script lang="ts">
  import TaskInput from '$lib/components/TaskInput.svelte';
  import TaskList from '$lib/components/TaskList.svelte';
  import FilterBar from '$lib/components/FilterBar.svelte';
</script>

<main class="max-w-md mx-auto p-4">
  <h1 class="text-2xl font-bold mb-4">Task Manager</h1>
  <TaskInput />
  <FilterBar />
  <TaskList />
</main>

Step 6: Test and Refine

1. Add a task
2. Complete a task
3. Delete a task
4. Test the filter
5. Refresh the page—data should persist

Key Takeaways

• Break down the work: Build one component at a time
• Review everything: Understand every line of code
• Test incrementally: Build and test as you go
• Iterate: Refine your code if it isn't what you want

Next Steps

Extend this app with:

• Due dates for tasks
• Task categories/tags
• Dark mode toggle
• Export/import functionality

Remember: Good planning makes building easier. Plan carefully, write clean code, and always review your work.