Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
DiscFlow is a web application designed as a visual builder for creating advanced Discord bots without any coding. Users can effortlessly construct bots by connecting nodes in a visual interface, enabling them to automate interactions, embed rich content, and manage workflows seamlessly within their Discord servers.

## CORE FEATURES
- **Visual Node-Based Builder**: Users can drag and drop nodes representing various bot functions, such as triggers, presentations, actions, and logic components, to create unique workflows visually.
- **Rich Embeds and Interactions**: The application allows for the creation of rich embeds, buttons, and select menus that enhance user interaction within Discord.
- **Multiple Workspaces**: Users can create multiple workspaces, each associated with a specific Discord server and bot, allowing for organized management of different projects.
- **Bilingual Interface**: The application supports both Portuguese (PT-BR) and English (EN-US) to cater to a broader audience, with a language selector at the top.
- **Comprehensive Authentication**: Users can log in using Discord OAuth2, ensuring secure access to their workspaces and bot configurations.
- **Automated Variable System**: The platform automatically tracks user context and interactions, enabling dynamic content generation within the bots.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design focuses on a clean and simple aesthetic with ample white space and a minimal color palette that emphasizes typography.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a pleasant user experience.
- **Layout**: 
  - A central infinite canvas for the node builder, where users can drag and drop nodes.
  - A sidebar for configuring the selected node, providing clear visual feedback on node status (valid/invalid).
  - A top navigation bar for workspace management and language selection.
- **Typography**: 
  - Use a modern sans-serif font for clarity and readability.
  - Establish a clear hierarchy with larger sizes for headings and smaller sizes for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the user interface and managing state.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid design iterations.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Implement React's Context API or Zustand for managing application state across components.

## IMPLEMENTATION STEPS
1. **Set Up Project Structure**: Initialize a Next.js project with TypeScript and configure Tailwind CSS.
2. **Create Core Components**: Develop the main components such as the canvas, node types (trigger, presentation, action, logic), and sidebar configuration.
3. **Implement Node Functionality**: Build out the logic for each node type, ensuring they can accept inputs and produce outputs as specified.
4. **Design UI Layout**: Apply Tailwind CSS to style the components according to the design specifications, focusing on a clean and responsive layout.
5. **Integrate Discord OAuth**: Set up authentication to allow users to log in with their Discord accounts securely.
6. **Develop Workspace Management**: Create functionality for users to manage multiple workspaces, including creating, deleting, and switching between them.
7. **Implement Variable System**: Develop the automatic variable tracking system for user interactions and provide support for dynamic content in embeds.
8. **Testing and Debugging**: Conduct thorough testing of all features to ensure functionality aligns with user expectations and debug any issues.

## USER EXPERIENCE
Users will experience a seamless onboarding process with a checklist guiding them through creating their first workspace, connecting to a Discord server, and building their first bot panel. The visual builder will allow intuitive interactions where users can drag nodes onto the canvas, configure settings in the sidebar, and visualize their bot's logic flow. Each action will provide immediate visual feedback, and users can publish their workflows with confidence that the behavior will match what is displayed on the canvas. The bilingual interface will enhance accessibility, making it easy for users to navigate and utilize the platform effectively.