Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
"Cria" is a minimalist web application designed to simplify user interactions with a clean and intuitive interface. Its primary purpose is to provide users with an efficient platform for managing their tasks or projects while focusing on a seamless user experience.

## CORE FEATURES
1. **Task Management**: Create, edit, and delete tasks with ease. Users can categorize tasks and set priorities to enhance productivity.
2. **Project Tracking**: Visualize progress with project statuses and timelines, allowing users to stay on top of their projects’ deadlines.
3. **User Profiles**: Users can create and manage their profiles, enabling personalized settings and preferences for a tailored experience.
4. **Collaboration Tools**: Share tasks and projects with team members, facilitating efficient collaboration and communication.
5. **Notifications**: Real-time alerts for task deadlines and updates to ensure users never miss important deadlines.
6. **Analytics Dashboard**: A visual representation of task completion rates and project progress to help users analyze their productivity trends.

## 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: A single-column layout with a header for navigation, a main content area for displaying tasks and projects, and a footer for additional links and information.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Query for data fetching and state management

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. Install Tailwind CSS and configure it for your project.
2. **Create Layout Components**: Build the main layout with a header, footer, and main content area. Use Tailwind CSS for styling.
3. **Develop Core Features**:
   - Implement the Task Management feature with forms for adding and editing tasks.
   - Create the Project Tracking UI, including progress bars and timelines.
   - Set up User Profiles with editable fields.
   - Integrate Collaboration Tools by allowing users to invite others to their projects.
   - Build the Notification system using browser notifications or in-app alerts.
   - Design the Analytics Dashboard using charts and graphs to display data.
4. **Implement State Management**: Utilize React Query to manage application state and handle API calls for task and project data.
5. **Testing**: Conduct thorough testing for all features to ensure functionality across different devices.
6. **Deployment**: Prepare the application for deployment on a hosting platform like Vercel or Netlify.

## USER EXPERIENCE
The user experience focuses on simplicity and ease of use, with intuitive navigation and clear call-to-action buttons. Users can quickly add and manage tasks from the main dashboard, receive notifications for important updates, and visualize their progress through the analytics dashboard. The responsive design ensures that the application performs well on various devices, providing a seamless experience for all users.