HomeFinder AI - Actúa como un Senior Fullstack Developer. Crea una aplicación de gestión inmobiliaria colaborativa llamada .
Generated Prompt
## APPLICATION OVERVIEW HomeFinder AI is a collaborative real estate management web application designed to simplify the process of finding and managing properties. It allows users to capture property listings from various sources using intelligent scraping technology, enabling efficient tracking and collaboration on real estate opportunities. ## CORE FEATURES 1. **Main Dashboard**: A card-based view displaying saved properties, each card shows the title, total price (rent + expenses), neighborhood, two main images, and current status. 2. **Smart Capture System**: A prominent input field for pasting URLs from marketplaces or real estate sites that triggers an AI scraping function to extract essential property details such as title, rental price, expenses, currency, square meters, number of rooms, and a summary of features. 3. **Status Management**: A dropdown selector with distinct colors representing each status: Contacted (Blue), Coordinated Visit (Yellow), Visited (Green), and Discarded (Red), allowing users to easily track the status of each property. 4. **Advanced Filters**: Functionality to filter properties by status and sort them by total cost (rent + expenses), enhancing the user’s ability to organize and prioritize listings. 5. **Property Comments Section**: An interactive area for family members and collaborators to leave comments and opinions on each property, fostering collaborative decision-making. 6. **Floating Action Button**: A "+" button that allows users to quickly add new properties to the dashboard, streamlining the property management process. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design is clean and simple, utilizing plenty of white space to enhance readability and focus on content. - **Color Mode**: Light theme with dark text on light backgrounds to ensure high contrast and readability. - **Layout**: The layout includes a top navigation bar for easy access to features, a central dashboard displaying property cards, and a sidebar for filtering options. The comments section and floating button are strategically placed for quick access. - **Typography**: Use modern sans-serif fonts like Inter or Roboto for headings and body text, ensuring clarity and a contemporary feel. Maintain a clear hierarchy with larger sizes for titles and consistent spacing for readability. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for type safety and modern development practices. - **Styling**: Tailwind CSS for utility-first styling, enabling rapid UI development. - **UI Components**: Utilize shadcn/ui for consistent and responsive UI elements. - **State Management**: Use React's Context API or a state management library like Zustand for managing application state efficiently. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui, Supabase). 2. **Create Database Schema**: Set up Supabase database with a `properties` table including fields: url (unique), title, price_rent, price_expenses, total_cost (computed), currency, neighborhood, sq_meters, rooms, status (enum), images (text array), and ai_summary. 3. **Develop Main Dashboard**: Create the main dashboard component that fetches and displays property cards from the database, implementing responsive design principles. 4. **Implement Smart Capture System**: Develop the input component that connects to Supabase Edge Functions for scraping and extracting property details. 5. **Integrate Status Management**: Create a dropdown component with color-coded status options and functionality to update property status in the database. 6. **Build Advanced Filters**: Implement filtering and sorting features on the dashboard to enhance property management capabilities. 7. **Add Comments Section**: Develop a comments component for users to share opinions on properties, ensuring it connects to the relevant property in the database. 8. **Floating Action Button**: Add a floating "+" button for adding new properties, linking it to the smart capture input for quick entry. ## USER EXPERIENCE Users will be greeted with a minimalist dashboard showcasing their saved properties. They can easily add new properties by pasting URLs, which will be scraped for details automatically. The status management feature allows them to track each property's progress visually. Users can filter properties based on status and costs, while the comments section encourages family collaboration. The interface will be responsive, ensuring a seamless experience on mobile devices, making it ideal for on-the-go property visits.
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!
