TaskFlow 🚀

AI-Powered Task Manager Built with Next.js 15

A modern, AI-enhanced task management application that helps you organize, prioritize, and complete your tasks more efficiently with the power of Google's Gemini AI.

✨ Features

🎯 Core Task Management

• Create, Edit & Delete Tasks - Full CRUD operations with real-time updates
• Status Management - Track tasks through Todo, In Progress, and Completed states
• Rich Task Details - Title, description, category, and duration estimation
• Advanced Filtering - Search, filter by status, and sort tasks multiple ways
• Dual View Modes - Switch between List view and Kanban Board view

🤖 AI-Powered Intelligence

• Smart Task Suggestions - Get contextual task recommendations based on your existing tasks
• Auto-Enhanced Descriptions - AI improves your task descriptions for clarity and actionability
• Intelligent Categorization - Automatic task categorization (Work, Personal, Health, etc.)
• Duration Estimation - AI predicts how long tasks will take to complete
• Subtask Generation - Break complex tasks into manageable sub-steps
• One-Click Enhancement - Enhance all task fields with a single AI-powered action

🔐 Authentication & Security

• Modern Auth System - Powered by Better Auth with email/password and OAuth
• Google OAuth Integration - Sign in with your Google account
• Secure Sessions - JWT-based authentication with proper session management
• Protected Routes - Automatic redirection for authenticated/unauthenticated users

🎨 Modern UI/UX

• Beautiful Interface - Built with Shadcn/ui components and Tailwind CSS
• Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
• Dark/Light Mode Support - (Ready for implementation)
• Smooth Animations - Delightful micro-interactions and transitions
• Accessibility First - Proper ARIA labels, keyboard navigation, and screen reader support

🛠 Tech Stack

Category	Technology	Purpose
Framework	Next.js 15	App Router, Server Components, API Routes
Language	TypeScript	Type safety and better developer experience
Database	PostgreSQL (Neon)	Serverless PostgreSQL database
ORM	Drizzle ORM	Type-safe database queries and migrations
Authentication	Better Auth	Modern auth with social providers
AI Integration	Google Gemini	Task enhancement and smart suggestions
UI Components	Shadcn/ui	Beautiful, accessible React components
Styling	Tailwind CSS	Utility-first CSS framework
Package Manager	pnpm	Fast, efficient package management

🚀 Quick Start

Prerequisites

• Node.js 18+ installed
• pnpm package manager
• PostgreSQL database (we recommend Neon)
• Google AI API key (from Google AI Studio)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/taskflow.git
   cd taskflow

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp .env.example .env.local

   Fill in your .env.local:

   # Database
   DATABASE_URL="postgresql://username:password@host/database?sslmode=require"
   
   # Better Auth
   BETTER_AUTH_SECRET="your-32-character-secret-key"
   BETTER_AUTH_URL="http://localhost:3000"
   
   # Google OAuth (Optional)
   GOOGLE_CLIENT_ID="your-google-client-id"
   GOOGLE_CLIENT_SECRET="your-google-client-secret"
   
   # Google AI
   GEMINI_API_KEY="your-gemini-api-key"

4. Initialize Shadcn/ui

   npx shadcn@latest init

5. Run database migrations

   pnpm db:generate
   pnpm db:migrate

6. Start the development server

   pnpm dev

7. Open your browser Navigate to http://localhost:3000

📁 Project Structure

taskflow/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── api/               # API Routes
│   │   │   ├── auth/         # Authentication endpoints
│   │   │   ├── tasks/        # Task CRUD operations
│   │   │   └── ai/           # AI enhancement endpoints
│   │   ├── dashboard/        # Protected dashboard page
│   │   ├── login/           # Authentication pages
│   │   └── register/
│   ├── components/           # React Components
│   │   ├── ai/              # AI-powered components
│   │   ├── auth/            # Authentication forms
│   │   ├── layout/          # Layout components
│   │   ├── providers/       # Context providers
│   │   ├── tasks/           # Task management components
│   │   └── ui/              # Shadcn/ui components
│   └── lib/                 # Utilities and configurations
│       ├── db/              # Database schema and connection
│       ├── auth.ts          # Better Auth configuration
│       ├── auth-client.ts   # Client-side auth utilities
│       └── gemini.ts        # Google AI integration
├── drizzle/                 # Database migrations
└── public/                  # Static assets

🤖 AI Features Guide

Getting AI Suggestions

1. Click "Get Suggestions" in the task form
2. AI analyzes your existing tasks and provides relevant recommendations
3. Click on any suggestion to auto-fill the task title

Enhancing Task Descriptions

1. Enter a task title
2. Click "AI Enhance" next to the description field
3. AI will generate a clear, actionable description

Auto-Enhancement

1. Enter a task title
2. Click "Auto-enhance All"
3. AI will automatically:
   • Categorize the task
   • Estimate completion time
   • Generate subtasks
   • Improve the description

🗄️ Database Schema

Users Table

• Authentication data (Better Auth managed)
• Profile information
• Session management

Tasks Table

• Task details (title, description, status)
• AI enhancements (category, duration, AI flag)
• User relationships and timestamps

Subtasks Table

• Generated subtasks for complex tasks
• Completion tracking
• Parent task relationships

📚 Available Scripts

Script	Description
pnpm dev	Start development server
pnpm build	Build for production
pnpm start	Start production server
pnpm db:generate	Generate database migrations
pnpm db:migrate	Apply database migrations
pnpm db:studio	Open Drizzle Studio
pnpm lint	Run ESLint
pnpm type-check	Run TypeScript checks

🚀 Deployment

Deploy to Vercel

1. Connect your repository to Vercel
2. Set environment variables in Vercel dashboard
3. Deploy automatically - Vercel handles the build process

Environment Variables for Production

DATABASE_URL="your-production-database-url"
BETTER_AUTH_SECRET="your-production-secret"
BETTER_AUTH_URL="https://your-domain.com"
GEMINI_API_KEY="your-gemini-api-key"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

🔧 Configuration

Database Configuration

• Uses Drizzle ORM with PostgreSQL
• Automatic migrations with drizzle-kit
• Type-safe queries and relationships

Authentication Setup

• Better Auth with JWT sessions
• Social provider integration (Google)
• Automatic session refresh

AI Integration

• Google Gemini 1.5 Flash model
• Configurable generation parameters
• Rate limiting and error handling

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

Development Guidelines

• Follow TypeScript strict mode
• Use conventional commit messages
• Add proper error handling
• Write descriptive component props
• Test AI integrations thoroughly

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js - React framework
• Better Auth - Modern authentication
• Drizzle ORM - TypeScript ORM
• Shadcn/ui - UI component library
• Google AI - Gemini AI integration
• Neon - Serverless PostgreSQL

📞 Support

If you have any questions or need help:

• Open an issue
• Check the documentation
• Join our Discord community

---

Built with ❤️ by abdikani
Making task management intelligent and effortless