TaskWise AI: Smart Task Manager with AI Assistance

This is a task management application built with Next.js and powered by the Google Gemini API for intelligent subtask suggestions.

Features

• Task Management: Create, Read, Update, and Delete tasks.
• Task Attributes: Each task includes a title, description, due date, and status (pending/completed).
• AI-Powered Subtasks: A "Suggest Subtasks" feature uses the Google Gemini API to break down a larger task into 3-5 smaller, actionable steps.
• Responsive Design: The application is fully responsive and optimized for both desktop and mobile devices.
• Notifications: Users receive feedback for actions like task creation, errors, and AI suggestions.

Technologies Used

• Framework: Next.js 15+ (App Router)
• Language: TypeScript
• Styling: Tailwind CSS with shadcn/ui components
• AI: Google Gemini API via Genkit
• Forms: React Hook Form with Zod for validation
• Icons: lucide-react
• Utilities: date-fns for date formatting, uuid for unique IDs

Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js (v18 or later)
• pnpm, npm, or yarn
• A Google Gemini API Key

Installation

1. Clone the repository:

   git clone https://github.com/your-repo-url/taskwise-ai.git
   cd taskwise-ai

2. Install dependencies:

   npm install
   # or
   pnpm install
   # or
   yarn install

3. Set up environment variables: Create a .env.local file in the root of the project by copying the example file:

   cp .env.example .env.local

   Open .env.local and add your Google Gemini API key:

   GOOGLE_API_KEY="your_google_gemini_api_key"
   

4. Run the development server:

   npm run dev

   Open http://localhost:9002 with your browser to see the result.

Challenges Faced

• Integrating the AI feature seamlessly with the task management state required careful state management to ensure UI updates are reactive and efficient.
• Handling loading and error states for the asynchronous AI API calls was crucial for providing a smooth and informative user experience, especially when API calls might fail.
• Designing a clean, intuitive, and responsive UI that works well on both mobile and desktop required thoughtful use of modern CSS features and component libraries.