Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a simple task management web app that allows users to create a list of tasks and track their progress. Users can mark tasks at different stages, making it a practical tool for organizing tasks efficiently.

## CORE FEATURES
1. **Task Creation**: Users can add new tasks with titles and optional descriptions.
2. **Progress Tracking**: Each task can be marked as "not started," "in progress," or "completed" to indicate its current status.
3. **Task List View**: A clean interface displays all tasks with their current status and options to edit or delete them.
4. **Responsive Design**: The application is fully responsive, ensuring usability on both desktop and mobile devices.
5. **User-Friendly Interface**: Minimalist design prioritizes usability, allowing users to focus on their tasks without distractions.

## 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 includes a header for the app title, a task input area, and a list view below displaying tasks with their status and action buttons.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React's built-in state management (useState and useEffect)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript template.
   ```bash
   npx create-react-app task-manager --template typescript
   ```
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling.
   ```bash
   npm install tailwindcss postcss autoprefixer
   npm install @shadcn/ui
   ```
3. **Configure Tailwind CSS**: Set up Tailwind CSS by creating a `tailwind.config.js` file and configuring it to include the paths to your files.
4. **Create Components**: Develop components for task input, task list, and individual task items.
5. **Implement State Management**: Use `useState` to manage the list of tasks and their statuses.
6. **Add Styling**: Apply Tailwind CSS classes according to the design specifications, ensuring the layout is minimalist and responsive.
7. **Testing**: Test the application across different devices to ensure functionality and usability.

## USER EXPERIENCE
Users will interact with the application by entering tasks in the input field and selecting their progress via buttons. The task list will update dynamically as tasks are added or modified. The clean design allows users to focus on task management without unnecessary distractions, creating a seamless experience.