Svelte Demo Todo Walkthrough
Tags: javascript, beginners, webdev
Published: 2023-05-19 01:26:42

---
title: Svelte Demo Todo Walkthrough
published: true
description: A simple todo app built with Appwrite and Svelte
tags: javascript, beginner, webdev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-02 17:40 +0000
---

The first step is to create an account on Appwrite, which is a self-hosted backend-as-a-service (BaaS) platform that provides a wide range of features, including user authentication, database management, storage, and more.

Once you have created an account, you can follow these steps to create a todo application backend with SvelteKit and Appwrite:

1. Clone the demo-todo-with-svelte repository by running the following command in your terminal:

```bash
git clone https://github.com/appwrite/demo-todo-with-svelte.git
```

2. Install the dependencies by running the following command:

```bash
cd demo-todo-with-svelte
npm install
```

3. Open the `.env` file and update the `VITE_APP_APPWRITE_ENDPOINT` and `VITE_APP_APPWRITE_PROJECT` variables with the endpoint and project ID of your Appwrite installation:

```less
VITE_APP_APPWRITE_ENDPOINT=https://localhost/v1
VITE_APP_APPWRITE_PROJECT=[YOUR_APPWRITE_PROJECT_ID]
```

4. Start the development server by running the following command:

```bash
npm run dev
```

5. Open your web browser and go to <http://localhost:3000> to see the todo application frontend.
6. To create the backend, you need to first create a new collection in Appwrite. Go to the Appwrite dashboard and click on "Database" in the sidebar. Then click on "Add Collection" and enter "todos" as the collection name.
7. Add three fields to the collection: "title" (string), "completed" (boolean), and "createdAt" (datetime). You can do this by clicking on the "Add Field" button and entering the field name and type.
8. In the SvelteKit application code, open the `src/lib/appwrite.ts` file and update the `appwrite` object with your Appwrite project ID and API key:

```
javascript
const appwrite = new Appwrite();
appwrite.setEndpoint('https://localhost/v1')
    .setProject('[YOUR_APPWRITE_PROJECT_ID]')
    .setKey('[YOUR_APPWRITE_API_KEY]');
```

9. Next, open the `src/lib/todos.ts` file and add the following functions to interact with the Appwrite API:

```typescript
import { appwrite } from './appwrite';

export interface Todo {
    $id: string;
    title: string;
    completed: boolean;
    createdAt: number;
}

export async function getTodos(): Promise<Todo[]> {
    const response = await appwrite.database.listDocuments('todos');
    return response.documents as Todo[];
}

export async function createTodo(todo: Pick<Todo, 'title'>): Promise<Todo> {
    const response = await appwrite.database.createDocument('todos', {
        title: todo.title,
        completed: false,
        createdAt: Date.now(),
    });
    return {
        ...response,
        $id: response.$id,
        title: todo.title,
        completed: false,
        createdAt: Date.now(),
    } as Todo;
}

export async function updateTodo(todo: Todo): Promise<Todo> {
    const response = await appwrite.database.updateDocument('todos', todo.$id, {
        title: todo.title,
        completed: todo.completed,
        createdAt: todo.createdAt,
    });
    return {
        ...response,
        $id: response.$id,
        title: todo.title,
        completed: todo.completed,
        createdAt: todo.createdAt,
    } as Todo;
}

export async function deleteTodo(id: string): Promise<void> {
    await appwrite.database.deleteDocument('todos', id);
}
```

10. Finally, open the `src/routes/api/todos.ts` file and add the following code to create the API endpoints that will communicate with the Appwrite API:

```typescript
Copy code
import type { Request } from '@sveltejs/kit';
import { createTodo, deleteTodo, getTodos, Todo, updateTodo } from '$lib/todos';

export async function get(request: Request) {
    const todos = await getTodos();
    return {
        body: todos,
    };
}

export async function post(request: Request) {
    const { title } = request.body as Pick<Todo, 'title'>;
    const todo = await createTodo({
        title,
    });
    return {
        body: todo,
    };
}

export async function put(request: Request) {
    const todo = request.body as Todo;
    const updatedTodo = await updateTodo(todo);
    return {
        body: updatedTodo,
    };
}

export async function del(request: Request) {
    const { id } = request.params;
    await deleteTodo(id);
    return {
        body: {},
    };
}
```

Save the changes and restart the development server by running npm run dev again.

Open the todo application frontend in your web browser and create some todos. You should see them appear in the Appwrite dashboard under the "todos" collection.

Congratulations, you have now created a todo application backend with SvelteKit and Appwrite! You can now use the Appwrite API to perform advanced operations such as user authentication, file storage, and more.