Getting Started with Todo App

The Todo App is a lightweight personal task management application for FlowState. This guide walks you through accessing the app and creating your first todo.

Prerequisites

Before using the Todo App, ensure you have:

• Access to a running FlowState instance (web or desktop)
• A FlowState account (email or phone authentication)
• A modern web browser (Chrome, Firefox, Safari, or Edge)

Accessing the Todo App

From FlowState Launcher

1. Open the FlowState application
2. Navigate to the Launcher (home screen)
3. Find and click the Tasks app (check-square icon with blue accent)

Direct URL Access

If running locally in development mode, access the app directly at:

http://localhost:3211/todo

In production, the app is available at:

https://your-flowstate-domain.com/todo

Authentication

The Todo App requires authentication to protect your personal tasks.

First-Time Sign In

1. When you first access the app, you'll see an "Authentication Required" message
2. Click the Sign In button
3. Enter your email or phone number
4. Complete the authentication process
5. You'll be redirected back to the Todo App

Authenticated View

Once signed in, you'll see:

• Your email or phone displayed in the header
• Access to all todo management features
• Your personal todo list (isolated from other users)

App Navigation

The Todo App has a simple, focused navigation structure:

Sidebar

The left sidebar provides quick navigation:

• All Todos - View your complete todo list
• New Todo - Create a new todo item

Header

The top header displays:

• App title ("Tasks")
• Quick "New Todo" action button
• Your authentication status (email/phone when signed in)

Creating Your First Todo

Follow these steps to create your first todo:

Step 1: Navigate to New Todo

Click either:

• The "New Todo" link in the sidebar, or
• The "New Todo" button in the header

Step 2: Fill in Todo Details

On the New Todo page, enter:

1. Title (required) - A brief description of the task
2. Description (optional) - Additional details about the task
3. Priority - Choose from:
   • Low (default)
   • Medium
   • High
4. Due Date (optional) - When the task should be completed

Step 3: Save the Todo

Click Save to create your todo. You'll be redirected to the todo list where your new todo appears.

Viewing Your Todos

Navigate to "All Todos" to see your complete task list.

Todo List Features

The todo list displays:

• Todo title
• Priority indicator (color-coded)
• Due date (if set)
• Completion status

Filtering and Sorting

Currently available views:

• All Todos - Complete list of all your tasks
• Future enhancements will include filtering by status and sorting options

Completing a Todo

To mark a todo as complete:

1. Navigate to All Todos
2. Click on the todo you want to complete
3. On the detail page, toggle the completion status
4. The todo will update to show as completed

Next Steps

Now that you're set up with the Todo App:

• Review Features & Capabilities for detailed feature documentation
• Follow the Creating a Todo workflow for step-by-step instructions
• Check Troubleshooting if you encounter issues
• See FAQ for answers to common questions

Key Concepts

Local-First Data

The Todo App uses RxDB for local-first data storage. This means:

• Your todos are stored locally for fast access
• The app works offline
• Data syncs when online (when replication is enabled)

User Isolation

Each user has their own private todo list:

• Only you can see your todos
• Authentication ensures data privacy
• No sharing features (by design - for personal productivity)

Priority Levels

Todos support three priority levels:

Quick Reference