tiny-todo/README.md

Todo List Application

A modern, feature-rich todo list application built with Express.js and vanilla JavaScript. This application provides a clean interface for managing your daily tasks with persistent storage and an intuitive drag-and-drop reordering system.

Built with AI Assistants: This entire application was developed as an experiment to test the capabilities of locally hosted LLMs running on consumer-grade hardware. Using agentic coding techniques, every line of code was generated through iterative agent interactions without any cloud-based APIs or external AI services. This demonstrates what's possible with AI-assisted software development workflows running entirely on personal machines.

Features

Core Functionality

• Create Todos: Add new tasks with a simple input field
• View Todos: See all your tasks in a clean, organized list
• Edit Todos: Click on any todo text to edit it inline
• Complete Tasks: Check off items as you finish them
• Delete Todos: Remove completed or unwanted tasks
• Drag & Drop Reordering: Reorganize your tasks by dragging and dropping them into your preferred order

User Experience

• Dark/Light Mode Toggle: Switch between dark and light themes with a single click
• Customizable Title: Click on the "Todo List" title to rename it
• Visual Indicators: Clear visual feedback when dragging items to reorder
• Responsive Design: Clean, modern interface that adapts to your preferences

Technical Features

• Persistent Storage: All todos are saved to a todos.json file, so your data persists between sessions
• RESTful API: Full REST API endpoints for external integration
• CORS Enabled: Supports cross-origin requests for potential mobile or web app integrations
• Auto-Initialization: Automatically creates the storage file if it doesn't exist

Technologies Used

• Backend: Node.js with Express.js v5.2.1
• Frontend: Vanilla JavaScript, HTML5, CSS3
• Storage: File-based JSON storage
• Styling: CSS Variables for theming support

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or higher recommended)
• npm (comes bundled with Node.js)

Installation & Setup

1. Clone or Download the Project

Make sure you have all the project files in your directory:

project/
├── server.js
├── index.html
├── package.json
└── todos.json (created automatically)

2. Install Dependencies

Navigate to the project directory and run:

npm install

This will install the required dependencies:

• express - Web framework for Node.js
• cors - Middleware for enabling CORS

3. Start the Server

Run the server with:

node server.js

You should see the following message:

Todo API server running at http://localhost:3000

4. Access the Application

Open your web browser and navigate to:

http://localhost:3000

Usage Guide

Adding a New Todo

1. Type your task in the input field labeled "What needs to be done?"
2. Click the "Add" button or press Enter
3. Your new todo will appear in the list

Marking a Todo as Complete

• Click the checkbox to the left of any todo to toggle its completion status
• Completed items will have a strikethrough text style

Editing a Todo

1. Click directly on the todo text you want to edit
2. The text will become an editable input field
3. Type your changes and press Enter or click outside to save

Deleting a Todo

• Click the delete button (🗑️ icon) on the right side of any todo to remove it

Reordering Todos

1. Click and hold on the drag handle (⋮⋮) on the left side of any todo
2. Drag the todo to your desired position
3. You'll see visual indicators showing where the item will be inserted
4. Release to drop the todo in its new position

Dark Mode Toggle

• Click the moon/sun icon in the top-right corner to switch between dark and light themes
• Your theme preference is saved automatically

Changing the Title

• Click on the "Todo List" title at the top of the page
• Type your custom title
• Press Enter or click outside to save

API Endpoints

The application provides a RESTful API for programmatic access:

Get All Todos

GET /todos

Returns all todos as a JSON array.

Create a Todo

POST /todos
Content-Type: application/json

{
  "text": "Your todo text here"
}

Creates a new todo and returns it with an assigned ID.

Update a Todo

PUT /todos/:id
Content-Type: application/json

{
  "text": "Updated text (optional)",
  "completed": true (optional)
}

Updates the specified todo by ID.

Delete a Todo

DELETE /todos/:id

Deletes the todo with the specified ID.

Reorder Todos

POST /reorder
Content-Type: application/json

{
  "order": [1, 2, 3]
}

Reorders todos based on the array of IDs provided.

File Structure

project/
├── server.js          # Express.js backend server
├── index.html         # Frontend HTML with embedded CSS and JavaScript
├── package.json       # Node.js dependencies
└── todos.json         # Persistent storage file (auto-created)

Data Storage

All todo data is stored in a todos.json file in the project root directory. This file is:

• Automatically created on first run if it doesn't exist
• Updated after every create, update, delete, or reorder operation
• Persisted even after server restart

Default Port

The application runs on port 3000 by default. You can change this by modifying the PORT constant in server.js.

Troubleshooting

Common Issues

Port already in use: If port 3000 is already occupied, either:

• Stop the process using port 3000
• Change the PORT variable in server.js to a different value

Todos not persisting: Check that the todos.json file has write permissions in your project directory.

Dependencies not installed: Run npm install again to ensure all dependencies are properly installed.

License

This project is provided as-is for educational and personal use.

Future Enhancements

Potential features for future versions:

• Category/tags support
• Due dates and reminders
• Priority levels
• Search and filter functionality
• Export/import todos
• Cloud synchronization