Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The task management app is a web application designed to help users organize and manage their tasks efficiently. With a drag-and-drop functionality, users can easily prioritize and rearrange their tasks, enhancing their productivity in a clean and minimalist interface.

## CORE FEATURES
1. **Drag-and-Drop Task Management**: Users can easily move tasks between different lists or reorder tasks within the same list using a simple drag-and-drop interface.
2. **Task Creation and Editing**: Users can create new tasks, set deadlines, and edit existing tasks with ease.
3. **Task Categorization**: Tasks can be categorized into different lists (e.g., To Do, In Progress, Completed) for better organization.
4. **User Authentication**: Secure login and registration system to allow users to save their tasks and settings.
5. **Responsive Design**: The app will be fully responsive, ensuring usability across various devices, including desktops, tablets, and smartphones.
6. **Search and Filter Functionality**: Users can search for specific tasks and filter them based on different criteria (e.g., due date, category).

## 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 main layout will feature a sidebar for task categories and a central area displaying tasks with drag-and-drop capabilities. The header will include the app title and user profile options.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API for managing global state if needed

## IMPLEMENTATION STEPS
1. **Set up the React environment**: Create a new React project using Create React App with TypeScript template.
2. **Install Tailwind CSS**: Follow Tailwind CSS installation instructions to add it to your project.
3. **Implement Authentication**: Set up user authentication using Firebase or a similar service.
4. **Create Components**:
   - Develop the Header component for navigation.
   - Create Sidebar for task categories.
   - Implement TaskList and Task components for displaying tasks with drag-and-drop functionality.
5. **Integrate Drag-and-Drop**: Use a library like `react-beautiful-dnd` to enable drag-and-drop features for task management.
6. **Add Task Functionality**: Implement task creation, editing, and deletion functionalities.
7. **Implement Responsiveness**: Ensure all components are responsive and adapt to different screen sizes.
8. **Testing**: Conduct thorough testing for functionality and usability across devices.

## USER EXPERIENCE
Users will interact with the app by logging in to their accounts, where they can view their task lists. The drag-and-drop feature allows them to prioritize tasks effortlessly. They can create new tasks, edit existing ones, and categorize them into different lists. The minimalist design ensures a focus on the tasks at hand, while the responsive layout adapts to any device, providing a seamless user experience.