Svelte Demo Todo Walkthrough

#javascript #beginners #webdev

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:

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

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

Install the dependencies by running the following command:

cd demo-todo-with-svelte
npm install

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:

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

Start the development server by running the following command:

npm run dev

Open your web browser and go to http://localhost:3000 to see the todo application frontend.
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.
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.
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]');

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

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);
}

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:

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.