client

client/src/routes/_layout.svelte

@@ -0,0 +1,31 @@
+<script>
+  // import 'bootstrap/dist/css/bootstrap.min.css'
+  import { onMount } from 'svelte'
+
+  import { refresh } from '../api'
+
+  onMount(() => {
+    refresh()
+    console.log('mounted')
+  })
+</script>
+
+<style>
+  * {
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  main {
+    position: relative;
+    max-width: 45em;
+    width: 100%;
+    padding: 1em;
+    margin: 0 auto;
+  }
+</style>
+
+<main>
+  <slot />
+</main>

client/src/routes/index.svelte

@@ -0,0 +1,20 @@
+<script>
+  import Add from '../components/Add.svelte'
+  import List from '../components/List.svelte'
+</script>
+
+<style>
+
+</style>
+
+<svelte:head>
+  <title>Todos</title>
+</svelte:head>
+
+<h1>Todos</h1>
+
+<br />
+<Add />
+
+<br />
+<List />

client/src/routes/todo/[id].svelte

@@ -0,0 +1,18 @@
+<script context="module">
+  export async function preload(page, session) {
+    return page.params
+  }
+</script>
+
+<script>
+  import Todo from '../../components/Todo.svelte'
+  import { todos } from '../../api'
+
+  export let id
+
+  $: todo = $todos.find(todo => todo._id === id)
+</script>
+
+{#if todo}
+  <Todo {todo} />
+{/if}