Building a To-Do List with Workers and KV


In this tutorial, we’ll build a todo list application in HTML, CSS and JavaScript, with a twist: all the data should be stored inside of the newly-launched Workers KV, and the application itself should be served directly from Cloudflare’s edge network, using Cloudflare Workers.
To start, let’s break this project down into a couple different discrete steps. In particular, it can help to focus on the constraint of working with Workers KV, as handling data is generally the most complex part of building an application:
- Build a todos data structure
- Write the todos into Workers KV
- Retrieve the todos from Workers KV
- Return an HTML page to the client, including the todos (if they exist)
- Allow creation of new todos in the UI
- Allow completion of todos in the UI
- Handle todo updates
This task order is pretty convenient, because it’s almost perfectly split into two parts: first, understanding the Cloudflare/API-level things we need to know about Workers and KV, and second, actually building up a user interface to work with the data.
Understanding Workers
In terms of implementation, a great deal of this project is centered around KV - although that may be the case, it’s useful to break Continue reading