TaskFlow AI To-Do App

A modern, AI-powered task management application built with HTML, CSS, and JavaScript. Features a clean, responsive interface with intelligent task prioritization and planning assistance.

Features

• Task Management: Create, edit, and organize tasks with ease
• Priority Levels: High, Medium, and Low priority tasks with visual indicators
• Task Lists: Organize tasks into Work, Personal, and Study categories
• Due Dates: Set and track task deadlines
• Progress Tracking: Daily progress visualization
• Data Persistence: Tasks are automatically saved to browser localStorage
• AI Assistant: Powered by Claude (Anthropic) for task prioritization, planning, and motivation
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Real-time Updates: Instant UI updates without page refreshes

Demo

Visit the live demo: TaskFlow AI

Getting Started

Prerequisites

• A modern web browser
• Internet connection for AI features
• Anthropic API key (for AI features)

Installation

1. Clone the repository:

   git clone https://github.com/arjunj08/TaskFlow-AI-To-Do-app.git

2. Navigate to the project directory:

   cd TaskFlow-AI-To-Do-app

3. Open index.html in your web browser or serve it with a local server.

Deployment to GitHub Pages

1. Go to your repository settings on GitHub
2. Navigate to "Pages" in the sidebar
3. Under "Source", select "GitHub Actions"
4. Push the code (the workflow will automatically deploy)

AI Configuration

To enable AI features, you'll need an Anthropic API key:

1. Sign up for an account at Anthropic
2. Get your API key from the dashboard
3. For security, consider setting up a backend proxy or using server-side rendering instead of client-side API calls

Note: The current implementation makes direct API calls from the client-side, which exposes your API key. This is not recommended for production use.

Safer Implementation Options

For a more secure setup, consider these alternatives:

1. Backend Proxy: Create a simple server (e.g., with Node.js/Express) that handles API calls server-side and exposes an endpoint for the frontend.

2. Serverless Functions: Use platforms like Vercel, Netlify, or Cloudflare Workers to create serverless functions that proxy the AI requests.

3. Environment Variables: If deploying to a platform that supports server-side code, store the API key securely.

Example backend proxy (Node.js/Express):

const express = require('express');
const cors = require('cors');
const Anthropic = require('@anthropic-ai/sdk');

const app = express();
app.use(cors());
app.use(express.json());

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY, // Store securely
});

app.post('/api/chat', async (req, res) => {
  try {
    const response = await anthropic.messages.create(req.body);
    res.json(response);
  } catch (error) {
    res.status(500).json({ error: 'AI request failed' });
  }
});

app.listen(3000);

Then update the frontend fetch to point to your proxy endpoint.

Usage

1. Adding Tasks: Use the input bar at the top to add new tasks. Select priority and list category.

2. Managing Tasks: Click the checkbox to mark tasks as complete. Use the filter tabs to view active or completed tasks.

3. Navigation: Use the sidebar to switch between different views (All Tasks, Today, Upcoming, High Priority) or specific lists.

4. AI Assistant: Interact with the AI panel on the right to get help with task prioritization, daily planning, or motivation.

AI Features

The AI assistant can help you:

• Prioritize your tasks based on urgency and importance
• Create daily schedules and plans
• Break down complex tasks into manageable steps
• Provide motivation and productivity tips

Technologies Used

• HTML5: Structure and content
• CSS3: Styling and responsive design
• JavaScript (ES6+): Functionality and interactivity
• Tailwind CSS: Utility-first CSS framework
• Anthropic Claude API: AI-powered assistance

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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

Acknowledgments

• UI design inspired by modern productivity apps
• AI powered by Anthropic's Claude
• Icons and fonts from Google Fonts