Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The application is a web-based SaaS Dashboard designed for project management. Its main purpose is to provide users with a clean and intuitive interface for tracking projects, tasks, and team performance, enhancing productivity with a focus on simplicity and usability.

## CORE FEATURES
1. **Project Overview**: A comprehensive view displaying active projects, deadlines, and progress metrics. Users can quickly assess the status of their projects at a glance.
2. **Task Management**: Users can create, assign, and prioritize tasks within projects. Features include due dates, status updates, and comments for collaboration.
3. **Team Collaboration**: A dedicated section for team communication, allowing users to share updates, files, and feedback directly within the dashboard.
4. **Analytics and Reporting**: Visual reports showcasing project performance, task completion rates, and resource allocation to help users make informed decisions.
5. **User Profiles**: Customizable user profiles where team members can manage their settings, view their assigned tasks, and track their contributions.
6. **Notifications**: Real-time alerts for task assignments, deadline reminders, and team updates to keep users informed and engaged.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist, emphasizing a clean and simple design with ample white space. The interface prioritizes clarity and eliminates distractions to enhance user focus.
- **Color Mode**: Light theme featuring a limited color palette with dark text on light backgrounds for optimal readability.
- **Layout**: The main layout will consist of a top navigation bar for easy access to different sections, a sidebar for project selection, and a central content area that displays detailed information and analytics. Cards and lists will be used to present tasks and project summaries.
- **Typography**: Use a sans-serif font like "Inter" for body text to ensure readability, with larger, bold headings to establish a clear hierarchy. Body text should be set at 16px, headings at 24px, and subheadings at 20px.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid design and layout adjustments.
- **UI Components**: Utilize shadcn/ui for pre-designed, accessible UI components to maintain consistency and improve development speed.
- **State Management**: Use React Context API or Zustand for managing application state, ensuring a seamless user experience.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: 
   - Install Node.js and set up a new React project using Create React App with TypeScript.
   - Install Tailwind CSS and configure it with PostCSS.
2. **Create Project Structure**:
   - Define folders for components, pages, and styles. Set up a global stylesheet for Tailwind.
3. **Design Top Navigation and Sidebar**:
   - Implement the top navigation bar with links to different dashboard sections.
   - Create a sidebar for project selection, ensuring it is collapsible for a cleaner interface.
4. **Build Core Features**:
   - Develop the Project Overview component, pulling project data from a mock API.
   - Create Task Management functionality allowing users to add, edit, and delete tasks.
   - Implement Team Collaboration features, integrating a simple chat interface.
5. **Analytics and Reporting**:
   - Use a charting library (e.g., Chart.js) to visualize project data and performance metrics.
6. **Set Up Notifications**:
   - Implement a notification system using React Context to manage alert states across the app.
7. **Testing and Deployment**:
   - Conduct thorough testing, focusing on responsiveness and user experience. Deploy the app using a platform like Vercel.

## USER EXPERIENCE
The user experience focuses on intuitive navigation and seamless interactions. Users will be welcomed with a dashboard overview upon logging in, allowing them to quickly select projects and view task statuses. Each feature is designed to require minimal clicks to access, with contextual help available for new users. Responsive design ensures that the application performs well across various devices, providing a consistent experience whether on desktop or mobile. Notifications will appear as unobtrusive alerts in the corner of the screen, ensuring users stay informed without being overwhelmed.