Un dashboard de uso personal para gestionar un negocio con el que voy a construir webs sencillas de forma automatizada.
Generated Prompt
```markdown ## APPLICATION OVERVIEW This application is a personal dashboard designed to automate the management of a web development business. It allows users to analyze potential clients based on their postal code, generate landing pages from Google Places data, publish them to a specified website, and send WhatsApp messages to clients with personalized information. ## CORE FEATURES 1. **Postal Code Analysis**: Users can enter a Spanish postal code to trigger an API call to make.com, retrieving potential clients from Google Places who lack a website and fit predefined categories. 2. **Landing Page Generation**: The application will allow users to select qualifying businesses and generate landing pages using Google Gemini, based on predefined templates. 3. **Landing Page Review**: Users can review generated landing pages directly from the dashboard before publishing. 4. **FTP/SFTP Publishing**: Once validated, landing pages can be published to the user's website via FTP or SFTP. 5. **WhatsApp Notification**: After publishing, users can send personalized WhatsApp messages using Twilio, including the business name and landing URL. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design features a clean and simple interface with ample white space, allowing users to focus on their tasks without distractions. - **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a modern aesthetic. - **Layout**: - A sidebar for navigation, with sections for analysis, landing page generation, review, and settings. - A main content area displaying actionable buttons, forms for input, and lists of potential clients or generated pages. - **Typography**: - Primary Font: 'Roboto' for body text, ensuring clarity and modernity. - Headings: Bold, larger font sizes to establish a clear hierarchy and guide users through the dashboard. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust type-checking and enhanced developer experience. - **Styling**: Tailwind CSS to facilitate rapid styling and maintain a consistent design language. - **UI Components**: Utilize shadcn/ui components for a cohesive and accessible user interface. - **State Management**: React Context API for application state management, if needed for global states. ## IMPLEMENTATION STEPS 1. **Setup Project Environment**: Initialize a new React project using Create React App with TypeScript. 2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project. 3. **Create Core Components**: Develop individual components for each core feature, including forms for postal code input, lists for potential clients, and buttons for actions. 4. **Implement API Connections**: Set up API calls to make.com for data retrieval and Twilio for WhatsApp messaging. 5. **Design Layout**: Create the sidebar and main content area using Tailwind CSS to ensure responsiveness and clarity. 6. **Test Functionality**: Validate each feature thoroughly to ensure data flows correctly and user interactions are seamless. 7. **Deploy Application**: Prepare the application for deployment on a web server, ensuring all API endpoints are functioning correctly. ## USER EXPERIENCE Users will interact with the dashboard through a clean interface, starting with inputting the postal code to analyze potential clients. They can easily navigate between sections using the sidebar, view and select businesses for landing page generation, and validate their creations before publishing. The WhatsApp notification feature adds a personal touch, allowing users to easily communicate with clients after generating their landing pages. ``` This prompt is structured to provide a clear and comprehensive overview of the application idea, adhering to Lovable's best practices.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
