tiny-todo/README.md

# iny-Todo

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:

```bash
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:

```bash
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 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