Landlord - Update Request: Please keep the current design, aesthetic, and codebase exactly as they are. I only need you to ADD and INTEGRATE the...
Generated Prompt
## APPLICATION OVERVIEW This web application serves as a platform for landlords and students to connect through an integrated property management and roommate matching system. The application features a landlord portal for property listings and a comprehensive onboarding process for students, enabling them to find ideal living arrangements based on their preferences and study backgrounds. ## CORE FEATURES 1. **Landlord Portal**: A dedicated section for landlords that includes a dashboard with the ability to add new properties through an intuitive form. Landlords can upload photos, set monthly prices, select utilities, and choose the nearest private university. 2. **Private Universities List**: An expanded dropdown selector for universities, categorized by location. New entries include Universidad Loyola, CEU Fernando III, and others across Spain to enhance user selection. 3. **Degree/Career Catalog**: During the student onboarding process, users will select their field of study from a dropdown menu. This information will be displayed on roommate match cards to facilitate better matching based on academic background. 4. **Enhanced Compatibility Test**: A comprehensive questionnaire that assesses user compatibility through eight questions, including options for lifestyle preferences, cleaning habits, and social habits, with a smooth progress bar and polished transitions. 5. **Roommate Match Cards**: Displaying potential matches with compatibility scores and relevant information, including the user's field of study, enhancing the matchmaking experience. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean and simple design with ample white space, emphasizing clarity and ease of navigation. - **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a fresh look. - **Layout**: The layout should be structured with a top navigation bar, a main content area for dashboards and forms, and a sidebar for additional options or filters when necessary. - **Typography**: Use modern sans-serif fonts for clarity and readability, with a clear hierarchy that distinguishes headings, subheadings, and body text. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for a robust and type-safe development experience. - **Styling**: Tailwind CSS for efficient and responsive design. - **UI Components**: Utilize shadcn/ui components to maintain consistency and enhance user experience. - **State Management**: Implement context or a state management library like Redux if scaling state management becomes necessary. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install necessary dependencies (Tailwind CSS, shadcn/ui). 2. **Create Navigation Bar**: Add a navigation component with links to switch between the landlord view and the main application. 3. **Develop Landlord Dashboard**: Build a dashboard interface that includes the "Add New Property" button and a form for property details (photos, price, utilities, university selection). 4. **Expand University Selector**: Modify the existing university dropdown to incorporate new categories and options. 5. **Implement Onboarding Process**: Add a new onboarding step for students to select their degree and ensure this data is reflected in the roommate match cards. 6. **Enhance Compatibility Test**: Create the compatibility questionnaire with the specified questions and options, ensuring smooth transitions and progress tracking. 7. **Roommate Match Functionality**: Develop the matching algorithm and UI for displaying compatible roommates based on user inputs. ## USER EXPERIENCE Users will start by onboarding through a simple and guided process, selecting their study area and preferences. Once registered, landlords can easily navigate the landlord portal to list properties, while students can browse potential roommates based on compatibility scores. The application should ensure smooth transitions between different views, with a focus on user engagement and satisfaction throughout the matching process.
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!
