Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web-based platform designed for managing software architecture visualizations. Its purpose is to allow users to create and manage organizational charts and software architecture diagrams with ease, providing a collaborative environment for teams to visualize their projects effectively.

## CORE FEATURES
1. **User Authentication**: Secure login and registration process for users to manage their accounts and projects.
2. **Diagram Creation Tool**: An intuitive drag-and-drop interface for creating and customizing software architecture diagrams.
3. **Collaboration Features**: Real-time collaboration allowing multiple users to edit diagrams simultaneously.
4. **Export Options**: Ability to export diagrams in various formats (PDF, PNG, SVG) for sharing and presentations.
5. **Version History**: Track changes and revert to previous versions of diagrams to maintain a clear development timeline.
6. **Templates Library**: Pre-built templates for various software architecture structures to help users get started quickly.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space and a focus on typography to enhance readability and usability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and legibility.
- **Layout**: A three-column layout where the left column contains the diagram tools, the center column displays the active diagram, and the right column shows the properties and options for customization.
- **Typography**: Use sans-serif fonts such as **Roboto** for body text and **Montserrat** for headings to provide a modern and clean aesthetic.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for strong typing and maintainability.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design and responsive layouts.
- **UI Components**: Utilize shadcn/ui components for a consistent and polished look and feel.
- **State Management**: Implement Zustand for state management to handle the application state in a simple and efficient manner.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Authentication Module**: Implement user authentication with registration and login functionalities.
3. **Build Diagram Creation Tool**: Develop the drag-and-drop interface using a library like React DnD for diagram creation.
4. **Enable Real-Time Collaboration**: Integrate a WebSocket solution (e.g., Socket.IO) to facilitate real-time editing among users.
5. **Implement Export Functionality**: Use a library like html2canvas to allow users to export their diagrams in various formats.
6. **Create Version Control System**: Build a version history feature that stores previous diagram states.
7. **Develop Templates Library**: Create a collection of pre-built templates for users to choose from when starting a new diagram.
8. **Testing & Deployment**: Conduct thorough testing of all features and deploy the application using a service like Vercel or Netlify.

## USER EXPERIENCE
Users will experience a seamless flow from registration/login to creating and collaborating on diagrams. The intuitive interface will guide them through the process of selecting templates, customizing diagrams, and utilizing collaboration tools. Users will be able to save their work, access previous versions of diagrams, and export their creations effortlessly, enhancing productivity and teamwork.