SvelteKit, PouchDB, CouchDB Todos

A simple todos app using SvelteKit, PouchDB, CouchDB and Tailwind CSS. Data is stored in browser IndexedDB with PouchDB and syncs with a remote CouchDB database.

Features

• Add todos
  • By pressing the Add button
  • By pressing Enter key while the caret is in todo item input field
  • Won't add todo item if the todo item input field is empty
  • Keeps caret focus in add todo input field for quick succession of adding todo items
• Update todos
  • Update todo item on blur or by pressing Enter key
• Delete todos
  • By pressing X (delete) button
  • By having an empty todo item input field on blur or by pressing Enter key
• Reactive data
• Beautiful UI

TODO

• Update to new SvelteKit routing
• Add ability to hide and show completed todos
• Add pending todos count
• Move completed todos to the bottom of the TodosList, move them back if the user marks it back to incomplete
• Add completed date when todo is marked complete, remove the completed date if the user marks it back to incomplete
• Show the completed date somehow
• Add user authentication using CouchDB
• When added, todos are attached to a user id
• Only allow users to view their own todos
• Ability to add description to a todo
• Ability to add tags to a todo

Give it a whirl

Once you've cloned or downloaded the project, install dependencies with npm install (or pnpm install or yarn), then start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.