Creating a Todo

This guide provides a complete, step-by-step workflow for creating and managing todo items in the Todo App.

Overview

You will create a new todo item with a title, priority, and optional due date. By the end of this workflow, you'll have a todo in your list ready to track.

Time Required: 1-2 minutes Skill Level: Beginner

Prerequisites

Before starting, ensure you have:

• Access to the FlowState application
• A FlowState account (signed in)
• The Todo App open (navigate to /todo)

Steps

Step 1: Navigate to New Todo

From the Todo App, access the new todo form:

Option A: Use the Sidebar

1. Look at the left sidebar
2. Click New Todo

Option B: Use the Header Button

1. Look at the top header bar
2. Click the New Todo button

Option C: Direct URL

Navigate directly to:

/todo/new

The New Todo page displays a form for entering your todo details.

Step 2: Enter Todo Title

The title is the only required field.

1. Click the Title input field
2. Enter a brief, descriptive title for your task
3. Keep it concise but clear

Good title examples:

Avoid:

Step 3: Add Description (Optional)

If your todo needs more context:

1. Click the Description field
2. Enter additional details, notes, or context
3. Use this for information you'll need when working on the task

Examples:

Title: Buy groceries
Description: Milk, eggs, bread, and vegetables for the week. Check if we need cleaning supplies.

Title: Review Q4 budget report
Description: Focus on marketing spend vs ROI. Prepare 3 key takeaways for Monday meeting.

Step 4: Set Priority

Choose a priority level that reflects the task's urgency:

1. Locate the Priority selector
2. Choose one of:
   • Low - Nice-to-have, can wait
   • Medium - Should do soon
   • High - Urgent, do first

Priority guidelines:

Step 5: Set Due Date (Optional)

If your todo has a deadline:

1. Click the Due Date field
2. Select a date from the date picker
3. The date will display in your local format

Tips:

• Only set due dates for tasks with actual deadlines
• For flexible tasks, leave the due date empty
• Due dates help with prioritization and planning

Step 6: Save the Todo

Once you've entered all details:

1. Review your entries
2. Click the Save button
3. Wait for confirmation

What happens:

• The todo is saved to your local database
• If online, it syncs to the server
• You're redirected to the todo list

Step 7: Verify in Todo List

After saving:

1. You'll be taken to the todo list
2. Find your new todo in the list
3. Verify the title, priority, and due date are correct

Expected Results

After completing this workflow:

• A new todo item appears in your list
• The todo has your specified title, priority, and due date
• The todo is marked as incomplete (not completed)
• The todo is associated with your user account

Working with Your Todo

Viewing Details

Click on any todo to view its full details:

• Complete title and description
• Priority level
• Due date
• Completion status
• Creation date

Marking Complete

When you finish a task:

1. Click on the todo
2. Toggle the completion checkbox
3. The todo updates to show completed status

Editing a Todo

To modify an existing todo:

1. Click on the todo to open details
2. Edit any field (title, description, priority, due date)
3. Save your changes

Deleting a Todo

To remove a todo permanently:

1. Click on the todo to open details
2. Find the delete action
3. Confirm deletion

Note: Deletion is permanent and cannot be undone.

Workflow Diagram

┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│  Navigate   │────▶│  Enter Todo  │────▶│   Choose    │
│  to /new    │     │    Title     │     │  Priority   │
└─────────────┘     └──────────────┘     └─────────────┘
                                                │
                                                ▼
┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│  Verify in  │◀────│    Save      │◀────│  Set Due    │
│    List     │     │    Todo      │     │   Date      │
└─────────────┘     └──────────────┘     └─────────────┘

Quick Reference

Troubleshooting

Save Button Not Working

• Ensure you've entered a title (required field)
• Check that you're signed in
• Try refreshing the page

Todo Not Appearing in List

• Wait a moment for sync to complete
• Refresh the todo list
• Check browser console for errors

Due Date Shows Wrong Date

• Verify you selected the correct date
• Check your system timezone settings
• Try clearing and re-selecting the date

See Troubleshooting for more solutions.

Tips for Effective Todos

Be Specific

Instead of vague tasks, write specific actions:

Use Priority Wisely

Don't mark everything as high priority:

• High: 1-3 truly urgent items
• Medium: Your main work for the day
• Low: Backlog items when you have time

Set Realistic Due Dates

• Don't set arbitrary deadlines
• Leave buffer time for unexpected delays
• Review and adjust dates as needed

Keep Descriptions Actionable

Include information you'll need:

• Relevant links or references
• Key details or requirements
• Context that helps future-you

Related Documentation

• Getting Started - Initial setup guide
• Features & Capabilities - Detailed feature documentation
• FAQ - Frequently asked questions
• Troubleshooting - Common issues and solutions