Task Tracker with Smart Insights

A modern, full-stack task management application with AI-style insights built with React, TypeScript.

🚀 Features

• Task Management: Create, update, and track tasks with title, description, priority, and due dates
• Smart Filtering: Filter tasks by status (To Do, In Progress, Completed) and priority (High, Medium, Low)
• Flexible Sorting: Sort tasks by due date, creation date, or priority
• Smart Insights: Get AI-style analytics showing task distribution, overdue items, and workload summaries
• Real-time Updates: Instant feedback with optimistic UI updates
• Responsive Design: Beautiful interface that works on all devices
• Modern UI: Clean, professional design with smooth animations

🛠 Technology Stack

Frontend

• React 18 with TypeScript for type-safe development
• Vite for lightning-fast builds
• Tailwind CSS for utility-first styling
• shadcn/ui for beautiful, accessible components
• React Query (TanStack Query) for efficient data fetching and caching
• date-fns for date formatting and manipulation

Backend

• PostgreSQL database with Row Level Security
• REST API auto-generated by Supabase

📋 Prerequisites

• Node.js 18+ and npm installed (Install with nvm)
• Git for version control

🏃 Getting Started

1. Clone the Repository

git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>

2. Install Dependencies

npm install

3. Start Development Server

npm run dev

The application will open at http://localhost:8080

📁 Project Structure

├── src/
│   ├── components/          # React components
│   │   ├── TaskForm.tsx    # Task creation form
│   │   ├── TaskCard.tsx    # Individual task display
│   │   ├── TaskList.tsx    # Task list with filters
│   │   └── InsightsPanel.tsx # Analytics dashboard
│   ├── pages/              # Page components
│   │   └── Index.tsx       # Main application page
│   ├── integrations/       # Backend integrations
│   │   └── supabase/       # Supabase client and types
│   ├── components/ui/      # shadcn/ui components
│   └── lib/                # Utility functions
├── supabase/               # Database migrations
├── DECLARATION.md          # No-AI declaration
└── notes.md               # Design decisions and improvements

🗄 Database Schema

Tasks Table

- id: UUID (Primary Key)
- title: TEXT (Required)
- description: TEXT (Optional)
- priority: ENUM ('low', 'medium', 'high')
- status: ENUM ('todo', 'in-progress', 'completed')
- due_date: TIMESTAMP WITH TIME ZONE
- created_at: TIMESTAMP WITH TIME ZONE (Auto)
- updated_at: TIMESTAMP WITH TIME ZONE (Auto-updated)

Indexes

• idx_tasks_status on status column
• idx_tasks_priority on priority column
• idx_tasks_due_date on due_date column

🎯 API Endpoints

• GET /tasks - List all tasks with filtering support
• POST /tasks - Create a new task
• PATCH /tasks/:id - Update task status or priority
• DELETE /tasks/:id - Delete a task

🔍 Smart Insights Logic

The insights panel computes analytics using rule-based logic:

1. Total Task Count: All tasks in the system
2. Open Tasks: Tasks not marked as completed
3. Completed Tasks: Successfully finished tasks
4. High Priority Count: Urgent tasks requiring attention
5. Due Soon: Tasks due within 2 days
6. Overdue: Tasks past their due date
7. Priority Distribution: Dominant priority level across all tasks

The system generates natural language summaries like:

"You have 12 open tasks, with 3 marked as high priority. ⚠️ 2 tasks are overdue. Most tasks are medium priority."

🎨 Design System

Color Palette

• Primary: Indigo blue (#5865f2) - Professional and trustworthy
• High Priority: Red - Urgent attention needed
• Medium Priority: Amber - Moderate importance
• Low Priority: Emerald - Can be scheduled flexibly

Animations

• Smooth transitions on hover states
• Card elevation changes for depth
• Focus states with ring colors for accessibility

🧪 Development Commands

npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

📝 Usage Guide

Creating a Task

1. Fill in the task title (required)
2. Add an optional description
3. Select priority level (Low, Medium, High)
4. Choose initial status (To Do, In Progress, Completed)
5. Pick a due date from the calendar
6. Click "Create Task"

Managing Tasks

• Change Status: Click the status dropdown on any task card
• Update Priority: Click the priority dropdown
• Filter Tasks: Use the status and priority filters above the task list
• Sort Tasks: Choose from various sorting options (due date, creation date, priority)

Understanding Insights

The insights panel at the top shows:

• Overall task statistics
• Smart summary of your workload
• Alerts for overdue or due-soon tasks
• Priority distribution analysis

🔐 Security Notes

Current Implementation: Public RLS policies for demo purposes

Production Recommendations:

• Add user authentication (email/password or OAuth)
• Implement user-specific RLS policies
• Add rate limiting on API endpoints
• Enable server-side input validation
• Implement CSRF protection
• Add audit logging for task changes

🎯 Future Enhancements

High Priority

• User authentication with JWT
• Backend API with proper validation
• Pagination for large task lists
• Full-text search across tasks

Nice to Have

• Task tags and categories
• Subtasks and task hierarchy
• Timeline chart visualization
• Email notifications for due tasks
• Recurring tasks
• File attachments
• Collaboration features
• Activity log

See notes.md for detailed improvement plans.

📄 License

This project is part of a technical assessment.