Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a basic Customer Relationship Management (CRM) tool designed to help users manage their contacts, track interactions, and organize customer data efficiently. The minimalist interface ensures ease of use and accessibility, focusing on functionality without unnecessary clutter.

## CORE FEATURES
1. **Contact Management**: Users can add, edit, and delete contact information, including names, emails, phone numbers, and notes.
2. **Interaction Tracking**: A feature to log interactions with contacts, allowing users to keep notes on meetings, calls, and follow-ups.
3. **Search and Filter**: Users can easily search for contacts or filter by specific criteria, such as tags or interaction dates.
4. **Dashboard Overview**: A simple dashboard displaying key metrics such as the number of contacts, recent interactions, and upcoming follow-ups.
5. **User Authentication**: Secure login functionality for users to protect their data and ensure privacy.
6. **Responsive Design**: The application will be fully responsive, ensuring usability across devices including desktops, tablets, and smartphones.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, ensuring focus on content and functionality.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability and reduce eye strain.
- **Layout**: A structured layout featuring a sidebar for navigation, a main content area for displaying details, and a footer for additional links and information.
- **Typography**: Use a combination of sans-serif fonts such as 'Roboto' for body text and 'Montserrat' for headings to create a modern and clean typography hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust and type-safe development.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design changes and responsive layouts.
- **UI Components**: Utilize shadcn/ui for pre-built UI components to maintain consistency and expedite the development process.
- **State Management**: Use React Context API or Zustand for state management to keep the application lightweight and maintainable.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Install Tailwind CSS, shadcn/ui, and any necessary state management libraries.
3. **Create Layout Structure**: Develop the main layout with a sidebar, main content area, and footer. Use Tailwind CSS for styling.
4. **Implement Core Features**:
   - Develop the contact management system with forms for adding and editing contacts.
   - Create the interaction tracking feature, allowing users to log notes and dates.
   - Build the search and filter functionality, integrating with the contact management system.
   - Design the dashboard overview displaying key metrics.
   - Implement user authentication using a simple login form and secure session management.
5. **Ensure Responsiveness**: Test and adjust the layout for various screen sizes to ensure a seamless user experience across devices.
6. **Conduct User Testing**: Gather feedback from initial users to identify areas for improvement and make necessary adjustments.

## USER EXPERIENCE
The user journey begins with a simple login screen that leads to the dashboard. Users can easily navigate through the sidebar to access contact management and interaction tracking. Adding or editing contacts is straightforward, with clear forms and validation. Users can quickly search for specific contacts or filter their lists to find necessary information, while the dashboard provides a comprehensive overview of their CRM activities. The responsive design ensures that all interactions are smooth and intuitive, regardless of the device used.