Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a minimalist web app designed to provide users with a clean and efficient interface for managing personal tasks and notes. It emphasizes simplicity and ease of use, allowing users to focus on their priorities without distractions.

## CORE FEATURES
1. **Task Management**: Users can create, edit, and delete tasks, with the ability to set deadlines and priorities for each task.
2. **Notes Section**: A dedicated area for users to jot down ideas or reminders, with options for formatting text and organizing notes by categories.
3. **Search Functionality**: An intuitive search feature that allows users to quickly find tasks or notes using keywords.
4. **User Authentication**: Secure login and registration system to protect user data and provide a personalized experience.
5. **Responsive Design**: The app adjusts seamlessly across devices, ensuring a consistent user experience on both mobile and desktop platforms.
6. **Dark Mode Toggle**: A user-friendly option to switch between light and dark themes, catering to user preferences for different environments.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a focus on clean lines and ample white space, ensuring that the interface remains uncluttered and easy to navigate.
- **Color Mode**: A light theme featuring dark text on light backgrounds, creating a high-contrast and readable text presentation.
- **Layout**: A single-column layout that prioritizes vertical scrolling, with a fixed header for navigation and a footer for additional links and information.
- **Typography**: Use of sans-serif fonts like Inter or Roboto to maintain clarity and readability, with a clear hierarchy established through varying font sizes and weights for headings, subheadings, and body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling, ensuring rapid development and consistency across components.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Implement React's Context API for global state management of tasks and notes.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project with TypeScript using Create React App and install Tailwind CSS.
2. **Install Dependencies**: Install shadcn/ui and any other necessary libraries (e.g., React Router for navigation).
3. **Build Initial Layout**: Create the main layout structure with a header, main content area, and footer using Tailwind CSS for styling.
4. **Develop Core Features**: Implement the task management and notes functionality, ensuring CRUD operations are handled efficiently.
5. **Implement User Authentication**: Set up authentication using Firebase or another service, integrating it with the application's state management.
6. **Add Search Functionality**: Implement a search bar that filters tasks and notes based on user input.
7. **Responsive Design**: Use Tailwind's responsive utility classes to ensure the application is mobile-friendly.
8. **Test User Experience**: Conduct usability testing to gather feedback and iterate on design based on user interactions.
9. **Deploy Application**: Prepare the application for deployment on a platform like Vercel or Netlify.

## USER EXPERIENCE
The user experience is centered around simplicity and efficiency. Upon logging in, users are greeted with a dashboard that displays their tasks and notes in a straightforward manner. The search bar is prominently placed, allowing users to quickly locate specific items. Task creation is streamlined with a minimal form, and users can easily navigate between tasks and notes with intuitive icons. The dark mode toggle is easily accessible, ensuring users can customize their experience based on their preferences. Overall, the design promotes a focused workflow, minimizing distractions and enhancing productivity.