Three Prompts: Todo Test

Introduction

In this article, we'll explore the development of a feature-rich todo application using React 19 and IndexedDB. This project demonstrates modern web development practices by implementing project management, file attachments, and persistent client-side storage. Through three focused development prompts, we'll see how the application evolved from a basic concept to a polished, production-ready tool.

The Three Prompts

Here are the exact prompts that were used to create this project:

projects/todo-test


is a vite react app that was just created. No custom code has been written yet.

You have limited tool calls, don't waste them. So use them ONLY as needed.

1. Check the directory structure
2. Check the package.json
3. Create the indexed db data structure (keep it really simple)
4. Update the readme with a plan for the todo app
5. Create the create project flow (super simple)
...



Required Features
- Projects (name, and list of todos)
- Todo Crud w/ Forms as needed
- File upload (save as base64)
- Storage using IndexedDB (everything should be saved in IndexedDB, and loaded on refresh)

Basic UI Structure
- Drawer on left to manage projects and creating/listing todos
- View selected project or todo in middle of the screen
- super simple editor in the middle of the screen when editing the todo
- File upload can be done through a button click (nothing special)

Now update App.jsx to render the new UI and continue. Stop once finished with all the tasks

All the logic is working great. Don't make any breaking changes.


Update the full page UI to take up the full amount of space.
Update the buttons and icons to be more legit.
Update the inputs to not have a black background.

Use blue where needed to replace existing colors, keep the main white background for most things though.

Keep it simple but enhance the UI. Don't break anything!

This should be mainly css changes.



There is 1 bug that needs to be fixed. When clicking on another todo in the list under a project. The form does not update to show the selected todo. It kust stays on the current todo right now. Make sure editing the todos still works after fixing the bug.

Technical Implementation

Data Layer with IndexedDB

The application uses IndexedDB for robust client-side storage, with separate object stores for projects and todos:

const STORES = {
  PROJECTS: 'projects', // Stores project metadata
  TODOS: 'todos', // Stores todos with attachments
}

This structure enables efficient querying and maintains data relationships through foreign keys.

State Management

The app leverages React's Context API for global state management, providing a clean interface for:

• Managing projects and todos
• Handling selection state
• Coordinating data persistence

The context provides methods like createTodo and updateProject that handle both state updates and IndexedDB persistence automatically.

File Attachment System

One of the standout features is the file attachment system:

const handleFileUpload = (e) => {
  const file = e.target.files[0]
  const reader = new FileReader()
  reader.onload = (event) => {
    const newAttachment = {
      id: Date.now(),
      name: file.name,
      type: file.type,
      data: event.target.result, // Base64 encoded
    }
    // Auto-save when file is added
    updateTodo({ ...todo, attachments: [...attachments, newAttachment] })
  }
  reader.readAsDataURL(file)
}

This implementation supports:

• Multiple attachments per todo
• Automatic image previews
• Efficient storage in IndexedDB
• Auto-saving on file upload/removal

UI Design and Bug Fixes

The UI was enhanced through several iterations:

1. Full viewport layout using CSS flexbox
2. Blue color scheme for interactive elements
3. Improved input styling with white backgrounds
4. Fixed todo selection bug using useEffect:

useEffect(() => {
  setTitle(todo.title)
  setDescription(todo.description || '')
  setCompleted(todo.completed)
  setAttachments(todo.attachments || [])
}, [todo])

Key Features

1. Project Management

   • Create, view, update, and delete projects
   • Projects contain lists of todos
   • Project selection in drawer

2. Todo Management

   • CRUD operations for todos within projects
   • Todo completion status
   • Description field for detailed notes
   • Auto-save on changes

3. File Attachments

   • Upload and store files as base64
   • Image preview for image files
   • Multiple attachments per todo
   • Auto-save on file upload/removal

4. Persistent Storage

   • IndexedDB for data persistence
   • Separate stores for projects and todos
   • Automatic data loading on refresh
   • Cascading deletes (todos deleted with project)

Conclusion

This todo application showcases how modern web technologies can be combined to create a powerful, user-friendly productivity tool. Through the three-prompts development process, we've built a feature-rich application that demonstrates:

• Structured data management with IndexedDB
• Clean React component architecture
• Efficient file handling in the browser
• Modern UI/UX design principles

The project serves as an excellent example of incremental development, where each prompt built upon the previous work to create a polished, production-ready application.