Briefing

Creating my first Svelte application by following James Q Quick's todo list tutorial. This should cover Svelte, Sveltekit, Supabase and will result in a todo list app that allows for users to log in and access their stored tasks.

• Build an App with SvelteKit and Tailwind CSS
• SvelteKit and Supabase Tutorial with Authentication - Build a SvelteKit App Part 2

Production version of site hosted on Vercel

Tech stack

• Svelte
• Typescript
• Supabase

Tweaks

• Using pnpm instead of npm.
• Using Typescript instead of vanilla JS

Version change observations

__layout.svelte is now +layout.svelte.

Todos

Features & upgrades

• Add local storage or database with authentication.
• Load the data upon each page load.
• Add dates to tasks
• Auto-focus on sign-in and task input forms upon DOM load.
• Make pages responsive (good looking on mobile too)
• Option to update text
• Option to update date
• Modularize the update components of todoStore.ts
• Add completed tasks at the bottom of the list
• Add new tasks at the top of the list
• Option to sort by date
• Filter by to do, completed, all
• Improve CSS styling.
• Study TailwindCSS basics and how to organize messy classes.
• Improve pop-out for login
• Pop-out per task with description and comments which can be edited by user.

Bugs

• Make Supabase magic sign-in link work for the public Vercel hosted version
• Investigate (and ideally fix) Typescript errors in Svelte and JS files.

Testing

• Test on mobile and different browsers.