Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a real-time collaboration web application designed for users to edit documents simultaneously, similar to Google Docs or Notion. The app will feature live updates, cursor tracking, and a robust comment system, all while ensuring seamless user experience through responsive design and high-quality interactions.

## CORE FEATURES
- **Live Editing**: Multiple users can edit documents in real-time, with changes instantly visible to all participants.
- **Cursor Tracking**: Users can see where others are typing, enhancing collaboration.
- **Live Updates**: Automatic updates to documents without the need for manual refresh, ensuring users always have the latest version.
- **Conflict Resolution**: Intelligent handling of edits made by different users simultaneously to prevent data loss.
- **Autosave**: Automatic saving of changes to prevent loss of data during editing sessions.
- **Comments System**: Users can leave comments and feedback directly within the document for effective communication.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, focusing on usability and readability.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: A responsive, mobile-first design with a clear visual hierarchy. The main layout will include a header, main editing area, comments sidebar, and a footer for links and information.
- **Typography**: Use modern sans-serif fonts such as Inter or Roboto for headings and body text, ensuring clarity and a contemporary feel.

## TECHNICAL REQUIREMENTS
- **Framework**: Next.js (React with TypeScript)
- **Styling**: Tailwind CSS for utility-based styling
- **UI Components**: Utilize shadcn/ui for pre-built components
- **State Management**: Yjs or CRDT for real-time collaboration logic

## IMPLEMENTATION STEPS
1. **Set Up Next.js Project**: Initialize a new Next.js project using TypeScript.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and any necessary libraries for WebSockets and real-time collaboration (like Yjs).
3. **Create Essential Pages**: Build a main editing page, including components for the editor, comments section, and user cursors.
4. **Implement Real-Time Features**: Set up WebSocket connections for live updates and cursor tracking.
5. **Develop the Comments System**: Create a UI for leaving comments and display them in real-time.
6. **Add Autosave Functionality**: Implement automatic saving of document changes.
7. **Integrate Conflict Resolution Logic**: Ensure that edits made by different users are handled gracefully.
8. **Responsive Design**: Apply Tailwind CSS to ensure the app is fully responsive across devices.
9. **Optimize Performance**: Clean up code, optimize assets, and ensure fast loading times.
10. **Deployment Configuration**: Create a `vercel.json` file for proper deployment and routing, ensuring to replace any mention of "Lovable" with "azhar0i0".

## USER EXPERIENCE
Users will have a seamless interaction experience, starting from the moment they land on the app. They will enter the collaborative document through a simple and engaging interface. As they edit, they will see live updates from other users, with clear visual indicators showing their collaborators' cursor positions. The comments system will allow for easy feedback and discussions, fostering a collaborative environment. Smooth animations and transitions will enhance the overall user experience, making it feel polished and professional.

This web application will embody high-end modern UI design principles, ensuring that it stands out in the market as a top-tier collaboration tool.