Todo App with AI Assistant 🤖 (Vue.js)

A modern todo application built with Vue.js 3 featuring an AI-powered task assistant.

Features

• ✅ Create, read, update, and delete tasks
• 🤖 AI Assistant for task planning and productivity tips
• 📱 Responsive design with modern UI
• 🔄 Real-time task management
• 🎯 Task filtering (All, Completed, Not Completed, In Progress)
• 📄 Pagination for large task lists
• 🎨 Status color coding (TODO, IN_PROGRESS, DONE)

Tech Stack

• Frontend: Vue.js 3, TypeScript, Composition API
• Styling: Tailwind CSS v4, Headless UI Vue
• State Management: TanStack Vue Query, Pinia
• AI: Google Gemini API integration
• Build Tool: Vite
• Icons: Heroicons, Lucide Vue

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Install dependencies:

   npm install

2. Set up environment variables:

   # .env
   VITE_GEMINI_API_KEY=your-gemini-api-key-here

3. Run the development server:

   npm run dev

4. Open http://localhost:5173 in your browser

Building for Production

npm run build
npm run preview

Usage

• Todo Management: Add, edit, complete, and delete tasks from the main page
• AI Assistant: Click "AI Assistant" to get help with task planning, productivity tips, and breaking down complex tasks
• Task Details: Click on any task to view detailed information and edit
• Filtering: Use the dropdown to filter tasks by status
• Search: Use the search bar to find specific tasks

AI Assistant Features

Ask the AI assistant about:

• Morning routine suggestions
• Workday planning
• Breaking down complex tasks
• Prioritization strategies
• Productivity tips

API Integration

This app connects to:

• Todo API: https://api.oluwasetemi.dev/ for task CRUD operations
• Google Gemini AI: Direct frontend integration for AI assistant features

Development Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript type checking

---

Converted from Next.js to Vue.js - Maintaining the same functionality, UI design, and user experience while leveraging Vue.js ecosystem advantages.

Built with ❤️ using Vue.js and Google Gemini AI