Update README.md to enhance documentation for Vue Todo App features and structure

Author: jsanzdev

4 - Frameworks/Ejercicios/VUE/vue-lab/todo-app/README.md

@@ -1,75 +1,151 @@
-# Nuxt Minimal Starter
+# Vue Todo App Documentation
+
+A feature-rich todo application built with Vue 3, Nuxt, and Pinia for state management.
+
+## Features
+
+### Multiple Todo Lists
+- Create multiple todo lists
+- Switch between lists
+- Delete lists (with confirmation)
+- Persistent storage
+- Responsive sidebar navigation
+
+### Todo Management
+- Add new todos
+- Edit existing todos
+- Mark todos as complete/incomplete
+- Delete individual todos
+- Bulk actions:
+  - Complete all todos
+  - Uncomplete all todos
+  - Delete all todos
+
+### Filtering & Search
+- Filter todos by status:
+  - All
+  - Active
+  - Completed
+- Search todos by title
+- Real-time filtering
+
+### UI/UX Features
+- Responsive design
+- Mobile-friendly navigation
+- Smooth transitions
+- Confirmation dialogs
+- Visual feedback
+
+## Technical Stack
+
+- **Framework**: Vue 3 + Nuxt 3
+- **State Management**: Pinia
+- **Persistence**: Local Storage
+- **Styling**: Scoped CSS
+- **TypeScript**: Full type safety
+
+## Project Structure
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
+```
+todo-app/
+├── components/
+│   ├── TodoInput.vue
+│   ├── TodoItem.vue
+│   ├── TodoList.vue
+│   ├── TodoLists.vue
+│   ├── TodoFilter.vue
+│   ├── TodoActions.vue
+│   └── SearchBar.vue
+├── stores/
+│   └── todo-store.ts
+├── types/
+│   └── index.ts
+└── pages/
+    └── index.vue
 ```
 
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
+## Component Overview
+
+### TodoInput
+- Handles new todo creation
+- Form validation
+- Clear input after submission
+
+### TodoItem
+- Displays individual todo
+- Edit/Delete actions
+- Completion toggle
+- Double-click to edit
+
+### TodoList
+- Renders todo items
+- Handles todo interactions
+- Empty state handling
+
+### TodoLists
+- Manages multiple lists
+- Create/Delete lists
+- List navigation
+- Todo count per list
+
+### TodoFilter
+- Status filtering
+- Active filter indication
+- All/Active/Completed options
+
+### TodoActions
+- Bulk actions
+- Confirmation dialogs
+- Complete/Uncomplete all
+- Delete all
+
+### SearchBar
+- Real-time search
+- Case-insensitive matching
+- Debounced input handling
+
+## State Management
+
+### Store Structure
+```typescript
+interface State {
+  lists: TodoList[];
+  activeListId: number;
+  editingId: number | null;
+  filter: FilterType;
+  searchQuery: string;
+}
 ```
 
-## Production
+### Persistence
+- Automatic state persistence
+- Local storage based
+- Hydration handling
 
-Build the application for production:
+## Responsive Design
 
-```bash
-# npm
-npm run build
+### Desktop View
+- Side-by-side lists and todos
+- Full width content area
+- Visible navigation
 
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
+### Mobile View
+- Toggle between lists and todos
+- Hamburger menu navigation
+- Optimized touch targets
 
-Locally preview production build:
+## Getting Started
 
 ```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
+# Install dependencies
+npm install
 
-# yarn
-yarn preview
+# Run development server
+npm run dev
 
-# bun
-bun run preview
-```
+# Build for production
+npm run build
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+# Preview production build
+npm run preview
+```