Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed as a minimalist dashboard for users to manage various data points and metrics efficiently. The focus is on providing a clean, user-friendly interface that facilitates easy navigation and data visualization, making it ideal for professionals seeking to streamline their workflow.

## CORE FEATURES
1. **User Authentication**: Secure sign-up and login processes to ensure user data privacy and personalized experience.
2. **Dashboard Overview**: A central hub displaying key metrics and data visualizations, such as graphs and charts, for quick insights into performance.
3. **Data Management**: Users can add, edit, and remove data entries, allowing for dynamic interaction with their information.
4. **Customizable Widgets**: Users can select and arrange dashboard widgets based on their preferences, enhancing personal usability and organization.
5. **Notifications and Alerts**: Real-time notifications for important updates or changes within the dashboard, keeping users informed at all times.
6. **Analytics Reports**: Generate and download detailed reports based on the data collected, aiding in analysis and decision-making.

## 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 vertical sidebar for navigation, a top header for user info and settings, and a main content area for dashboard metrics and widgets.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Redux (as needed for complex state management).

## IMPLEMENTATION STEPS
1. **Set Up a New React Project**: Initialize a new project using Create React App with TypeScript.
2. **Install Necessary Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create Layout Structure**: Set up the main layout with a sidebar, header, and main content area using Tailwind CSS for styling.
4. **Implement User Authentication**: Create authentication pages using forms styled with Tailwind CSS.
5. **Build Dashboard Overview**: Develop the main dashboard component to display key metrics and visualizations using chart libraries like Chart.js or Recharts.
6. **Integrate Data Management**: Create CRUD functionalities allowing users to manage their data entries.
7. **Add Customizable Widgets**: Implement drag-and-drop functionality for users to rearrange their dashboard widgets.
8. **Set Up Notifications and Alerts**: Use state management to handle real-time updates and notifications.
9. **Create Exportable Analytics Reports**: Implement functionality for users to generate and download reports based on their data metrics.
10. **Conduct Testing and Optimization**: Ensure the application is responsive and user-friendly across various devices and screen sizes.

## USER EXPERIENCE
Users will interact with a streamlined interface where they can easily navigate through the sidebar to access different sections of the dashboard. The dashboard will present data visually, allowing users to hover for more info or click to delve deeper. Customization options will enable users to tailor their dashboard layout, making the experience personal and efficient. Notifications will keep users engaged without overwhelming them, thus enhancing their workflow and productivity.