Day 14: Final Project - Note Taker

Welcome to Day 14. You made it.

Today, we build “Svelte Notes”.

Requirements

1. Sidebar: List of all notes (loaded from server).
2. Main Area: Editor for the selected note.
3. Runes: Use $state for local UI state.
4. Actions: Save, Delete, Create.

Architecture

• src/routes/+layout.server.ts: Load all notes (for sidebar).
• src/routes/note/[id]/+page.svelte: The editor.
• src/routes/note/[id]/+page.server.ts: Parse id and Handle actions (save, delete).

Implementation Snippets

Sidebar Layout (+layout.svelte)

<script>
  let { data, children } = $props();
</script>

<div class="app">
  <aside>
    {#each data.notes as note}
      <a href="/note/{note.id}">{note.title}</a>
    {/each}
  </aside>
  <main>
    {@render children()}
  </main>
</div>

Editor (+page.svelte)

<script>
  let { data, form } = $props();
  // We can use a rune to track edits locally before saving!
  let content = $state(data.note.content);
</script>

{#if form?.success}
  <p class="toast">Saved!</p>
{/if}

<form method="POST" action="?/save" use:enhance>
  <input name="title" value={data.note.title} />
  <textarea name="content" bind:value={content}></textarea>
  <button>Save</button>
  <button formaction="?/delete">Delete</button>
</form>

Conclusion

You have learned:

• Runes: $state, $derived, $effect.
• Syntax: Snippets, Attributes.
• SvelteKit: Routing, Loaders, Actions.

You are now a Svelte 5 developer. Go build something amazing.