Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a personal CRM (Customer Relationship Management) tool that helps users manage their contacts and relationships efficiently. The application focuses on simplicity and user-friendliness, allowing users to track interactions, set reminders, and categorize their contacts seamlessly.

## CORE FEATURES
1. **Contact Management**: Users can easily add, edit, and delete contacts, including essential information like name, email, phone number, and notes.
2. **Interaction Tracking**: Log interactions with contacts, such as meetings, calls, or emails, to maintain a history of communications.
3. **Reminders and Follow-ups**: Set reminders for follow-ups or important dates related to contacts to ensure timely interactions.
4. **Categorization**: Organize contacts into customizable categories (e.g., friends, colleagues, clients) for better segmentation and management.
5. **Search and Filter**: Quick search functionality to find contacts easily and filter them based on categories or recent interactions.
6. **Dashboard Overview**: A simple dashboard that provides insights into upcoming reminders and recent interactions.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, a minimal color palette, and a strong focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and provide a fresh look.
- **Layout**: A single-page layout that includes a sidebar for navigation (contact list), main content area for details and actions, and a footer for additional links or information.
- **Typography**: Use a sans-serif font such as "Roboto" for body text and "Montserrat" for headings to maintain clarity and modernity. Hierarchy should be clear, with larger font sizes for headings and consistent spacing.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: Utilize shadcn/ui for ready-to-use components that align with the minimalist aesthetic.
- **State Management**: Use React Context or Zustand for state management to handle the contact data and interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS, shadcn/ui, and Zustand.
2. **Create Layout Components**: Develop the main layout, including a sidebar for navigation and a main content area for contact details and interactions.
3. **Implement Contact Management**: Build features for adding, editing, and deleting contacts, ensuring each action updates the UI and state appropriately.
4. **Interaction Tracking**: Create a form to log interactions and display them in the contact's detail view, allowing users to see their history.
5. **Reminders and Follow-ups**: Integrate a reminder system, providing notifications or alerts for upcoming follow-ups.
6. **Dashboard Overview**: Design a dashboard that summarizes upcoming reminders and recent interactions for quick access.
7. **Testing and Debugging**: Thoroughly test all functionalities to ensure a seamless user experience and fix any bugs.

## USER EXPERIENCE
The user experience focuses on intuitive interactions and streamlined workflows. Users can quickly navigate through their contact list, add new contacts effortlessly, and manage their interactions with minimal clicks. The dashboard offers a clear overview of tasks, ensuring users stay organized without feeling overwhelmed. The responsive design ensures usability across devices, providing a consistent experience whether on desktop or mobile.