Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a To-Do List / Task Tracker web application designed to provide users with a simple and efficient way to manage their tasks. The app will allow users to add, complete, delete, and filter tasks, showcasing dynamic UI updates and potentially drag-and-drop functionality for enhanced user interaction.

## CORE FEATURES
1. **Add Task**: Users can input a task description and add it to their task list.
2. **Mark Complete**: Users can mark tasks as complete, visually indicating their status change.
3. **Delete Task**: Users can remove tasks from the list, keeping their task management clean and organized.
4. **Filter Tasks**: Users can filter tasks based on their completion status (e.g., all tasks, completed tasks, active tasks).
5. **Dynamic UI Updates**: The UI will reflect changes in real-time as tasks are added, completed, or deleted.
6. **Drag-and-Drop**: If supported, users can reorder tasks through drag-and-drop functionality for better organization.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout will feature a central input area for adding tasks, a list display for all tasks, and filter options at the top; a simple header will introduce the application.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's Context API (or Zustand if more complex state management is needed)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS along with shadcn/ui.
2. **Create Components**:
   - Header Component: Display the application title.
   - Task Input Component: Input field and button to add new tasks.
   - Task List Component: Render the list of tasks with options to mark as complete or delete.
   - Filter Component: Dropdown or buttons to filter tasks.
3. **Implement State Management**: Use React Context API to manage the task list state across components.
4. **Add Functionality**:
   - Implement the logic for adding, completing, deleting, and filtering tasks.
   - Integrate drag-and-drop functionality if feasible using a library like react-beautiful-dnd.
5. **Style Components**: Use Tailwind CSS classes to apply the minimalist design, focusing on spacing, typography, and colors as specified.
6. **Test and Optimize**: Ensure responsiveness and functionality across different devices and browsers.

## USER EXPERIENCE
Users will interact with the application by entering tasks into the input field and clicking the add button. The task will immediately appear in the list below, where users can mark it as complete or delete it. The filtering options will allow users to quickly view all tasks or only those that are completed or active. The intuitive drag-and-drop feature will enable users to rearrange their tasks easily, fostering a fluid and engaging experience. The overall design will emphasize clarity and ease of use, making task management straightforward and efficient.